@phcdevworks/spectre-components 1.4.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/README.md +164 -22
  2. package/dist/alert.cjs +455 -0
  3. package/dist/alert.cjs.map +1 -0
  4. package/dist/alert.d.cts +68 -0
  5. package/dist/alert.d.ts +68 -0
  6. package/dist/alert.js +450 -0
  7. package/dist/alert.js.map +1 -0
  8. package/dist/avatar.cjs +454 -0
  9. package/dist/avatar.cjs.map +1 -0
  10. package/dist/avatar.d.cts +74 -0
  11. package/dist/avatar.d.ts +74 -0
  12. package/dist/avatar.js +449 -0
  13. package/dist/avatar.js.map +1 -0
  14. package/dist/badge.cjs +5 -1
  15. package/dist/badge.cjs.map +1 -1
  16. package/dist/badge.d.cts +3 -2
  17. package/dist/badge.d.ts +3 -2
  18. package/dist/badge.js +5 -1
  19. package/dist/badge.js.map +1 -1
  20. package/dist/button.cjs.map +1 -1
  21. package/dist/button.d.cts +2 -2
  22. package/dist/button.d.ts +2 -2
  23. package/dist/button.js.map +1 -1
  24. package/dist/card.cjs +11 -2
  25. package/dist/card.cjs.map +1 -1
  26. package/dist/card.d.cts +3 -2
  27. package/dist/card.d.ts +3 -2
  28. package/dist/card.js +11 -2
  29. package/dist/card.js.map +1 -1
  30. package/dist/form-BumNzIay.d.cts +28 -0
  31. package/dist/form-BumNzIay.d.ts +28 -0
  32. package/dist/icon-box.cjs +5 -1
  33. package/dist/icon-box.cjs.map +1 -1
  34. package/dist/icon-box.d.cts +3 -2
  35. package/dist/icon-box.d.ts +3 -2
  36. package/dist/icon-box.js +5 -1
  37. package/dist/icon-box.js.map +1 -1
  38. package/dist/index.cjs +582 -9
  39. package/dist/index.cjs.map +1 -1
  40. package/dist/index.d.cts +6 -1
  41. package/dist/index.d.ts +6 -1
  42. package/dist/index.js +566 -11
  43. package/dist/index.js.map +1 -1
  44. package/dist/input.cjs.map +1 -1
  45. package/dist/input.d.cts +2 -2
  46. package/dist/input.d.ts +2 -2
  47. package/dist/input.js.map +1 -1
  48. package/dist/pricing-card.cjs +432 -0
  49. package/dist/pricing-card.cjs.map +1 -0
  50. package/dist/pricing-card.d.cts +60 -0
  51. package/dist/pricing-card.d.ts +60 -0
  52. package/dist/pricing-card.js +429 -0
  53. package/dist/pricing-card.js.map +1 -0
  54. package/dist/rating.cjs +6 -2
  55. package/dist/rating.cjs.map +1 -1
  56. package/dist/rating.d.cts +3 -2
  57. package/dist/rating.d.ts +3 -2
  58. package/dist/rating.js +6 -2
  59. package/dist/rating.js.map +1 -1
  60. package/dist/select.cjs.map +1 -1
  61. package/dist/select.d.cts +1 -1
  62. package/dist/select.d.ts +1 -1
  63. package/dist/select.js.map +1 -1
  64. package/dist/spinner.cjs +356 -0
  65. package/dist/spinner.cjs.map +1 -0
  66. package/dist/spinner.d.cts +52 -0
  67. package/dist/spinner.d.ts +52 -0
  68. package/dist/spinner.js +351 -0
  69. package/dist/spinner.js.map +1 -0
  70. package/dist/tag.cjs +473 -0
  71. package/dist/tag.cjs.map +1 -0
  72. package/dist/tag.d.cts +80 -0
  73. package/dist/tag.d.ts +80 -0
  74. package/dist/tag.js +468 -0
  75. package/dist/tag.js.map +1 -0
  76. package/dist/testimonial.cjs +14 -3
  77. package/dist/testimonial.cjs.map +1 -1
  78. package/dist/testimonial.d.cts +3 -2
  79. package/dist/testimonial.d.ts +3 -2
  80. package/dist/testimonial.js +14 -3
  81. package/dist/testimonial.js.map +1 -1
  82. package/dist/textarea.cjs.map +1 -1
  83. package/dist/textarea.d.cts +1 -1
  84. package/dist/textarea.d.ts +1 -1
  85. package/dist/textarea.js.map +1 -1
  86. package/package.json +36 -8
  87. package/dist/form-Dg6kuOS7.d.cts +0 -18
  88. package/dist/form-Dg6kuOS7.d.ts +0 -18
package/dist/index.cjs CHANGED
@@ -59,7 +59,22 @@ var spectreBadgeVariants = [
59
59
  function isBadgeVariant(value) {
60
60
  return spectreBadgeVariants.includes(value);
61
61
  }
62
- var spectreCardVariants = ["elevated", "flat", "outline", "ghost"];
62
+ var spectreAlertVariants = [
63
+ "info",
64
+ "success",
65
+ "warning",
66
+ "danger",
67
+ "neutral"
68
+ ];
69
+ function isAlertVariant(value) {
70
+ return spectreAlertVariants.includes(value);
71
+ }
72
+ var spectreCardVariants = [
73
+ "elevated",
74
+ "flat",
75
+ "outline",
76
+ "ghost"
77
+ ];
63
78
  function isCardVariant(value) {
64
79
  return spectreCardVariants.includes(value);
65
80
  }
@@ -79,9 +94,55 @@ var spectreIconBoxVariants = [
79
94
  function isIconBoxVariant(value) {
80
95
  return spectreIconBoxVariants.includes(value);
81
96
  }
82
- var spectreTestimonialVariants = ["elevated", "flat", "outline", "ghost"];
97
+ var spectreTestimonialVariants = [
98
+ "elevated",
99
+ "flat",
100
+ "outline",
101
+ "ghost"
102
+ ];
83
103
  function isTestimonialVariant(value) {
84
- return spectreTestimonialVariants.includes(value);
104
+ return spectreTestimonialVariants.includes(
105
+ value
106
+ );
107
+ }
108
+ var spectreSpinnerVariants = [
109
+ "primary",
110
+ "secondary",
111
+ "success",
112
+ "warning",
113
+ "danger",
114
+ "info",
115
+ "neutral",
116
+ "accent",
117
+ "cta"
118
+ ];
119
+ function isSpinnerVariant(value) {
120
+ return spectreSpinnerVariants.includes(value);
121
+ }
122
+ var spectreTagVariants = [
123
+ "default",
124
+ "primary",
125
+ "secondary",
126
+ "success",
127
+ "warning",
128
+ "danger",
129
+ "info",
130
+ "neutral",
131
+ "accent",
132
+ "cta",
133
+ "outline",
134
+ "ghost"
135
+ ];
136
+ function isTagVariant(value) {
137
+ return spectreTagVariants.includes(value);
138
+ }
139
+ var spectreAvatarSizes = ["xs", "sm", "md", "lg", "xl"];
140
+ function isAvatarSize(value) {
141
+ return spectreAvatarSizes.includes(value);
142
+ }
143
+ var spectreAvatarShapes = ["circle", "square"];
144
+ function isAvatarShape(value) {
145
+ return spectreAvatarShapes.includes(value);
85
146
  }
86
147
  function normalizeInt(value, fallback, min = 0) {
87
148
  if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
@@ -1648,15 +1709,19 @@ var SpectreBadgeElement = class extends SpectreProjectableElement {
1648
1709
  }
1649
1710
  get badgeClasses() {
1650
1711
  return spectreUi.getBadgeClasses({
1651
- disabled: this.disabled ?? false,
1712
+ disabled: this.isDisabled,
1652
1713
  fullWidth: this.fullWidth ?? false,
1653
1714
  loading: this.loading ?? false,
1654
1715
  size: this.size,
1655
1716
  variant: this.variant
1656
1717
  });
1657
1718
  }
1719
+ get isDisabled() {
1720
+ return (this.disabled ?? false) || (this.loading ?? false);
1721
+ }
1658
1722
  render() {
1659
1723
  return lit.html`<span
1724
+ aria-busy="${this.loading ? "true" : "false"}"
1660
1725
  aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
1661
1726
  aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
1662
1727
  aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
@@ -1738,7 +1803,7 @@ var SpectreCardElement = class extends SpectreProjectableElement {
1738
1803
  }
1739
1804
  get cardClasses() {
1740
1805
  return spectreUi.getCardClasses({
1741
- disabled: this.disabled ?? false,
1806
+ disabled: this.isDisabled,
1742
1807
  fullHeight: this.fullHeight ?? false,
1743
1808
  interactive: this.interactive ?? false,
1744
1809
  loading: this.loading ?? false,
@@ -1746,8 +1811,12 @@ var SpectreCardElement = class extends SpectreProjectableElement {
1746
1811
  variant: this.variant
1747
1812
  });
1748
1813
  }
1814
+ get isDisabled() {
1815
+ return (this.disabled ?? false) || (this.loading ?? false);
1816
+ }
1749
1817
  render() {
1750
1818
  return lit.html`<div
1819
+ aria-busy="${this.loading ? "true" : "false"}"
1751
1820
  aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
1752
1821
  aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
1753
1822
  aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
@@ -1834,7 +1903,7 @@ var SpectreIconBoxElement = class extends SpectreProjectableElement {
1834
1903
  }
1835
1904
  get iconBoxClasses() {
1836
1905
  return spectreUi.getIconBoxClasses({
1837
- disabled: this.disabled ?? false,
1906
+ disabled: this.isDisabled,
1838
1907
  fullWidth: this.fullWidth ?? false,
1839
1908
  interactive: this.interactive ?? false,
1840
1909
  loading: this.loading ?? false,
@@ -1843,8 +1912,12 @@ var SpectreIconBoxElement = class extends SpectreProjectableElement {
1843
1912
  variant: this.variant
1844
1913
  });
1845
1914
  }
1915
+ get isDisabled() {
1916
+ return (this.disabled ?? false) || (this.loading ?? false);
1917
+ }
1846
1918
  render() {
1847
1919
  return lit.html`<div
1920
+ aria-busy="${this.loading ? "true" : "false"}"
1848
1921
  aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
1849
1922
  aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
1850
1923
  aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
@@ -1916,11 +1989,14 @@ var SpectreRatingElement = class extends SpectreBaseElement {
1916
1989
  }
1917
1990
  get ratingClasses() {
1918
1991
  return spectreUi.getRatingClasses({
1919
- disabled: this.disabled ?? false,
1992
+ disabled: this.isDisabled,
1920
1993
  loading: this.loading ?? false,
1921
1994
  size: this.size
1922
1995
  });
1923
1996
  }
1997
+ get isDisabled() {
1998
+ return (this.disabled ?? false) || (this.loading ?? false);
1999
+ }
1924
2000
  get effectiveMax() {
1925
2001
  return this.max ?? 5;
1926
2002
  }
@@ -1942,6 +2018,7 @@ var SpectreRatingElement = class extends SpectreBaseElement {
1942
2018
  render() {
1943
2019
  const trimmedLabel = this.label?.trim();
1944
2020
  return lit.html`<div
2021
+ aria-busy="${this.loading ? "true" : "false"}"
1945
2022
  aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
1946
2023
  aria-label="${this.computedAriaLabel}"
1947
2024
  aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
@@ -1952,7 +2029,7 @@ var SpectreRatingElement = class extends SpectreBaseElement {
1952
2029
  title="${ifDefined_js.ifDefined(this.title || void 0)}"
1953
2030
  >
1954
2031
  <div class="${spectreUi.getRatingStarsClasses()}">${this.renderStars()}</div>
1955
- ${trimmedLabel ? lit.html`<span class="${spectreUi.getRatingTextClasses({ disabled: this.disabled ?? false })}">${trimmedLabel}</span>` : lit.nothing}
2032
+ ${trimmedLabel ? lit.html`<span class="${spectreUi.getRatingTextClasses({ disabled: this.isDisabled })}">${trimmedLabel}</span>` : lit.nothing}
1956
2033
  </div>`;
1957
2034
  }
1958
2035
  };
@@ -2022,15 +2099,19 @@ var SpectreTestimonialElement = class extends SpectreProjectableElement {
2022
2099
  }
2023
2100
  get testimonialClasses() {
2024
2101
  return spectreUi.getTestimonialClasses({
2025
- disabled: this.disabled ?? false,
2102
+ disabled: this.isDisabled,
2026
2103
  fullHeight: this.fullHeight ?? false,
2027
2104
  interactive: this.interactive ?? false,
2028
2105
  loading: this.loading ?? false,
2029
2106
  variant: this.variant
2030
2107
  });
2031
2108
  }
2109
+ get isDisabled() {
2110
+ return (this.disabled ?? false) || (this.loading ?? false);
2111
+ }
2032
2112
  render() {
2033
2113
  return lit.html`<div
2114
+ aria-busy="${this.loading ? "true" : "false"}"
2034
2115
  aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
2035
2116
  aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
2036
2117
  aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
@@ -2058,6 +2139,475 @@ function defineSpectreTestimonial(tagName = "sp-testimonial") {
2058
2139
  customElements.define(tagName, SpectreTestimonialElement);
2059
2140
  return SpectreTestimonialElement;
2060
2141
  }
2142
+ var SpectreAlertElement = class extends SpectreProjectableElement {
2143
+ constructor() {
2144
+ super(...arguments);
2145
+ this.dismissed = false;
2146
+ this.disabled = false;
2147
+ this.fullWidth = false;
2148
+ this.loading = false;
2149
+ this.size = "md";
2150
+ this.variant = "info";
2151
+ }
2152
+ get id() {
2153
+ return super.id;
2154
+ }
2155
+ set id(value) {
2156
+ super.id = value;
2157
+ }
2158
+ get title() {
2159
+ return super.title;
2160
+ }
2161
+ set title(value) {
2162
+ super.title = value;
2163
+ }
2164
+ getContentContainer() {
2165
+ return this.querySelector("[data-sp-alert-native]");
2166
+ }
2167
+ isInternalNode(node) {
2168
+ if (node.nodeType !== Node.ELEMENT_NODE) {
2169
+ return false;
2170
+ }
2171
+ const el = node;
2172
+ return el.hasAttribute("data-sp-alert-native");
2173
+ }
2174
+ willUpdate(changedProperties) {
2175
+ if (changedProperties.has("dismissed") && this.dismissed == null) {
2176
+ this.dismissed = false;
2177
+ }
2178
+ if (changedProperties.has("disabled") && this.disabled == null) {
2179
+ this.disabled = false;
2180
+ }
2181
+ if (changedProperties.has("fullWidth") && this.fullWidth == null) {
2182
+ this.fullWidth = false;
2183
+ }
2184
+ if (changedProperties.has("loading") && this.loading == null) {
2185
+ this.loading = false;
2186
+ }
2187
+ if (changedProperties.has("variant") && (this.variant == null || !isAlertVariant(this.variant))) {
2188
+ this.variant = "info";
2189
+ }
2190
+ if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
2191
+ this.size = "md";
2192
+ }
2193
+ }
2194
+ get alertClasses() {
2195
+ return spectreUi.getAlertClasses({
2196
+ disabled: this.isDisabled,
2197
+ dismissed: this.dismissed ?? false,
2198
+ fullWidth: this.fullWidth ?? false,
2199
+ loading: this.loading ?? false,
2200
+ size: this.size,
2201
+ variant: this.variant
2202
+ });
2203
+ }
2204
+ get isDisabled() {
2205
+ return (this.disabled ?? false) || (this.loading ?? false);
2206
+ }
2207
+ render() {
2208
+ return lit.html`<div
2209
+ aria-busy="${this.loading ? "true" : "false"}"
2210
+ aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
2211
+ aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
2212
+ aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
2213
+ class="${this.alertClasses}"
2214
+ data-sp-alert-native
2215
+ id="${ifDefined_js.ifDefined(this.id || void 0)}"
2216
+ role="alert"
2217
+ title="${ifDefined_js.ifDefined(this.title || void 0)}"
2218
+ >
2219
+ ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
2220
+ </div>`;
2221
+ }
2222
+ };
2223
+ SpectreAlertElement.properties = {
2224
+ dismissed: { type: Boolean, reflect: true },
2225
+ disabled: { type: Boolean, reflect: true },
2226
+ fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
2227
+ loading: { type: Boolean, reflect: true },
2228
+ size: { type: String, reflect: true },
2229
+ variant: { type: String, reflect: true }
2230
+ };
2231
+ function defineSpectreAlert(tagName = "sp-alert") {
2232
+ const existingElement = customElements.get(tagName);
2233
+ if (existingElement) {
2234
+ return existingElement;
2235
+ }
2236
+ customElements.define(tagName, SpectreAlertElement);
2237
+ return SpectreAlertElement;
2238
+ }
2239
+ var SpectreAvatarElement = class extends SpectreProjectableElement {
2240
+ constructor() {
2241
+ super(...arguments);
2242
+ this.disabled = false;
2243
+ this.fullWidth = false;
2244
+ this.interactive = false;
2245
+ this.loading = false;
2246
+ this.placeholder = false;
2247
+ this.shape = "circle";
2248
+ this.size = "md";
2249
+ }
2250
+ get id() {
2251
+ return super.id;
2252
+ }
2253
+ set id(value) {
2254
+ super.id = value;
2255
+ }
2256
+ get title() {
2257
+ return super.title;
2258
+ }
2259
+ set title(value) {
2260
+ super.title = value;
2261
+ }
2262
+ getContentContainer() {
2263
+ return this.querySelector("[data-sp-avatar-native]");
2264
+ }
2265
+ isInternalNode(node) {
2266
+ if (node.nodeType !== Node.ELEMENT_NODE) {
2267
+ return false;
2268
+ }
2269
+ const el = node;
2270
+ return el.hasAttribute("data-sp-avatar-native");
2271
+ }
2272
+ willUpdate(changedProperties) {
2273
+ if (changedProperties.has("disabled") && this.disabled == null) {
2274
+ this.disabled = false;
2275
+ }
2276
+ if (changedProperties.has("fullWidth") && this.fullWidth == null) {
2277
+ this.fullWidth = false;
2278
+ }
2279
+ if (changedProperties.has("interactive") && this.interactive == null) {
2280
+ this.interactive = false;
2281
+ }
2282
+ if (changedProperties.has("loading") && this.loading == null) {
2283
+ this.loading = false;
2284
+ }
2285
+ if (changedProperties.has("placeholder") && this.placeholder == null) {
2286
+ this.placeholder = false;
2287
+ }
2288
+ if (changedProperties.has("shape") && (this.shape == null || !isAvatarShape(this.shape))) {
2289
+ this.shape = "circle";
2290
+ }
2291
+ if (changedProperties.has("size") && (this.size == null || !isAvatarSize(this.size))) {
2292
+ this.size = "md";
2293
+ }
2294
+ }
2295
+ get avatarClasses() {
2296
+ return spectreUi.getAvatarClasses({
2297
+ disabled: this.isDisabled,
2298
+ fullWidth: this.fullWidth ?? false,
2299
+ interactive: this.interactive ?? false,
2300
+ loading: this.loading ?? false,
2301
+ placeholder: this.placeholder ?? false,
2302
+ shape: this.shape,
2303
+ size: this.size
2304
+ });
2305
+ }
2306
+ get isDisabled() {
2307
+ return (this.disabled ?? false) || (this.loading ?? false);
2308
+ }
2309
+ render() {
2310
+ return lit.html`<div
2311
+ aria-busy="${this.loading ? "true" : "false"}"
2312
+ aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
2313
+ aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
2314
+ aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
2315
+ class="${this.avatarClasses}"
2316
+ data-sp-avatar-native
2317
+ id="${ifDefined_js.ifDefined(this.id || void 0)}"
2318
+ title="${ifDefined_js.ifDefined(this.title || void 0)}"
2319
+ >
2320
+ ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
2321
+ </div>`;
2322
+ }
2323
+ };
2324
+ SpectreAvatarElement.properties = {
2325
+ disabled: { type: Boolean, reflect: true },
2326
+ fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
2327
+ interactive: { type: Boolean, reflect: true },
2328
+ loading: { type: Boolean, reflect: true },
2329
+ placeholder: { type: Boolean, reflect: true },
2330
+ shape: { type: String, reflect: true },
2331
+ size: { type: String, reflect: true }
2332
+ };
2333
+ function defineSpectreAvatar(tagName = "sp-avatar") {
2334
+ const existingElement = customElements.get(tagName);
2335
+ if (existingElement) {
2336
+ return existingElement;
2337
+ }
2338
+ customElements.define(tagName, SpectreAvatarElement);
2339
+ return SpectreAvatarElement;
2340
+ }
2341
+ var SpectreSpinnerElement = class extends SpectreBaseElement {
2342
+ constructor() {
2343
+ super(...arguments);
2344
+ this.disabled = false;
2345
+ this.loading = true;
2346
+ this.size = "md";
2347
+ }
2348
+ get id() {
2349
+ return super.id;
2350
+ }
2351
+ set id(value) {
2352
+ super.id = value;
2353
+ }
2354
+ get title() {
2355
+ return super.title;
2356
+ }
2357
+ set title(value) {
2358
+ super.title = value;
2359
+ }
2360
+ willUpdate(changedProperties) {
2361
+ if (changedProperties.has("disabled") && this.disabled == null) {
2362
+ this.disabled = false;
2363
+ }
2364
+ if (changedProperties.has("loading") && this.loading == null) {
2365
+ this.loading = true;
2366
+ }
2367
+ if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
2368
+ this.size = "md";
2369
+ }
2370
+ if (changedProperties.has("variant") && this.variant != null && !isSpinnerVariant(this.variant)) {
2371
+ this.variant = void 0;
2372
+ }
2373
+ }
2374
+ get spinnerClasses() {
2375
+ return spectreUi.getSpinnerClasses({
2376
+ disabled: this.disabled ?? false,
2377
+ loading: this.loading ?? true,
2378
+ size: this.size,
2379
+ ...this.variant != null ? { variant: this.variant } : {}
2380
+ });
2381
+ }
2382
+ get computedAriaLabel() {
2383
+ return this.forwardedAriaLabel ?? "Loading";
2384
+ }
2385
+ render() {
2386
+ return lit.html`<div
2387
+ aria-busy="${this.loading ? "true" : "false"}"
2388
+ aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
2389
+ aria-label="${this.computedAriaLabel}"
2390
+ aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
2391
+ class="${this.spinnerClasses}"
2392
+ data-sp-spinner-native
2393
+ id="${ifDefined_js.ifDefined(this.id || void 0)}"
2394
+ role="status"
2395
+ title="${ifDefined_js.ifDefined(this.title || void 0)}"
2396
+ ></div>`;
2397
+ }
2398
+ };
2399
+ SpectreSpinnerElement.properties = {
2400
+ disabled: { type: Boolean, reflect: true },
2401
+ loading: { type: Boolean, reflect: true },
2402
+ size: { type: String, reflect: true },
2403
+ variant: { type: String, reflect: true }
2404
+ };
2405
+ function defineSpectreSpinner(tagName = "sp-spinner") {
2406
+ const existingElement = customElements.get(tagName);
2407
+ if (existingElement) {
2408
+ return existingElement;
2409
+ }
2410
+ customElements.define(tagName, SpectreSpinnerElement);
2411
+ return SpectreSpinnerElement;
2412
+ }
2413
+ var SpectreTagElement = class extends SpectreProjectableElement {
2414
+ constructor() {
2415
+ super(...arguments);
2416
+ this.dismissible = false;
2417
+ this.disabled = false;
2418
+ this.fullWidth = false;
2419
+ this.interactive = false;
2420
+ this.loading = false;
2421
+ this.selected = false;
2422
+ this.size = "md";
2423
+ this.variant = "default";
2424
+ }
2425
+ get id() {
2426
+ return super.id;
2427
+ }
2428
+ set id(value) {
2429
+ super.id = value;
2430
+ }
2431
+ get title() {
2432
+ return super.title;
2433
+ }
2434
+ set title(value) {
2435
+ super.title = value;
2436
+ }
2437
+ getContentContainer() {
2438
+ return this.querySelector("[data-sp-tag-native]");
2439
+ }
2440
+ isInternalNode(node) {
2441
+ if (node.nodeType !== Node.ELEMENT_NODE) {
2442
+ return false;
2443
+ }
2444
+ const el = node;
2445
+ return el.hasAttribute("data-sp-tag-native");
2446
+ }
2447
+ willUpdate(changedProperties) {
2448
+ if (changedProperties.has("dismissible") && this.dismissible == null) {
2449
+ this.dismissible = false;
2450
+ }
2451
+ if (changedProperties.has("disabled") && this.disabled == null) {
2452
+ this.disabled = false;
2453
+ }
2454
+ if (changedProperties.has("fullWidth") && this.fullWidth == null) {
2455
+ this.fullWidth = false;
2456
+ }
2457
+ if (changedProperties.has("interactive") && this.interactive == null) {
2458
+ this.interactive = false;
2459
+ }
2460
+ if (changedProperties.has("loading") && this.loading == null) {
2461
+ this.loading = false;
2462
+ }
2463
+ if (changedProperties.has("selected") && this.selected == null) {
2464
+ this.selected = false;
2465
+ }
2466
+ if (changedProperties.has("size") && (this.size == null || !isInputSize(this.size))) {
2467
+ this.size = "md";
2468
+ }
2469
+ if (changedProperties.has("variant") && (this.variant == null || !isTagVariant(this.variant))) {
2470
+ this.variant = "default";
2471
+ }
2472
+ }
2473
+ get tagClasses() {
2474
+ return spectreUi.getTagClasses({
2475
+ disabled: this.isDisabled,
2476
+ dismissible: this.dismissible ?? false,
2477
+ fullWidth: this.fullWidth ?? false,
2478
+ interactive: this.interactive ?? false,
2479
+ loading: this.loading ?? false,
2480
+ selected: this.selected ?? false,
2481
+ size: this.size,
2482
+ variant: this.variant
2483
+ });
2484
+ }
2485
+ get isDisabled() {
2486
+ return (this.disabled ?? false) || (this.loading ?? false);
2487
+ }
2488
+ render() {
2489
+ return lit.html`<span
2490
+ aria-busy="${this.loading ? "true" : "false"}"
2491
+ aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
2492
+ aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
2493
+ aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
2494
+ class="${this.tagClasses}"
2495
+ data-sp-tag-native
2496
+ id="${ifDefined_js.ifDefined(this.id || void 0)}"
2497
+ title="${ifDefined_js.ifDefined(this.title || void 0)}"
2498
+ >
2499
+ ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
2500
+ </span>`;
2501
+ }
2502
+ };
2503
+ SpectreTagElement.properties = {
2504
+ dismissible: { type: Boolean, reflect: true },
2505
+ disabled: { type: Boolean, reflect: true },
2506
+ fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
2507
+ interactive: { type: Boolean, reflect: true },
2508
+ loading: { type: Boolean, reflect: true },
2509
+ selected: { type: Boolean, reflect: true },
2510
+ size: { type: String, reflect: true },
2511
+ variant: { type: String, reflect: true }
2512
+ };
2513
+ function defineSpectreTag(tagName = "sp-tag") {
2514
+ const existingElement = customElements.get(tagName);
2515
+ if (existingElement) {
2516
+ return existingElement;
2517
+ }
2518
+ customElements.define(tagName, SpectreTagElement);
2519
+ return SpectreTagElement;
2520
+ }
2521
+ var SpectrePricingCardElement = class extends SpectreProjectableElement {
2522
+ constructor() {
2523
+ super(...arguments);
2524
+ this.disabled = false;
2525
+ this.featured = false;
2526
+ this.fullHeight = false;
2527
+ this.interactive = false;
2528
+ this.loading = false;
2529
+ }
2530
+ get id() {
2531
+ return super.id;
2532
+ }
2533
+ set id(value) {
2534
+ super.id = value;
2535
+ }
2536
+ get title() {
2537
+ return super.title;
2538
+ }
2539
+ set title(value) {
2540
+ super.title = value;
2541
+ }
2542
+ getContentContainer() {
2543
+ return this.querySelector("[data-sp-pricing-card-native]");
2544
+ }
2545
+ isInternalNode(node) {
2546
+ if (node.nodeType !== Node.ELEMENT_NODE) {
2547
+ return false;
2548
+ }
2549
+ const el = node;
2550
+ return el.hasAttribute("data-sp-pricing-card-native");
2551
+ }
2552
+ willUpdate(changedProperties) {
2553
+ if (changedProperties.has("disabled") && this.disabled == null) {
2554
+ this.disabled = false;
2555
+ }
2556
+ if (changedProperties.has("featured") && this.featured == null) {
2557
+ this.featured = false;
2558
+ }
2559
+ if (changedProperties.has("fullHeight") && this.fullHeight == null) {
2560
+ this.fullHeight = false;
2561
+ }
2562
+ if (changedProperties.has("interactive") && this.interactive == null) {
2563
+ this.interactive = false;
2564
+ }
2565
+ if (changedProperties.has("loading") && this.loading == null) {
2566
+ this.loading = false;
2567
+ }
2568
+ }
2569
+ get pricingCardClasses() {
2570
+ return spectreUi.getPricingCardClasses({
2571
+ disabled: this.isDisabled,
2572
+ featured: this.featured ?? false,
2573
+ fullHeight: this.fullHeight ?? false,
2574
+ interactive: this.interactive ?? false,
2575
+ loading: this.loading ?? false
2576
+ });
2577
+ }
2578
+ get isDisabled() {
2579
+ return (this.disabled ?? false) || (this.loading ?? false);
2580
+ }
2581
+ render() {
2582
+ return lit.html`<div
2583
+ aria-busy="${this.loading ? "true" : "false"}"
2584
+ aria-describedby="${ifDefined_js.ifDefined(this.forwardedAriaDescribedBy)}"
2585
+ aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
2586
+ aria-labelledby="${ifDefined_js.ifDefined(this.forwardedAriaLabelledBy)}"
2587
+ class="${this.pricingCardClasses}"
2588
+ data-sp-pricing-card-native
2589
+ id="${ifDefined_js.ifDefined(this.id || void 0)}"
2590
+ title="${ifDefined_js.ifDefined(this.title || void 0)}"
2591
+ >
2592
+ ${this.hasProjectedContent ? this.projectedContent : lit.nothing}
2593
+ </div>`;
2594
+ }
2595
+ };
2596
+ SpectrePricingCardElement.properties = {
2597
+ disabled: { type: Boolean, reflect: true },
2598
+ featured: { type: Boolean, reflect: true },
2599
+ fullHeight: { attribute: "full-height", type: Boolean, reflect: true },
2600
+ interactive: { type: Boolean, reflect: true },
2601
+ loading: { type: Boolean, reflect: true }
2602
+ };
2603
+ function defineSpectrePricingCard(tagName = "sp-pricing-card") {
2604
+ const existingElement = customElements.get(tagName);
2605
+ if (existingElement) {
2606
+ return existingElement;
2607
+ }
2608
+ customElements.define(tagName, SpectrePricingCardElement);
2609
+ return SpectrePricingCardElement;
2610
+ }
2061
2611
 
2062
2612
  // src/index.ts
2063
2613
  function defineSpectreComponents() {
@@ -2074,8 +2624,15 @@ function defineSpectreComponents() {
2074
2624
  defineSpectreIconBox();
2075
2625
  defineSpectreRating();
2076
2626
  defineSpectreTestimonial();
2627
+ defineSpectreAlert();
2628
+ defineSpectreAvatar();
2629
+ defineSpectreSpinner();
2630
+ defineSpectreTag();
2631
+ defineSpectrePricingCard();
2077
2632
  }
2078
2633
 
2634
+ exports.SpectreAlertElement = SpectreAlertElement;
2635
+ exports.SpectreAvatarElement = SpectreAvatarElement;
2079
2636
  exports.SpectreBadgeElement = SpectreBadgeElement;
2080
2637
  exports.SpectreButtonElement = SpectreButtonElement;
2081
2638
  exports.SpectreCardElement = SpectreCardElement;
@@ -2084,11 +2641,16 @@ exports.SpectreFieldsetElement = SpectreFieldsetElement;
2084
2641
  exports.SpectreIconBoxElement = SpectreIconBoxElement;
2085
2642
  exports.SpectreInputElement = SpectreInputElement;
2086
2643
  exports.SpectreLabelElement = SpectreLabelElement;
2644
+ exports.SpectrePricingCardElement = SpectrePricingCardElement;
2087
2645
  exports.SpectreRadioElement = SpectreRadioElement;
2088
2646
  exports.SpectreRatingElement = SpectreRatingElement;
2089
2647
  exports.SpectreSelectElement = SpectreSelectElement;
2648
+ exports.SpectreSpinnerElement = SpectreSpinnerElement;
2649
+ exports.SpectreTagElement = SpectreTagElement;
2090
2650
  exports.SpectreTestimonialElement = SpectreTestimonialElement;
2091
2651
  exports.SpectreTextareaElement = SpectreTextareaElement;
2652
+ exports.defineSpectreAlert = defineSpectreAlert;
2653
+ exports.defineSpectreAvatar = defineSpectreAvatar;
2092
2654
  exports.defineSpectreBadge = defineSpectreBadge;
2093
2655
  exports.defineSpectreButton = defineSpectreButton;
2094
2656
  exports.defineSpectreCard = defineSpectreCard;
@@ -2098,11 +2660,18 @@ exports.defineSpectreFieldset = defineSpectreFieldset;
2098
2660
  exports.defineSpectreIconBox = defineSpectreIconBox;
2099
2661
  exports.defineSpectreInput = defineSpectreInput;
2100
2662
  exports.defineSpectreLabel = defineSpectreLabel;
2663
+ exports.defineSpectrePricingCard = defineSpectrePricingCard;
2101
2664
  exports.defineSpectreRadio = defineSpectreRadio;
2102
2665
  exports.defineSpectreRating = defineSpectreRating;
2103
2666
  exports.defineSpectreSelect = defineSpectreSelect;
2667
+ exports.defineSpectreSpinner = defineSpectreSpinner;
2668
+ exports.defineSpectreTag = defineSpectreTag;
2104
2669
  exports.defineSpectreTestimonial = defineSpectreTestimonial;
2105
2670
  exports.defineSpectreTextarea = defineSpectreTextarea;
2671
+ exports.spectreAlertSizes = spectreInputSizes;
2672
+ exports.spectreAlertVariants = spectreAlertVariants;
2673
+ exports.spectreAvatarShapes = spectreAvatarShapes;
2674
+ exports.spectreAvatarSizes = spectreAvatarSizes;
2106
2675
  exports.spectreBadgeSizes = spectreInputSizes;
2107
2676
  exports.spectreBadgeVariants = spectreBadgeVariants;
2108
2677
  exports.spectreButtonSizes = spectreInputSizes;
@@ -2114,6 +2683,10 @@ exports.spectreIconBoxVariants = spectreIconBoxVariants;
2114
2683
  exports.spectreInputSizes = spectreInputSizes;
2115
2684
  exports.spectreInputTypes = spectreInputTypes;
2116
2685
  exports.spectreRatingSizes = spectreInputSizes;
2686
+ exports.spectreSpinnerSizes = spectreInputSizes;
2687
+ exports.spectreSpinnerVariants = spectreSpinnerVariants;
2688
+ exports.spectreTagSizes = spectreInputSizes;
2689
+ exports.spectreTagVariants = spectreTagVariants;
2117
2690
  exports.spectreTestimonialVariants = spectreTestimonialVariants;
2118
2691
  //# sourceMappingURL=index.cjs.map
2119
2692
  //# sourceMappingURL=index.cjs.map