@phcdevworks/spectre-components 1.19.0 → 1.21.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 (352) hide show
  1. package/README.md +770 -125
  2. package/dist/accordion-item.cjs +540 -0
  3. package/dist/accordion-item.cjs.map +1 -0
  4. package/dist/accordion-item.d.cts +59 -0
  5. package/dist/accordion-item.d.ts +59 -0
  6. package/dist/accordion-item.js +537 -0
  7. package/dist/accordion-item.js.map +1 -0
  8. package/dist/accordion.cjs +468 -0
  9. package/dist/accordion.cjs.map +1 -0
  10. package/dist/accordion.d.cts +38 -0
  11. package/dist/accordion.d.ts +38 -0
  12. package/dist/accordion.js +465 -0
  13. package/dist/accordion.js.map +1 -0
  14. package/dist/alert.cjs +166 -65
  15. package/dist/alert.cjs.map +1 -1
  16. package/dist/alert.d.cts +41 -8
  17. package/dist/alert.d.ts +41 -8
  18. package/dist/alert.js +168 -67
  19. package/dist/alert.js.map +1 -1
  20. package/dist/avatar.cjs +27 -1
  21. package/dist/avatar.cjs.map +1 -1
  22. package/dist/avatar.d.cts +19 -3
  23. package/dist/avatar.d.ts +19 -3
  24. package/dist/avatar.js +27 -1
  25. package/dist/avatar.js.map +1 -1
  26. package/dist/badge.cjs +83 -3
  27. package/dist/badge.cjs.map +1 -1
  28. package/dist/badge.d.cts +51 -3
  29. package/dist/badge.d.ts +51 -3
  30. package/dist/badge.js +83 -3
  31. package/dist/badge.js.map +1 -1
  32. package/dist/breadcrumb.cjs +464 -0
  33. package/dist/breadcrumb.cjs.map +1 -0
  34. package/dist/breadcrumb.d.cts +32 -0
  35. package/dist/breadcrumb.d.ts +32 -0
  36. package/dist/breadcrumb.js +461 -0
  37. package/dist/breadcrumb.js.map +1 -0
  38. package/dist/button.cjs +32 -2
  39. package/dist/button.cjs.map +1 -1
  40. package/dist/button.d.cts +19 -3
  41. package/dist/button.d.ts +19 -3
  42. package/dist/button.js +32 -2
  43. package/dist/button.js.map +1 -1
  44. package/dist/card-bleed.cjs +458 -0
  45. package/dist/card-bleed.cjs.map +1 -0
  46. package/dist/card-bleed.d.cts +37 -0
  47. package/dist/card-bleed.d.ts +37 -0
  48. package/dist/card-bleed.js +455 -0
  49. package/dist/card-bleed.js.map +1 -0
  50. package/dist/card.cjs +61 -1
  51. package/dist/card.cjs.map +1 -1
  52. package/dist/card.d.cts +33 -4
  53. package/dist/card.d.ts +33 -4
  54. package/dist/card.js +60 -2
  55. package/dist/card.js.map +1 -1
  56. package/dist/carousel.cjs +655 -0
  57. package/dist/carousel.cjs.map +1 -0
  58. package/dist/carousel.d.cts +79 -0
  59. package/dist/carousel.d.ts +79 -0
  60. package/dist/carousel.js +652 -0
  61. package/dist/carousel.js.map +1 -0
  62. package/dist/checkbox.cjs +3 -1
  63. package/dist/checkbox.cjs.map +1 -1
  64. package/dist/checkbox.js +3 -1
  65. package/dist/checkbox.js.map +1 -1
  66. package/dist/choice-card.cjs +524 -0
  67. package/dist/choice-card.cjs.map +1 -0
  68. package/dist/choice-card.d.cts +81 -0
  69. package/dist/choice-card.d.ts +81 -0
  70. package/dist/choice-card.js +521 -0
  71. package/dist/choice-card.js.map +1 -0
  72. package/dist/container.cjs +23 -6
  73. package/dist/container.cjs.map +1 -1
  74. package/dist/container.d.cts +9 -3
  75. package/dist/container.d.ts +9 -3
  76. package/dist/container.js +23 -7
  77. package/dist/container.js.map +1 -1
  78. package/dist/datepicker.cjs +580 -0
  79. package/dist/datepicker.cjs.map +1 -0
  80. package/dist/datepicker.d.cts +78 -0
  81. package/dist/datepicker.d.ts +78 -0
  82. package/dist/datepicker.js +577 -0
  83. package/dist/datepicker.js.map +1 -0
  84. package/dist/dom-CX9bgbcQ.d.cts +3 -0
  85. package/dist/dom-CX9bgbcQ.d.ts +3 -0
  86. package/dist/dropdown.cjs +66 -3
  87. package/dist/dropdown.cjs.map +1 -1
  88. package/dist/dropdown.d.cts +22 -2
  89. package/dist/dropdown.d.ts +22 -2
  90. package/dist/dropdown.js +67 -4
  91. package/dist/dropdown.js.map +1 -1
  92. package/dist/external-auth-button.cjs +494 -0
  93. package/dist/external-auth-button.cjs.map +1 -0
  94. package/dist/external-auth-button.d.cts +71 -0
  95. package/dist/external-auth-button.d.ts +71 -0
  96. package/dist/external-auth-button.js +491 -0
  97. package/dist/external-auth-button.js.map +1 -0
  98. package/dist/fieldset.cjs +3 -1
  99. package/dist/fieldset.cjs.map +1 -1
  100. package/dist/fieldset.js +3 -1
  101. package/dist/fieldset.js.map +1 -1
  102. package/dist/file-input.cjs +371 -0
  103. package/dist/file-input.cjs.map +1 -0
  104. package/dist/file-input.d.cts +96 -0
  105. package/dist/file-input.d.ts +96 -0
  106. package/dist/file-input.js +367 -0
  107. package/dist/file-input.js.map +1 -0
  108. package/dist/footer-chip.cjs +22 -2
  109. package/dist/footer-chip.cjs.map +1 -1
  110. package/dist/footer-chip.d.cts +12 -1
  111. package/dist/footer-chip.d.ts +12 -1
  112. package/dist/footer-chip.js +22 -2
  113. package/dist/footer-chip.js.map +1 -1
  114. package/dist/footer-link.cjs +19 -1
  115. package/dist/footer-link.cjs.map +1 -1
  116. package/dist/footer-link.d.cts +12 -1
  117. package/dist/footer-link.d.ts +12 -1
  118. package/dist/footer-link.js +19 -1
  119. package/dist/footer-link.js.map +1 -1
  120. package/dist/footer.cjs +62 -1
  121. package/dist/footer.cjs.map +1 -1
  122. package/dist/footer.d.cts +15 -0
  123. package/dist/footer.d.ts +15 -0
  124. package/dist/footer.js +63 -2
  125. package/dist/footer.js.map +1 -1
  126. package/dist/{form-TvtLcoW0.d.cts → form-CVO7mlDa.d.cts} +42 -9
  127. package/dist/{form-TvtLcoW0.d.ts → form-CVO7mlDa.d.ts} +42 -9
  128. package/dist/grid.cjs +35 -1
  129. package/dist/grid.cjs.map +1 -1
  130. package/dist/grid.d.cts +9 -3
  131. package/dist/grid.d.ts +9 -3
  132. package/dist/grid.js +35 -2
  133. package/dist/grid.js.map +1 -1
  134. package/dist/icon-box.cjs +27 -1
  135. package/dist/icon-box.cjs.map +1 -1
  136. package/dist/icon-box.d.cts +19 -3
  137. package/dist/icon-box.d.ts +19 -3
  138. package/dist/icon-box.js +27 -1
  139. package/dist/icon-box.js.map +1 -1
  140. package/dist/index.cjs +3849 -109
  141. package/dist/index.cjs.map +1 -1
  142. package/dist/index.d.cts +26 -1
  143. package/dist/index.d.ts +26 -1
  144. package/dist/index.js +3787 -112
  145. package/dist/index.js.map +1 -1
  146. package/dist/input-group.cjs +471 -0
  147. package/dist/input-group.cjs.map +1 -0
  148. package/dist/input-group.d.cts +31 -0
  149. package/dist/input-group.d.ts +31 -0
  150. package/dist/input-group.js +468 -0
  151. package/dist/input-group.js.map +1 -0
  152. package/dist/input.cjs +96 -4
  153. package/dist/input.cjs.map +1 -1
  154. package/dist/input.d.cts +45 -6
  155. package/dist/input.d.ts +45 -6
  156. package/dist/input.js +98 -6
  157. package/dist/input.js.map +1 -1
  158. package/dist/label.cjs +3 -1
  159. package/dist/label.cjs.map +1 -1
  160. package/dist/label.js +3 -1
  161. package/dist/label.js.map +1 -1
  162. package/dist/list-group-item.cjs +367 -0
  163. package/dist/list-group-item.cjs.map +1 -0
  164. package/dist/list-group-item.d.cts +73 -0
  165. package/dist/list-group-item.d.ts +73 -0
  166. package/dist/list-group-item.js +364 -0
  167. package/dist/list-group-item.js.map +1 -0
  168. package/dist/list-group.cjs +610 -0
  169. package/dist/list-group.cjs.map +1 -0
  170. package/dist/list-group.d.cts +58 -0
  171. package/dist/list-group.d.ts +58 -0
  172. package/dist/list-group.js +607 -0
  173. package/dist/list-group.js.map +1 -0
  174. package/dist/modal.cjs +70 -35
  175. package/dist/modal.cjs.map +1 -1
  176. package/dist/modal.d.cts +14 -2
  177. package/dist/modal.d.ts +14 -2
  178. package/dist/modal.js +70 -35
  179. package/dist/modal.js.map +1 -1
  180. package/dist/nav-item.cjs +107 -4
  181. package/dist/nav-item.cjs.map +1 -1
  182. package/dist/nav-item.d.cts +52 -2
  183. package/dist/nav-item.d.ts +52 -2
  184. package/dist/nav-item.js +108 -5
  185. package/dist/nav-item.js.map +1 -1
  186. package/dist/nav.cjs +57 -1
  187. package/dist/nav.cjs.map +1 -1
  188. package/dist/nav.d.cts +15 -1
  189. package/dist/nav.d.ts +15 -1
  190. package/dist/nav.js +58 -2
  191. package/dist/nav.js.map +1 -1
  192. package/dist/offcanvas.cjs +621 -0
  193. package/dist/offcanvas.cjs.map +1 -0
  194. package/dist/offcanvas.d.cts +61 -0
  195. package/dist/offcanvas.d.ts +61 -0
  196. package/dist/offcanvas.js +617 -0
  197. package/dist/offcanvas.js.map +1 -0
  198. package/dist/pagination.cjs +452 -0
  199. package/dist/pagination.cjs.map +1 -0
  200. package/dist/pagination.d.cts +69 -0
  201. package/dist/pagination.d.ts +69 -0
  202. package/dist/pagination.js +448 -0
  203. package/dist/pagination.js.map +1 -0
  204. package/dist/popover.cjs +534 -0
  205. package/dist/popover.cjs.map +1 -0
  206. package/dist/popover.d.cts +59 -0
  207. package/dist/popover.d.ts +59 -0
  208. package/dist/popover.js +530 -0
  209. package/dist/popover.js.map +1 -0
  210. package/dist/pricing-card.cjs +153 -64
  211. package/dist/pricing-card.cjs.map +1 -1
  212. package/dist/pricing-card.d.cts +34 -6
  213. package/dist/pricing-card.d.ts +34 -6
  214. package/dist/pricing-card.js +154 -65
  215. package/dist/pricing-card.js.map +1 -1
  216. package/dist/progress.cjs +403 -0
  217. package/dist/progress.cjs.map +1 -0
  218. package/dist/progress.d.cts +70 -0
  219. package/dist/progress.d.ts +70 -0
  220. package/dist/progress.js +398 -0
  221. package/dist/progress.js.map +1 -0
  222. package/dist/prose.cjs +425 -0
  223. package/dist/prose.cjs.map +1 -0
  224. package/dist/prose.d.cts +21 -0
  225. package/dist/prose.d.ts +21 -0
  226. package/dist/prose.js +422 -0
  227. package/dist/prose.js.map +1 -0
  228. package/dist/radio.cjs +3 -1
  229. package/dist/radio.cjs.map +1 -1
  230. package/dist/radio.js +3 -1
  231. package/dist/radio.js.map +1 -1
  232. package/dist/range.cjs +381 -0
  233. package/dist/range.cjs.map +1 -0
  234. package/dist/range.d.cts +76 -0
  235. package/dist/range.d.ts +76 -0
  236. package/dist/range.js +378 -0
  237. package/dist/range.js.map +1 -0
  238. package/dist/rating.cjs +33 -0
  239. package/dist/rating.cjs.map +1 -1
  240. package/dist/rating.d.cts +38 -3
  241. package/dist/rating.d.ts +38 -3
  242. package/dist/rating.js +33 -0
  243. package/dist/rating.js.map +1 -1
  244. package/dist/section.cjs +27 -3
  245. package/dist/section.cjs.map +1 -1
  246. package/dist/section.d.cts +16 -1
  247. package/dist/section.d.ts +16 -1
  248. package/dist/section.js +27 -4
  249. package/dist/section.js.map +1 -1
  250. package/dist/select.cjs +6 -1
  251. package/dist/select.cjs.map +1 -1
  252. package/dist/select.d.cts +7 -1
  253. package/dist/select.d.ts +7 -1
  254. package/dist/select.js +6 -1
  255. package/dist/select.js.map +1 -1
  256. package/dist/sidebar-link.cjs +19 -1
  257. package/dist/sidebar-link.cjs.map +1 -1
  258. package/dist/sidebar-link.d.cts +13 -2
  259. package/dist/sidebar-link.d.ts +13 -2
  260. package/dist/sidebar-link.js +19 -1
  261. package/dist/sidebar-link.js.map +1 -1
  262. package/dist/sidebar-toggle.cjs +3 -1
  263. package/dist/sidebar-toggle.cjs.map +1 -1
  264. package/dist/sidebar-toggle.js +3 -1
  265. package/dist/sidebar-toggle.js.map +1 -1
  266. package/dist/sidebar.cjs +33 -1
  267. package/dist/sidebar.cjs.map +1 -1
  268. package/dist/sidebar.d.cts +1 -0
  269. package/dist/sidebar.d.ts +1 -0
  270. package/dist/sidebar.js +34 -2
  271. package/dist/sidebar.js.map +1 -1
  272. package/dist/spinner.cjs +2 -1
  273. package/dist/spinner.cjs.map +1 -1
  274. package/dist/spinner.d.cts +2 -2
  275. package/dist/spinner.d.ts +2 -2
  276. package/dist/spinner.js +2 -1
  277. package/dist/spinner.js.map +1 -1
  278. package/dist/stack.cjs +4 -2
  279. package/dist/stack.cjs.map +1 -1
  280. package/dist/stack.d.cts +2 -2
  281. package/dist/stack.d.ts +2 -2
  282. package/dist/stack.js +4 -2
  283. package/dist/stack.js.map +1 -1
  284. package/dist/states-Bgzwu_XZ.d.cts +9 -0
  285. package/dist/states-Bgzwu_XZ.d.ts +9 -0
  286. package/dist/stepper.cjs +495 -0
  287. package/dist/stepper.cjs.map +1 -0
  288. package/dist/stepper.d.cts +40 -0
  289. package/dist/stepper.d.ts +40 -0
  290. package/dist/stepper.js +491 -0
  291. package/dist/stepper.js.map +1 -0
  292. package/dist/switch.cjs +492 -0
  293. package/dist/switch.cjs.map +1 -0
  294. package/dist/switch.d.cts +82 -0
  295. package/dist/switch.d.ts +82 -0
  296. package/dist/switch.js +488 -0
  297. package/dist/switch.js.map +1 -0
  298. package/dist/tab-panel.cjs +465 -0
  299. package/dist/tab-panel.cjs.map +1 -0
  300. package/dist/tab-panel.d.cts +48 -0
  301. package/dist/tab-panel.d.ts +48 -0
  302. package/dist/tab-panel.js +462 -0
  303. package/dist/tab-panel.js.map +1 -0
  304. package/dist/table.cjs +506 -0
  305. package/dist/table.cjs.map +1 -0
  306. package/dist/table.d.cts +54 -0
  307. package/dist/table.d.ts +54 -0
  308. package/dist/table.js +501 -0
  309. package/dist/table.js.map +1 -0
  310. package/dist/tabs.cjs +596 -0
  311. package/dist/tabs.cjs.map +1 -0
  312. package/dist/tabs.d.cts +65 -0
  313. package/dist/tabs.d.ts +65 -0
  314. package/dist/tabs.js +592 -0
  315. package/dist/tabs.js.map +1 -0
  316. package/dist/tag.cjs +27 -1
  317. package/dist/tag.cjs.map +1 -1
  318. package/dist/tag.d.cts +19 -3
  319. package/dist/tag.d.ts +19 -3
  320. package/dist/tag.js +27 -1
  321. package/dist/tag.js.map +1 -1
  322. package/dist/testimonial.cjs +162 -64
  323. package/dist/testimonial.cjs.map +1 -1
  324. package/dist/testimonial.d.cts +36 -8
  325. package/dist/testimonial.d.ts +36 -8
  326. package/dist/testimonial.js +163 -65
  327. package/dist/testimonial.js.map +1 -1
  328. package/dist/text.cjs +65 -6
  329. package/dist/text.cjs.map +1 -1
  330. package/dist/text.d.cts +24 -3
  331. package/dist/text.d.ts +24 -3
  332. package/dist/text.js +64 -8
  333. package/dist/text.js.map +1 -1
  334. package/dist/textarea.cjs +3 -0
  335. package/dist/textarea.cjs.map +1 -1
  336. package/dist/textarea.d.cts +7 -1
  337. package/dist/textarea.d.ts +7 -1
  338. package/dist/textarea.js +3 -0
  339. package/dist/textarea.js.map +1 -1
  340. package/dist/toast.cjs +34 -1
  341. package/dist/toast.cjs.map +1 -1
  342. package/dist/toast.d.cts +15 -2
  343. package/dist/toast.d.ts +15 -2
  344. package/dist/toast.js +34 -1
  345. package/dist/toast.js.map +1 -1
  346. package/dist/tooltip.cjs +32 -0
  347. package/dist/tooltip.cjs.map +1 -1
  348. package/dist/tooltip.d.cts +15 -2
  349. package/dist/tooltip.d.ts +15 -2
  350. package/dist/tooltip.js +32 -0
  351. package/dist/tooltip.js.map +1 -1
  352. package/package.json +130 -15
package/dist/modal.d.ts CHANGED
@@ -1,9 +1,12 @@
1
1
  import * as lit_html from 'lit-html';
2
2
  import { S as SpectreProjectableElement } from './projectable-D9YCo9NY.js';
3
+ import { h as SpectreAccentEdge, g as SpectreAccentColor } from './form-CVO7mlDa.js';
3
4
  import './base-D0s95V2v.js';
4
5
  import 'lit';
5
6
 
6
7
  interface SpectreModalProps {
8
+ accent?: SpectreAccentEdge | undefined;
9
+ accentColor?: SpectreAccentColor | undefined;
7
10
  ariaLabel?: string | null;
8
11
  ariaLabelledBy?: string | null;
9
12
  ariaDescribedBy?: string | null;
@@ -14,6 +17,15 @@ interface SpectreModalProps {
14
17
  }
15
18
  declare class SpectreModalElement extends SpectreProjectableElement implements SpectreModalProps {
16
19
  static properties: {
20
+ accent: {
21
+ type: StringConstructor;
22
+ reflect: boolean;
23
+ };
24
+ accentColor: {
25
+ attribute: string;
26
+ type: StringConstructor;
27
+ reflect: boolean;
28
+ };
17
29
  fullWidth: {
18
30
  attribute: string;
19
31
  type: BooleanConstructor;
@@ -24,6 +36,8 @@ declare class SpectreModalElement extends SpectreProjectableElement implements S
24
36
  reflect: boolean;
25
37
  };
26
38
  };
39
+ accent: SpectreAccentEdge | undefined;
40
+ accentColor: SpectreAccentColor | undefined;
27
41
  fullWidth: boolean | undefined;
28
42
  open: boolean | undefined;
29
43
  private previouslyFocusedElement;
@@ -38,10 +52,8 @@ declare class SpectreModalElement extends SpectreProjectableElement implements S
38
52
  connectedCallback(): void;
39
53
  disconnectedCallback(): void;
40
54
  private get modalElement();
41
- private get focusableElements();
42
55
  private focusFirstElement;
43
56
  private handleDocumentKeydown;
44
- private trapFocus;
45
57
  private close;
46
58
  private get overlayClasses();
47
59
  private get modalClasses();
package/dist/modal.js CHANGED
@@ -3,6 +3,39 @@ import { ifDefined } from 'lit/directives/if-defined.js';
3
3
  import { getModalOverlayClasses, getModalClasses } from '@phcdevworks/spectre-ui';
4
4
 
5
5
  // src/components/modal/sp-modal.ts
6
+
7
+ // src/utils/focus.ts
8
+ var FOCUSABLE_SELECTOR = [
9
+ "a[href]",
10
+ "button:not([disabled])",
11
+ "input:not([disabled])",
12
+ "select:not([disabled])",
13
+ "textarea:not([disabled])",
14
+ '[tabindex]:not([tabindex="-1"])'
15
+ ].join(",");
16
+ function getFocusableElements(root) {
17
+ if (!root) {
18
+ return [];
19
+ }
20
+ return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
21
+ }
22
+ function trapFocus(event, root) {
23
+ const focusable = getFocusableElements(root);
24
+ if (focusable.length === 0) {
25
+ event.preventDefault();
26
+ return;
27
+ }
28
+ const first = focusable[0];
29
+ const last = focusable[focusable.length - 1];
30
+ const active = document.activeElement;
31
+ if (event.shiftKey && active === first) {
32
+ event.preventDefault();
33
+ last?.focus();
34
+ } else if (!event.shiftKey && active === last) {
35
+ event.preventDefault();
36
+ first?.focus();
37
+ }
38
+ }
6
39
  var SpectreBaseElement = class extends LitElement {
7
40
  constructor() {
8
41
  super(...arguments);
@@ -313,7 +346,9 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
313
346
  nextProjectedContent.push(node);
314
347
  }
315
348
  });
316
- const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);
349
+ const hasChanged = nextProjectedContent.length !== this.projectedContent.length || nextProjectedContent.some(
350
+ (node, index) => node !== this.projectedContent[index]
351
+ );
317
352
  if (hasChanged) {
318
353
  this.projectedContent = nextProjectedContent;
319
354
  }
@@ -343,17 +378,27 @@ var SpectreProjectableElement = class extends SpectreBaseElement {
343
378
  this.contentObserver = void 0;
344
379
  }
345
380
  };
346
- var FOCUSABLE_SELECTOR = [
347
- "a[href]",
348
- "button:not([disabled])",
349
- "input:not([disabled])",
350
- "select:not([disabled])",
351
- "textarea:not([disabled])",
352
- '[tabindex]:not([tabindex="-1"])'
353
- ].join(",");
381
+ var spectreAccentEdges = ["top", "right", "bottom", "left"];
382
+ function isAccentEdge(value) {
383
+ return spectreAccentEdges.includes(value);
384
+ }
385
+ var spectreAccentColors = [
386
+ "neutral",
387
+ "brand",
388
+ "info",
389
+ "success",
390
+ "warning",
391
+ "danger",
392
+ "cta"
393
+ ];
394
+ function isAccentColor(value) {
395
+ return spectreAccentColors.includes(value);
396
+ }
354
397
  var SpectreModalElement = class extends SpectreProjectableElement {
355
398
  constructor() {
356
399
  super(...arguments);
400
+ this.accent = void 0;
401
+ this.accentColor = void 0;
357
402
  this.fullWidth = false;
358
403
  this.open = false;
359
404
  this.previouslyFocusedElement = null;
@@ -366,7 +411,7 @@ var SpectreModalElement = class extends SpectreProjectableElement {
366
411
  return;
367
412
  }
368
413
  if (event.key === "Tab") {
369
- this.trapFocus(event);
414
+ trapFocus(event, this.modalElement);
370
415
  }
371
416
  };
372
417
  }
@@ -393,6 +438,12 @@ var SpectreModalElement = class extends SpectreProjectableElement {
393
438
  return el.hasAttribute("data-sp-modal-native") || el.hasAttribute("data-sp-modal-overlay");
394
439
  }
395
440
  willUpdate(changedProperties) {
441
+ if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
442
+ this.accent = void 0;
443
+ }
444
+ if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
445
+ this.accentColor = void 0;
446
+ }
396
447
  if (changedProperties.has("fullWidth") && this.fullWidth == null) {
397
448
  this.fullWidth = false;
398
449
  }
@@ -424,34 +475,10 @@ var SpectreModalElement = class extends SpectreProjectableElement {
424
475
  get modalElement() {
425
476
  return this.querySelector("[data-sp-modal-native]");
426
477
  }
427
- get focusableElements() {
428
- const modal = this.modalElement;
429
- if (!modal) {
430
- return [];
431
- }
432
- return Array.from(modal.querySelectorAll(FOCUSABLE_SELECTOR));
433
- }
434
478
  focusFirstElement() {
435
- const [first] = this.focusableElements;
479
+ const [first] = getFocusableElements(this.modalElement);
436
480
  (first ?? this.modalElement)?.focus();
437
481
  }
438
- trapFocus(event) {
439
- const focusable = this.focusableElements;
440
- if (focusable.length === 0) {
441
- event.preventDefault();
442
- return;
443
- }
444
- const first = focusable[0];
445
- const last = focusable[focusable.length - 1];
446
- const active = document.activeElement;
447
- if (event.shiftKey && active === first) {
448
- event.preventDefault();
449
- last?.focus();
450
- } else if (!event.shiftKey && active === last) {
451
- event.preventDefault();
452
- first?.focus();
453
- }
454
- }
455
482
  close() {
456
483
  if (!this.open) {
457
484
  return;
@@ -464,6 +491,12 @@ var SpectreModalElement = class extends SpectreProjectableElement {
464
491
  }
465
492
  get modalClasses() {
466
493
  return getModalClasses({
494
+ ...this.accent !== void 0 && {
495
+ accent: this.accent
496
+ },
497
+ ...this.accentColor !== void 0 && {
498
+ accentColor: this.accentColor
499
+ },
467
500
  open: this.open ?? false,
468
501
  fullWidth: this.fullWidth ?? false
469
502
  });
@@ -499,6 +532,8 @@ var SpectreModalElement = class extends SpectreProjectableElement {
499
532
  }
500
533
  };
501
534
  SpectreModalElement.properties = {
535
+ accent: { type: String, reflect: true },
536
+ accentColor: { attribute: "accent-color", type: String, reflect: true },
502
537
  fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
503
538
  open: { type: Boolean, reflect: true }
504
539
  };
package/dist/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/utils/base.ts","../src/utils/dom.ts","../src/utils/projectable.ts","../src/components/modal/sp-modal.ts"],"names":[],"mappings":"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","file":"modal.js","sourcesContent":["import { LitElement, type PropertyDeclarations } from 'lit'\n\nexport class SpectreBaseElement extends LitElement {\n static properties: PropertyDeclarations = {}\n\n private _ariaLabel: string | null = null\n private _ariaLabelledBy: string | null = null\n private _ariaDescribedBy: string | null = null\n private _autocapitalize = ''\n private _autofocus = false\n private _spellcheck: boolean | null = null\n private _title = ''\n private _id = ''\n\n get ariaLabel(): string | null {\n return this._ariaLabel\n }\n\n set ariaLabel(value: string | null) {\n if (this._ariaLabel === value) {\n return\n }\n this._ariaLabel = value\n this._removeHostAttribute('aria-label')\n this.requestUpdate()\n }\n\n get ariaLabelledBy(): string | null {\n return this._ariaLabelledBy\n }\n\n set ariaLabelledBy(value: string | null) {\n if (this._ariaLabelledBy === value) {\n return\n }\n this._ariaLabelledBy = value\n this._removeHostAttribute('aria-labelledby')\n this.requestUpdate()\n }\n\n get ariaDescribedBy(): string | null {\n return this._ariaDescribedBy\n }\n\n set ariaDescribedBy(value: string | null) {\n if (this._ariaDescribedBy === value) {\n return\n }\n this._ariaDescribedBy = value\n this._removeHostAttribute('aria-describedby')\n this.requestUpdate()\n }\n\n override get autocapitalize(): string {\n return this._autocapitalize\n }\n\n override set autocapitalize(value: string | undefined | null) {\n const normalizedValue = value ?? ''\n if (this._autocapitalize === normalizedValue) {\n return\n }\n this._autocapitalize = normalizedValue\n this._removeHostAttribute('autocapitalize')\n this.requestUpdate()\n }\n\n override get spellcheck(): boolean {\n return this._spellcheck ?? super.spellcheck\n }\n\n override set spellcheck(value: boolean | undefined | null) {\n if (this._spellcheck === value) {\n return\n }\n this._spellcheck = value ?? null\n this._removeHostAttribute('spellcheck')\n this.requestUpdate()\n }\n\n override get title(): string {\n return this._title\n }\n\n override set title(value: string | undefined | null) {\n const normalizedValue = value ?? ''\n if (this._title === normalizedValue) {\n return\n }\n this._title = normalizedValue\n this._removeHostAttribute('title')\n this.requestUpdate()\n }\n\n override get id(): string {\n return this._id\n }\n\n override set id(value: string | undefined | null) {\n const normalizedValue = value ?? ''\n if (this._id === normalizedValue) {\n return\n }\n this._id = normalizedValue\n this._removeHostAttribute('id')\n this.requestUpdate()\n }\n\n override get autofocus(): boolean {\n return this._autofocus\n }\n\n override set autofocus(value: boolean | undefined | null) {\n const normalizedValue = !!value\n if (this._autofocus === normalizedValue) {\n return\n }\n this._autofocus = normalizedValue\n this._removeHostAttribute('autofocus')\n this.requestUpdate()\n }\n\n // Spectre components intentionally render in light DOM so the global\n // `@phcdevworks/spectre-ui` styling contract can apply directly.\n createRenderRoot(): this {\n return this\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n\n const proxiedAttributes = [\n 'id',\n 'title',\n 'autocapitalize',\n 'autofocus',\n 'spellcheck',\n 'aria-label',\n 'aria-labelledby',\n 'aria-describedby'\n ]\n\n proxiedAttributes.forEach((attr) => {\n const value = super.getAttribute(attr)\n if (value !== null) {\n this.setAttribute(attr, value)\n }\n })\n }\n\n override getAttribute(qualifiedName: string): string | null {\n switch (qualifiedName) {\n case 'id':\n return this.id || null\n case 'title':\n return this.title || null\n case 'autocapitalize':\n return this.autocapitalize || null\n case 'autofocus':\n return this.autofocus ? '' : null\n case 'spellcheck':\n return this._spellcheck !== null ? String(this._spellcheck) : null\n case 'aria-label':\n return this.ariaLabel\n case 'aria-labelledby':\n return this.ariaLabelledBy\n case 'aria-describedby':\n return this.ariaDescribedBy\n default:\n return super.getAttribute(qualifiedName)\n }\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n switch (qualifiedName) {\n case 'id':\n return this.id !== ''\n case 'title':\n return this.title !== ''\n case 'autocapitalize':\n return this.autocapitalize !== ''\n case 'autofocus':\n return this.autofocus\n case 'spellcheck':\n return this._spellcheck !== null\n case 'aria-label':\n return this.ariaLabel !== null\n case 'aria-labelledby':\n return this.ariaLabelledBy !== null\n case 'aria-describedby':\n return this.ariaDescribedBy !== null\n default:\n return super.hasAttribute(qualifiedName)\n }\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n switch (qualifiedName) {\n case 'id':\n this.id = value\n break\n case 'title':\n this.title = value\n break\n case 'autocapitalize':\n this.autocapitalize = value\n break\n case 'autofocus':\n this.autofocus = true\n break\n case 'spellcheck':\n this.spellcheck = value !== 'false'\n break\n case 'aria-label':\n this.ariaLabel = value\n break\n case 'aria-labelledby':\n this.ariaLabelledBy = value\n break\n case 'aria-describedby':\n this.ariaDescribedBy = value\n break\n default:\n super.setAttribute(qualifiedName, value)\n }\n }\n\n override removeAttribute(qualifiedName: string): void {\n switch (qualifiedName) {\n case 'id':\n this.id = ''\n break\n case 'title':\n this.title = ''\n break\n case 'autocapitalize':\n this.autocapitalize = ''\n break\n case 'autofocus':\n this.autofocus = false\n break\n case 'spellcheck':\n this.spellcheck = null\n break\n case 'aria-label':\n this.ariaLabel = null\n break\n case 'aria-labelledby':\n this.ariaLabelledBy = null\n break\n case 'aria-describedby':\n this.ariaDescribedBy = null\n break\n default:\n super.removeAttribute(qualifiedName)\n }\n }\n\n private _removeHostAttribute(name: string): void {\n const host = this as unknown as HTMLElement\n if (HTMLElement.prototype.hasAttribute.call(host, name)) {\n // Use the native removeAttribute to avoid our own overridden version\n // which would reset the internal state.\n HTMLElement.prototype.removeAttribute.call(host, name)\n }\n }\n\n protected get forwardedAriaLabel(): string | undefined {\n const value = this.ariaLabel?.trim()\n return value ? value : undefined\n }\n\n protected get forwardedAriaLabelledBy(): string | undefined {\n const value = this.ariaLabelledBy?.trim()\n return value ? value : undefined\n }\n\n protected get forwardedAriaDescribedBy(): string | undefined {\n const value = this.ariaDescribedBy?.trim()\n return value ? value : undefined\n }\n\n // Subclasses that expose `disabled`/`loading` properties get this disabled\n // calculation for free instead of redeclaring it per component.\n protected get isDisabled(): boolean {\n const self = this as unknown as { disabled?: boolean; loading?: boolean }\n return (self.disabled ?? false) || (self.loading ?? false)\n }\n\n // Subclasses get this for free instead of redeclaring it per component.\n protected get hasForwardedLabel(): boolean {\n return Boolean(this.forwardedAriaLabel || this.forwardedAriaLabelledBy)\n }\n}\n","export function hasMeaningfulContent(nodes: readonly Node[]): boolean {\n return nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n return true;\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent?.trim().length ?? 0) > 0;\n }\n\n return false;\n });\n}\n","import { SpectreBaseElement } from './base';\nimport { hasMeaningfulContent } from './dom';\n\nexport abstract class SpectreProjectableElement extends SpectreBaseElement {\n protected projectedContent: Node[] = [];\n private contentObserver?: MutationObserver | undefined;\n\n // Return the native container whose existing children are also treated as\n // projected content sources (e.g. the rendered <button>, <select>, <label>).\n protected abstract getContentContainer(): Element | null;\n\n // Return true if the node was rendered by this component and should not be\n // treated as external projected content.\n protected abstract isInternalNode(node: Node): boolean;\n\n protected get hasProjectedContent(): boolean {\n return hasMeaningfulContent(this.projectedContent);\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.syncProjectedContent();\n this.startContentObserver();\n }\n\n override disconnectedCallback(): void {\n this.stopContentObserver();\n super.disconnectedCallback();\n }\n\n protected override update(changedProperties: Map<PropertyKey, unknown>): void {\n this.stopContentObserver();\n super.update(changedProperties);\n this.startContentObserver();\n }\n\n protected syncProjectedContent(): boolean {\n const nextProjectedContent: Node[] = [];\n const sourceNodes = [\n ...this.childNodes,\n ...(this.getContentContainer()?.childNodes ?? []),\n ];\n\n sourceNodes.forEach((node) => {\n if (!this.isInternalNode(node) && !nextProjectedContent.includes(node)) {\n nextProjectedContent.push(node);\n }\n });\n\n const hasChanged =\n nextProjectedContent.length !== this.projectedContent.length ||\n nextProjectedContent.some((node, index) => node !== this.projectedContent[index]);\n\n if (hasChanged) {\n this.projectedContent = nextProjectedContent;\n }\n\n return hasChanged;\n }\n\n private startContentObserver(): void {\n if (this.contentObserver) {\n return;\n }\n\n this.contentObserver = new MutationObserver((mutations) => {\n const isInternalMovement = mutations.every((mutation) =>\n [...mutation.removedNodes].every(\n (node) => this.isInternalNode(node) || this.contains(node),\n ) &&\n [...mutation.addedNodes].every((node) => this.isInternalNode(node)),\n );\n\n if (isInternalMovement) {\n return;\n }\n\n if (this.syncProjectedContent()) {\n this.requestUpdate();\n }\n });\n\n this.contentObserver.observe(this, { childList: true });\n }\n\n private stopContentObserver(): void {\n this.contentObserver?.disconnect();\n this.contentObserver = undefined;\n }\n}\n","import { html, nothing } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { SpectreProjectableElement } from '../../utils/projectable'\n\nimport {\n getModalClasses,\n getModalOverlayClasses\n} from '@phcdevworks/spectre-ui'\n\nconst FOCUSABLE_SELECTOR = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])'\n].join(',')\n\nexport interface SpectreModalProps {\n ariaLabel?: string | null\n ariaLabelledBy?: string | null\n ariaDescribedBy?: string | null\n fullWidth?: boolean | undefined\n id?: string | null | undefined\n open?: boolean | undefined\n title?: string | null | undefined\n}\n\nexport class SpectreModalElement\n extends SpectreProjectableElement\n implements SpectreModalProps\n{\n static properties = {\n fullWidth: { attribute: 'full-width', type: Boolean, reflect: true },\n open: { type: Boolean, reflect: true }\n }\n\n fullWidth: boolean | undefined = false\n open: boolean | undefined = false\n\n private previouslyFocusedElement: HTMLElement | null = null\n\n override get id(): string {\n return super.id\n }\n\n override set id(value: string | null | undefined) {\n super.id = value\n }\n\n override get title(): string {\n return super.title\n }\n\n override set title(value: string | null | undefined) {\n super.title = value\n }\n\n protected override getContentContainer(): Element | null {\n return this.querySelector('[data-sp-modal-native]')\n }\n\n protected override isInternalNode(node: Node): boolean {\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return false\n }\n const el = node as Element\n return (\n el.hasAttribute('data-sp-modal-native') ||\n el.hasAttribute('data-sp-modal-overlay')\n )\n }\n\n protected override willUpdate(\n changedProperties: Map<PropertyKey, unknown>\n ): void {\n if (changedProperties.has('fullWidth') && this.fullWidth == null) {\n this.fullWidth = false\n }\n if (changedProperties.has('open') && this.open == null) {\n this.open = false\n }\n }\n\n protected override updated(\n changedProperties: Map<PropertyKey, unknown>\n ): void {\n super.updated(changedProperties)\n\n if (!changedProperties.has('open')) {\n return\n }\n\n if (this.open) {\n this.previouslyFocusedElement = document.activeElement as HTMLElement\n this.focusFirstElement()\n } else if (this.previouslyFocusedElement) {\n this.previouslyFocusedElement.focus()\n this.previouslyFocusedElement = null\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n document.addEventListener('keydown', this.handleDocumentKeydown)\n }\n\n override disconnectedCallback(): void {\n document.removeEventListener('keydown', this.handleDocumentKeydown)\n super.disconnectedCallback()\n }\n\n private get modalElement(): HTMLElement | null {\n return this.querySelector('[data-sp-modal-native]')\n }\n\n private get focusableElements(): HTMLElement[] {\n const modal = this.modalElement\n if (!modal) {\n return []\n }\n return Array.from(modal.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n }\n\n private focusFirstElement(): void {\n const [first] = this.focusableElements\n ;(first ?? this.modalElement)?.focus()\n }\n\n private handleDocumentKeydown = (event: KeyboardEvent): void => {\n if (!this.open) {\n return\n }\n\n if (event.key === 'Escape') {\n this.close()\n return\n }\n\n if (event.key === 'Tab') {\n this.trapFocus(event)\n }\n }\n\n private trapFocus(event: KeyboardEvent): void {\n const focusable = this.focusableElements\n if (focusable.length === 0) {\n event.preventDefault()\n return\n }\n\n const first = focusable[0]\n const last = focusable[focusable.length - 1]\n const active = document.activeElement\n\n if (event.shiftKey && active === first) {\n event.preventDefault()\n last?.focus()\n } else if (!event.shiftKey && active === last) {\n event.preventDefault()\n first?.focus()\n }\n }\n\n private close(): void {\n if (!this.open) {\n return\n }\n this.open = false\n this.dispatchEvent(new CustomEvent('sp-close', { bubbles: true }))\n }\n\n private get overlayClasses(): string {\n return getModalOverlayClasses({ open: this.open ?? false })\n }\n\n private get modalClasses(): string {\n return getModalClasses({\n open: this.open ?? false,\n fullWidth: this.fullWidth ?? false\n })\n }\n\n override render() {\n const isHidden = !this.open\n\n return html`<div\n aria-hidden=\"${ifDefined(isHidden ? 'true' : undefined)}\"\n class=\"${this.overlayClasses}\"\n data-sp-modal-overlay\n @click=\"${(event: Event) => {\n if (event.target === event.currentTarget) {\n this.close()\n }\n }}\"\n >\n <div\n aria-describedby=\"${ifDefined(this.forwardedAriaDescribedBy)}\"\n aria-hidden=\"${ifDefined(isHidden ? 'true' : undefined)}\"\n aria-label=\"${ifDefined(this.forwardedAriaLabel)}\"\n aria-labelledby=\"${ifDefined(this.forwardedAriaLabelledBy)}\"\n aria-modal=\"true\"\n class=\"${this.modalClasses}\"\n data-sp-modal-native\n id=\"${ifDefined(this.id || undefined)}\"\n role=\"dialog\"\n tabindex=\"-1\"\n title=\"${ifDefined(this.title || undefined)}\"\n >\n ${this.hasProjectedContent ? this.projectedContent : nothing}\n </div>\n </div>`\n }\n}\n\nexport function defineSpectreModal(\n tagName = 'sp-modal'\n): typeof SpectreModalElement {\n const existingElement = customElements.get(tagName)\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreModalElement\n }\n\n customElements.define(tagName, SpectreModalElement)\n return SpectreModalElement\n}\n"]}
1
+ {"version":3,"sources":["../src/utils/focus.ts","../src/utils/base.ts","../src/utils/dom.ts","../src/utils/projectable.ts","../src/utils/form.ts","../src/components/modal/sp-modal.ts"],"names":[],"mappings":"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","file":"modal.js","sourcesContent":["const FOCUSABLE_SELECTOR = [\n 'a[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])'\n].join(',')\n\nexport function getFocusableElements(root: Element | null): HTMLElement[] {\n if (!root) {\n return []\n }\n return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n}\n\n// Keeps Tab/Shift+Tab cycling inside `root` while a dialog surface is open.\nexport function trapFocus(event: KeyboardEvent, root: Element | null): void {\n const focusable = getFocusableElements(root)\n if (focusable.length === 0) {\n event.preventDefault()\n return\n }\n\n const first = focusable[0]\n const last = focusable[focusable.length - 1]\n const active = document.activeElement\n\n if (event.shiftKey && active === first) {\n event.preventDefault()\n last?.focus()\n } else if (!event.shiftKey && active === last) {\n event.preventDefault()\n first?.focus()\n }\n}\n","import { LitElement, type PropertyDeclarations } from 'lit'\n\nexport class SpectreBaseElement extends LitElement {\n static properties: PropertyDeclarations = {}\n\n private _ariaLabel: string | null = null\n private _ariaLabelledBy: string | null = null\n private _ariaDescribedBy: string | null = null\n private _autocapitalize = ''\n private _autofocus = false\n private _spellcheck: boolean | null = null\n private _title = ''\n private _id = ''\n\n get ariaLabel(): string | null {\n return this._ariaLabel\n }\n\n set ariaLabel(value: string | null) {\n if (this._ariaLabel === value) {\n return\n }\n this._ariaLabel = value\n this._removeHostAttribute('aria-label')\n this.requestUpdate()\n }\n\n get ariaLabelledBy(): string | null {\n return this._ariaLabelledBy\n }\n\n set ariaLabelledBy(value: string | null) {\n if (this._ariaLabelledBy === value) {\n return\n }\n this._ariaLabelledBy = value\n this._removeHostAttribute('aria-labelledby')\n this.requestUpdate()\n }\n\n get ariaDescribedBy(): string | null {\n return this._ariaDescribedBy\n }\n\n set ariaDescribedBy(value: string | null) {\n if (this._ariaDescribedBy === value) {\n return\n }\n this._ariaDescribedBy = value\n this._removeHostAttribute('aria-describedby')\n this.requestUpdate()\n }\n\n override get autocapitalize(): string {\n return this._autocapitalize\n }\n\n override set autocapitalize(value: string | undefined | null) {\n const normalizedValue = value ?? ''\n if (this._autocapitalize === normalizedValue) {\n return\n }\n this._autocapitalize = normalizedValue\n this._removeHostAttribute('autocapitalize')\n this.requestUpdate()\n }\n\n override get spellcheck(): boolean {\n return this._spellcheck ?? super.spellcheck\n }\n\n override set spellcheck(value: boolean | undefined | null) {\n if (this._spellcheck === value) {\n return\n }\n this._spellcheck = value ?? null\n this._removeHostAttribute('spellcheck')\n this.requestUpdate()\n }\n\n override get title(): string {\n return this._title\n }\n\n override set title(value: string | undefined | null) {\n const normalizedValue = value ?? ''\n if (this._title === normalizedValue) {\n return\n }\n this._title = normalizedValue\n this._removeHostAttribute('title')\n this.requestUpdate()\n }\n\n override get id(): string {\n return this._id\n }\n\n override set id(value: string | undefined | null) {\n const normalizedValue = value ?? ''\n if (this._id === normalizedValue) {\n return\n }\n this._id = normalizedValue\n this._removeHostAttribute('id')\n this.requestUpdate()\n }\n\n override get autofocus(): boolean {\n return this._autofocus\n }\n\n override set autofocus(value: boolean | undefined | null) {\n const normalizedValue = !!value\n if (this._autofocus === normalizedValue) {\n return\n }\n this._autofocus = normalizedValue\n this._removeHostAttribute('autofocus')\n this.requestUpdate()\n }\n\n // Spectre components intentionally render in light DOM so the global\n // `@phcdevworks/spectre-ui` styling contract can apply directly.\n createRenderRoot(): this {\n return this\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n\n const proxiedAttributes = [\n 'id',\n 'title',\n 'autocapitalize',\n 'autofocus',\n 'spellcheck',\n 'aria-label',\n 'aria-labelledby',\n 'aria-describedby'\n ]\n\n proxiedAttributes.forEach((attr) => {\n const value = super.getAttribute(attr)\n if (value !== null) {\n this.setAttribute(attr, value)\n }\n })\n }\n\n override getAttribute(qualifiedName: string): string | null {\n switch (qualifiedName) {\n case 'id':\n return this.id || null\n case 'title':\n return this.title || null\n case 'autocapitalize':\n return this.autocapitalize || null\n case 'autofocus':\n return this.autofocus ? '' : null\n case 'spellcheck':\n return this._spellcheck !== null ? String(this._spellcheck) : null\n case 'aria-label':\n return this.ariaLabel\n case 'aria-labelledby':\n return this.ariaLabelledBy\n case 'aria-describedby':\n return this.ariaDescribedBy\n default:\n return super.getAttribute(qualifiedName)\n }\n }\n\n override hasAttribute(qualifiedName: string): boolean {\n switch (qualifiedName) {\n case 'id':\n return this.id !== ''\n case 'title':\n return this.title !== ''\n case 'autocapitalize':\n return this.autocapitalize !== ''\n case 'autofocus':\n return this.autofocus\n case 'spellcheck':\n return this._spellcheck !== null\n case 'aria-label':\n return this.ariaLabel !== null\n case 'aria-labelledby':\n return this.ariaLabelledBy !== null\n case 'aria-describedby':\n return this.ariaDescribedBy !== null\n default:\n return super.hasAttribute(qualifiedName)\n }\n }\n\n override setAttribute(qualifiedName: string, value: string): void {\n switch (qualifiedName) {\n case 'id':\n this.id = value\n break\n case 'title':\n this.title = value\n break\n case 'autocapitalize':\n this.autocapitalize = value\n break\n case 'autofocus':\n this.autofocus = true\n break\n case 'spellcheck':\n this.spellcheck = value !== 'false'\n break\n case 'aria-label':\n this.ariaLabel = value\n break\n case 'aria-labelledby':\n this.ariaLabelledBy = value\n break\n case 'aria-describedby':\n this.ariaDescribedBy = value\n break\n default:\n super.setAttribute(qualifiedName, value)\n }\n }\n\n override removeAttribute(qualifiedName: string): void {\n switch (qualifiedName) {\n case 'id':\n this.id = ''\n break\n case 'title':\n this.title = ''\n break\n case 'autocapitalize':\n this.autocapitalize = ''\n break\n case 'autofocus':\n this.autofocus = false\n break\n case 'spellcheck':\n this.spellcheck = null\n break\n case 'aria-label':\n this.ariaLabel = null\n break\n case 'aria-labelledby':\n this.ariaLabelledBy = null\n break\n case 'aria-describedby':\n this.ariaDescribedBy = null\n break\n default:\n super.removeAttribute(qualifiedName)\n }\n }\n\n private _removeHostAttribute(name: string): void {\n const host = this as unknown as HTMLElement\n if (HTMLElement.prototype.hasAttribute.call(host, name)) {\n // Use the native removeAttribute to avoid our own overridden version\n // which would reset the internal state.\n HTMLElement.prototype.removeAttribute.call(host, name)\n }\n }\n\n protected get forwardedAriaLabel(): string | undefined {\n const value = this.ariaLabel?.trim()\n return value ? value : undefined\n }\n\n protected get forwardedAriaLabelledBy(): string | undefined {\n const value = this.ariaLabelledBy?.trim()\n return value ? value : undefined\n }\n\n protected get forwardedAriaDescribedBy(): string | undefined {\n const value = this.ariaDescribedBy?.trim()\n return value ? value : undefined\n }\n\n // Subclasses that expose `disabled`/`loading` properties get this disabled\n // calculation for free instead of redeclaring it per component.\n protected get isDisabled(): boolean {\n const self = this as unknown as { disabled?: boolean; loading?: boolean }\n return (self.disabled ?? false) || (self.loading ?? false)\n }\n\n // Subclasses get this for free instead of redeclaring it per component.\n protected get hasForwardedLabel(): boolean {\n return Boolean(this.forwardedAriaLabel || this.forwardedAriaLabelledBy)\n }\n}\n","export function hasMeaningfulContent(nodes: readonly Node[]): boolean {\n return nodes.some((node) => {\n if (node.nodeType === Node.ELEMENT_NODE) {\n return true\n }\n\n if (node.nodeType === Node.TEXT_NODE) {\n return (node.textContent?.trim().length ?? 0) > 0\n }\n\n return false\n })\n}\n\nlet idCounter = 0\n\nexport function createUniqueId(prefix: string): string {\n idCounter += 1\n return `${prefix}-${idCounter}`\n}\n\n// Swaps the recipe classes this component previously applied to `element`\n// without touching classes the author set.\nexport function replaceClasses(\n element: Element,\n previous: string,\n next: string\n): void {\n const nextTokens = next.split(/\\s+/).filter(Boolean)\n previous\n .split(/\\s+/)\n .filter((token) => token && !nextTokens.includes(token))\n .forEach((token) => element.classList.remove(token))\n element.classList.add(...nextTokens)\n}\n\n// Parent/child component pairs identify each other through a global symbol\n// rather than `instanceof`, because every subpath entry bundles its own copy\n// of the child class.\nexport const spectreKindKey: unique symbol = Symbol.for(\n 'phcdevworks.spectre-components.kind'\n)\n\nexport function isSpectreKind<T extends Element>(\n node: Node,\n kind: string\n): node is T {\n return (node as { [spectreKindKey]?: string })[spectreKindKey] === kind\n}\n","import { SpectreBaseElement } from './base'\nimport { hasMeaningfulContent } from './dom'\n\nexport abstract class SpectreProjectableElement extends SpectreBaseElement {\n protected projectedContent: Node[] = []\n private contentObserver?: MutationObserver | undefined\n\n // Return the native container whose existing children are also treated as\n // projected content sources (e.g. the rendered <button>, <select>, <label>).\n protected abstract getContentContainer(): Element | null\n\n // Return true if the node was rendered by this component and should not be\n // treated as external projected content.\n protected abstract isInternalNode(node: Node): boolean\n\n protected get hasProjectedContent(): boolean {\n return hasMeaningfulContent(this.projectedContent)\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n this.syncProjectedContent()\n this.startContentObserver()\n }\n\n override disconnectedCallback(): void {\n this.stopContentObserver()\n super.disconnectedCallback()\n }\n\n protected override update(\n changedProperties: Map<PropertyKey, unknown>\n ): void {\n this.stopContentObserver()\n super.update(changedProperties)\n this.startContentObserver()\n }\n\n protected syncProjectedContent(): boolean {\n const nextProjectedContent: Node[] = []\n const sourceNodes = [\n ...this.childNodes,\n ...(this.getContentContainer()?.childNodes ?? [])\n ]\n\n sourceNodes.forEach((node) => {\n if (!this.isInternalNode(node) && !nextProjectedContent.includes(node)) {\n nextProjectedContent.push(node)\n }\n })\n\n const hasChanged =\n nextProjectedContent.length !== this.projectedContent.length ||\n nextProjectedContent.some(\n (node, index) => node !== this.projectedContent[index]\n )\n\n if (hasChanged) {\n this.projectedContent = nextProjectedContent\n }\n\n return hasChanged\n }\n\n private startContentObserver(): void {\n if (this.contentObserver) {\n return\n }\n\n this.contentObserver = new MutationObserver((mutations) => {\n const isInternalMovement = mutations.every(\n (mutation) =>\n [...mutation.removedNodes].every(\n (node) => this.isInternalNode(node) || this.contains(node)\n ) &&\n [...mutation.addedNodes].every((node) => this.isInternalNode(node))\n )\n\n if (isInternalMovement) {\n return\n }\n\n if (this.syncProjectedContent()) {\n this.requestUpdate()\n }\n })\n\n this.contentObserver.observe(this, { childList: true })\n }\n\n private stopContentObserver(): void {\n this.contentObserver?.disconnect()\n this.contentObserver = undefined\n }\n}\n","import {\n type ButtonSize,\n type ButtonVariant,\n type InputSize\n} from '@phcdevworks/spectre-ui'\n\nexport const spectreInputSizes = ['sm', 'md', 'lg'] as const\nexport type SpectreInputSize = (typeof spectreInputSizes)[number]\n\nexport function isInputSize(value: unknown): value is InputSize | ButtonSize {\n return (spectreInputSizes as readonly string[]).includes(value as string)\n}\n\nexport const spectreButtonVariants = [\n 'primary',\n 'secondary',\n 'ghost',\n 'danger',\n 'success',\n 'cta',\n 'accent',\n 'inverse',\n 'warning',\n 'link',\n 'light',\n 'dark'\n] as const\n\nexport type SpectreButtonVariant = (typeof spectreButtonVariants)[number]\n\nexport function isButtonVariant(value: unknown): value is ButtonVariant {\n return (spectreButtonVariants as readonly string[]).includes(value as string)\n}\n\nexport const spectreButtonTypes = ['button', 'submit', 'reset'] as const\n\nexport type SpectreButtonType = (typeof spectreButtonTypes)[number]\n\nexport function isButtonType(value: unknown): value is SpectreButtonType {\n return (spectreButtonTypes as readonly string[]).includes(value as string)\n}\n\nexport const spectreInputTypes = [\n 'text',\n 'email',\n 'password',\n 'search',\n 'tel',\n 'url',\n 'number',\n 'date',\n 'datetime-local',\n 'month',\n 'time',\n 'week'\n] as const\n\nexport type SpectreInputType = (typeof spectreInputTypes)[number]\n\nexport function isInputType(value: unknown): value is SpectreInputType {\n return (spectreInputTypes as readonly string[]).includes(value as string)\n}\n\nexport const spectreBadgeVariants = [\n 'primary',\n 'secondary',\n 'success',\n 'warning',\n 'danger',\n 'neutral',\n 'info',\n 'ghost',\n 'outline',\n 'accent',\n 'cta',\n 'inverse',\n 'brand'\n] as const\n\nexport type SpectreBadgeVariant = (typeof spectreBadgeVariants)[number]\n\nexport function isBadgeVariant(value: unknown): value is SpectreBadgeVariant {\n return (spectreBadgeVariants as readonly string[]).includes(value as string)\n}\n\nexport const spectreAlertVariants = [\n 'info',\n 'success',\n 'warning',\n 'danger',\n 'neutral',\n 'brand'\n] as const\n\nexport type SpectreAlertVariant = (typeof spectreAlertVariants)[number]\n\nexport function isAlertVariant(value: unknown): value is SpectreAlertVariant {\n return (spectreAlertVariants as readonly string[]).includes(value as string)\n}\n\nexport const spectreCardVariants = [\n 'elevated',\n 'flat',\n 'outline',\n 'ghost'\n] as const\n\nexport type SpectreCardVariant = (typeof spectreCardVariants)[number]\n\nexport function isCardVariant(value: unknown): value is SpectreCardVariant {\n return (spectreCardVariants as readonly string[]).includes(value as string)\n}\n\nexport const spectreCardPaddingSizes = ['sm', 'md', 'lg'] as const\n\nexport type SpectreCardPaddingSize = (typeof spectreCardPaddingSizes)[number]\n\nexport function isCardPaddingSize(\n value: unknown\n): value is SpectreCardPaddingSize {\n return (spectreCardPaddingSizes as readonly string[]).includes(\n value as string\n )\n}\n\nexport const spectreAccentEdges = ['top', 'right', 'bottom', 'left'] as const\n\nexport type SpectreAccentEdge = (typeof spectreAccentEdges)[number]\n\nexport function isAccentEdge(value: unknown): value is SpectreAccentEdge {\n return (spectreAccentEdges as readonly string[]).includes(value as string)\n}\n\nexport const spectreAccentColors = [\n 'neutral',\n 'brand',\n 'info',\n 'success',\n 'warning',\n 'danger',\n 'cta'\n] as const\n\nexport type SpectreAccentColor = (typeof spectreAccentColors)[number]\n\nexport function isAccentColor(value: unknown): value is SpectreAccentColor {\n return (spectreAccentColors as readonly string[]).includes(value as string)\n}\n\nexport const spectreIconBoxVariants = [\n 'primary',\n 'secondary',\n 'success',\n 'warning',\n 'danger',\n 'info',\n 'neutral',\n 'ghost',\n 'accent',\n 'cta',\n 'outline'\n] as const\n\nexport type SpectreIconBoxVariant = (typeof spectreIconBoxVariants)[number]\n\nexport function isIconBoxVariant(\n value: unknown\n): value is SpectreIconBoxVariant {\n return (spectreIconBoxVariants as readonly string[]).includes(value as string)\n}\n\nexport const spectreTestimonialVariants = [\n 'elevated',\n 'flat',\n 'outline',\n 'ghost'\n] as const\n\nexport type SpectreTestimonialVariant =\n (typeof spectreTestimonialVariants)[number]\n\nexport function isTestimonialVariant(\n value: unknown\n): value is SpectreTestimonialVariant {\n return (spectreTestimonialVariants as readonly string[]).includes(\n value as string\n )\n}\n\nexport const spectreSpinnerVariants = [\n 'primary',\n 'secondary',\n 'success',\n 'warning',\n 'danger',\n 'info',\n 'neutral',\n 'accent',\n 'cta',\n 'inverse'\n] as const\n\nexport type SpectreSpinnerVariant = (typeof spectreSpinnerVariants)[number]\n\nexport function isSpinnerVariant(\n value: unknown\n): value is SpectreSpinnerVariant {\n return (spectreSpinnerVariants as readonly string[]).includes(value as string)\n}\n\nexport const spectreTagVariants = [\n 'default',\n 'primary',\n 'secondary',\n 'success',\n 'warning',\n 'danger',\n 'info',\n 'neutral',\n 'accent',\n 'cta',\n 'outline',\n 'ghost'\n] as const\n\nexport type SpectreTagVariant = (typeof spectreTagVariants)[number]\n\nexport function isTagVariant(value: unknown): value is SpectreTagVariant {\n return (spectreTagVariants as readonly string[]).includes(value as string)\n}\n\nexport const spectreAvatarSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const\n\nexport type SpectreAvatarSize = (typeof spectreAvatarSizes)[number]\n\nexport function isAvatarSize(value: unknown): value is SpectreAvatarSize {\n return (spectreAvatarSizes as readonly string[]).includes(value as string)\n}\n\nexport const spectreAvatarShapes = ['circle', 'square'] as const\n\nexport type SpectreAvatarShape = (typeof spectreAvatarShapes)[number]\n\nexport function isAvatarShape(value: unknown): value is SpectreAvatarShape {\n return (spectreAvatarShapes as readonly string[]).includes(value as string)\n}\n\nexport const spectreContainerMaxWidths = ['none', 'prose', 'wide'] as const\n\nexport type SpectreContainerMaxWidth =\n (typeof spectreContainerMaxWidths)[number]\n\nexport function isContainerMaxWidth(\n value: unknown\n): value is SpectreContainerMaxWidth {\n return (spectreContainerMaxWidths as readonly string[]).includes(\n value as string\n )\n}\n\nexport const spectreGridColumns = [1, 2, 3, 4, 6, 12] as const\n\nexport type SpectreGridColumns = (typeof spectreGridColumns)[number]\n\nexport function isGridColumns(value: unknown): value is SpectreGridColumns {\n return (spectreGridColumns as readonly number[]).includes(value as number)\n}\n\nexport const spectreGridGaps = ['sm', 'md', 'lg'] as const\n\nexport type SpectreGridGap = (typeof spectreGridGaps)[number]\n\nexport function isGridGap(value: unknown): value is SpectreGridGap {\n return (spectreGridGaps as readonly string[]).includes(value as string)\n}\n\nexport const spectreGridAligns = [\n 'start',\n 'center',\n 'end',\n 'baseline',\n 'stretch'\n] as const\n\nexport type SpectreGridAlign = (typeof spectreGridAligns)[number]\n\nexport function isGridAlign(value: unknown): value is SpectreGridAlign {\n return (spectreGridAligns as readonly string[]).includes(value as string)\n}\n\nexport const spectreGridSpans = [\n 1,\n 2,\n 3,\n 4,\n 5,\n 6,\n 7,\n 8,\n 9,\n 10,\n 11,\n 12,\n 'full'\n] as const\n\nexport type SpectreGridSpan = (typeof spectreGridSpans)[number]\n\nexport function isGridSpan(value: unknown): value is SpectreGridSpan {\n return (spectreGridSpans as readonly (number | string)[]).includes(\n value as number | string\n )\n}\n\nexport interface SpectreGridSpanOptions {\n base?: SpectreGridSpan\n md?: SpectreGridSpan\n lg?: SpectreGridSpan\n}\n\nexport function isGridSpanOptions(\n value: unknown\n): value is SpectreGridSpanOptions {\n if (typeof value !== 'object' || value === null) {\n return false\n }\n const candidate = value as Record<string, unknown>\n return (\n (candidate.base === undefined || isGridSpan(candidate.base)) &&\n (candidate.md === undefined || isGridSpan(candidate.md)) &&\n (candidate.lg === undefined || isGridSpan(candidate.lg))\n )\n}\n\nexport const spectreGridOffsets = [\n 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11\n] as const\n\nexport type SpectreGridOffset = (typeof spectreGridOffsets)[number]\n\nexport function isGridOffset(value: unknown): value is SpectreGridOffset {\n return (spectreGridOffsets as readonly number[]).includes(value as number)\n}\n\nexport interface SpectreGridOffsetOptions {\n base?: SpectreGridOffset\n md?: SpectreGridOffset\n lg?: SpectreGridOffset\n}\n\nexport function isGridOffsetOptions(\n value: unknown\n): value is SpectreGridOffsetOptions {\n if (typeof value !== 'object' || value === null) {\n return false\n }\n const candidate = value as Record<string, unknown>\n return (\n (candidate.base === undefined || isGridOffset(candidate.base)) &&\n (candidate.md === undefined || isGridOffset(candidate.md)) &&\n (candidate.lg === undefined || isGridOffset(candidate.lg))\n )\n}\n\nexport const spectreGridOrders = [\n 'first',\n 'last',\n 'none',\n 1,\n 2,\n 3,\n 4,\n 5,\n 6,\n 7,\n 8,\n 9,\n 10,\n 11,\n 12\n] as const\n\nexport type SpectreGridOrder = (typeof spectreGridOrders)[number]\n\nexport function isGridOrder(value: unknown): value is SpectreGridOrder {\n return (spectreGridOrders as readonly (number | string)[]).includes(\n value as number | string\n )\n}\n\nexport interface SpectreGridOrderOptions {\n base?: SpectreGridOrder\n md?: SpectreGridOrder\n lg?: SpectreGridOrder\n}\n\nexport function isGridOrderOptions(\n value: unknown\n): value is SpectreGridOrderOptions {\n if (typeof value !== 'object' || value === null) {\n return false\n }\n const candidate = value as Record<string, unknown>\n return (\n (candidate.base === undefined || isGridOrder(candidate.base)) &&\n (candidate.md === undefined || isGridOrder(candidate.md)) &&\n (candidate.lg === undefined || isGridOrder(candidate.lg))\n )\n}\n\nexport const spectreGridLeadingWeights = [1.5, 1.6, 2, 2.5, 3] as const\n\nexport type SpectreGridLeadingWeight =\n (typeof spectreGridLeadingWeights)[number]\n\nexport function isGridLeadingWeight(\n value: unknown\n): value is SpectreGridLeadingWeight {\n return (spectreGridLeadingWeights as readonly number[]).includes(\n value as number\n )\n}\n\nexport interface SpectreGridLeadingWeightOptions {\n base?: SpectreGridLeadingWeight\n md?: SpectreGridLeadingWeight\n lg?: SpectreGridLeadingWeight\n}\n\nexport function isGridLeadingWeightOptions(\n value: unknown\n): value is SpectreGridLeadingWeightOptions {\n if (typeof value !== 'object' || value === null) {\n return false\n }\n const candidate = value as Record<string, unknown>\n return (\n (candidate.base === undefined || isGridLeadingWeight(candidate.base)) &&\n (candidate.md === undefined || isGridLeadingWeight(candidate.md)) &&\n (candidate.lg === undefined || isGridLeadingWeight(candidate.lg))\n )\n}\n\nexport interface SpectreGridLeadingTracksOptions {\n weight: SpectreGridLeadingWeight | SpectreGridLeadingWeightOptions\n}\n\nexport function isGridLeadingTracksOptions(\n value: unknown\n): value is SpectreGridLeadingTracksOptions {\n if (typeof value !== 'object' || value === null) {\n return false\n }\n const candidate = value as Record<string, unknown>\n return (\n isGridLeadingWeight(candidate.weight) ||\n isGridLeadingWeightOptions(candidate.weight)\n )\n}\n\nexport const spectreGridFixedTrackCounts = [1, 2, 3, 4] as const\n\nexport type SpectreGridFixedTrackCount =\n (typeof spectreGridFixedTrackCounts)[number]\n\nexport function isGridFixedTrackCount(\n value: unknown\n): value is SpectreGridFixedTrackCount {\n return (spectreGridFixedTrackCounts as readonly number[]).includes(\n value as number\n )\n}\n\nexport interface SpectreGridFixedTracksOptions {\n count: SpectreGridFixedTrackCount\n}\n\nexport function isGridFixedTracksOptions(\n value: unknown\n): value is SpectreGridFixedTracksOptions {\n if (typeof value !== 'object' || value === null) {\n return false\n }\n const candidate = value as Record<string, unknown>\n return isGridFixedTrackCount(candidate.count)\n}\n\nexport const spectreGridTemplates = [\n 'edge-fluid-edge',\n 'label-fluid-fluid'\n] as const\n\nexport type SpectreGridTemplate = (typeof spectreGridTemplates)[number]\n\nexport function isGridTemplate(value: unknown): value is SpectreGridTemplate {\n return (spectreGridTemplates as readonly string[]).includes(value as string)\n}\n\nexport interface SpectreGridExplicitTemplateOptions {\n template: SpectreGridTemplate\n weight?: SpectreGridLeadingWeight\n}\n\nexport function isGridExplicitTemplateOptions(\n value: unknown\n): value is SpectreGridExplicitTemplateOptions {\n if (typeof value !== 'object' || value === null) {\n return false\n }\n const candidate = value as Record<string, unknown>\n return (\n isGridTemplate(candidate.template) &&\n (candidate.weight === undefined || isGridLeadingWeight(candidate.weight))\n )\n}\n\nexport const spectreStackDirections = ['vertical', 'horizontal'] as const\n\nexport type SpectreStackDirection = (typeof spectreStackDirections)[number]\n\nexport function isStackDirection(\n value: unknown\n): value is SpectreStackDirection {\n return (spectreStackDirections as readonly string[]).includes(value as string)\n}\n\nexport const spectreStackBases = ['none', 'sidebar'] as const\n\nexport type SpectreStackBasis = (typeof spectreStackBases)[number]\n\nexport function isStackBasis(value: unknown): value is SpectreStackBasis {\n return (spectreStackBases as readonly string[]).includes(value as string)\n}\n\nexport const spectreNavAligns = ['start', 'center', 'end'] as const\n\nexport type SpectreNavAlign = (typeof spectreNavAligns)[number]\n\nexport function isNavAlign(value: unknown): value is SpectreNavAlign {\n return (spectreNavAligns as readonly string[]).includes(value as string)\n}\n\nexport const spectreStackAligns = ['center', 'stretch'] as const\n\nexport type SpectreStackAlign = (typeof spectreStackAligns)[number]\n\nexport function isStackAlign(value: unknown): value is SpectreStackAlign {\n return (spectreStackAligns as readonly string[]).includes(value as string)\n}\n\nexport const spectreStackGaps = ['sm', 'md', 'lg'] as const\n\nexport type SpectreStackGap = (typeof spectreStackGaps)[number]\n\nexport function isStackGap(value: unknown): value is SpectreStackGap {\n return (spectreStackGaps as readonly string[]).includes(value as string)\n}\n\nexport const spectreDropdownPlacements = [\n 'bottom-start',\n 'bottom-end',\n 'top-start',\n 'top-end'\n] as const\n\nexport type SpectreDropdownPlacement =\n (typeof spectreDropdownPlacements)[number]\n\nexport function isDropdownPlacement(\n value: unknown\n): value is SpectreDropdownPlacement {\n return (spectreDropdownPlacements as readonly string[]).includes(\n value as string\n )\n}\n\nexport const spectreToastVariants = [\n 'info',\n 'success',\n 'warning',\n 'danger',\n 'neutral'\n] as const\n\nexport type SpectreToastVariant = (typeof spectreToastVariants)[number]\n\nexport function isToastVariant(value: unknown): value is SpectreToastVariant {\n return (spectreToastVariants as readonly string[]).includes(value as string)\n}\n\nexport const spectreSidebarLinkLevels = ['parent', 'child'] as const\n\nexport type SpectreSidebarLinkLevel = (typeof spectreSidebarLinkLevels)[number]\n\nexport function isSidebarLinkLevel(\n value: unknown\n): value is SpectreSidebarLinkLevel {\n return (spectreSidebarLinkLevels as readonly string[]).includes(\n value as string\n )\n}\n\nexport const spectreTooltipPlacements = [\n 'top',\n 'bottom',\n 'left',\n 'right'\n] as const\n\nexport type SpectreTooltipPlacement = (typeof spectreTooltipPlacements)[number]\n\nexport function isTooltipPlacement(\n value: unknown\n): value is SpectreTooltipPlacement {\n return (spectreTooltipPlacements as readonly string[]).includes(\n value as string\n )\n}\n\nexport const spectreTextSizes = [\n 'xs',\n 'sm',\n 'md',\n 'lg',\n 'xl',\n '2xl',\n '3xl',\n '4xl',\n '5xl',\n '6xl'\n] as const\n\nexport type SpectreTextSize = (typeof spectreTextSizes)[number]\n\nexport function isTextSize(value: unknown): value is SpectreTextSize {\n return (spectreTextSizes as readonly string[]).includes(value as string)\n}\n\nexport const spectreTextVariants = [\n 'default',\n 'muted',\n 'subtle',\n 'meta',\n 'brand',\n 'onInverse',\n 'onInverseMuted',\n 'onSurface',\n 'onSurfaceMuted',\n 'onSurfaceSubtle',\n 'onSurfaceMeta',\n 'onSurfaceBrand'\n] as const\n\nexport type SpectreTextVariant = (typeof spectreTextVariants)[number]\n\nexport function isTextVariant(value: unknown): value is SpectreTextVariant {\n return (spectreTextVariants as readonly string[]).includes(value as string)\n}\n\nexport const spectreTextFamilies = ['sans', 'serif', 'mono'] as const\n\nexport type SpectreTextFamily = (typeof spectreTextFamilies)[number]\n\nexport function isTextFamily(value: unknown): value is SpectreTextFamily {\n return (spectreTextFamilies as readonly string[]).includes(value as string)\n}\n\nexport const spectreTextLevels = [\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'p',\n 'span'\n] as const\n\nexport type SpectreTextLevel = (typeof spectreTextLevels)[number]\n\nexport function isTextLevel(value: unknown): value is SpectreTextLevel {\n return (spectreTextLevels as readonly string[]).includes(value as string)\n}\n\nexport const spectreTextTransforms = [\n 'none',\n 'uppercase',\n 'lowercase',\n 'capitalize'\n] as const\n\nexport type SpectreTextTransform = (typeof spectreTextTransforms)[number]\n\nexport function isTextTransform(value: unknown): value is SpectreTextTransform {\n return (spectreTextTransforms as readonly string[]).includes(value as string)\n}\n\nexport const spectreTabsVariants = ['line', 'pill'] as const\n\nexport type SpectreTabsVariant = (typeof spectreTabsVariants)[number]\n\nexport function isTabsVariant(value: unknown): value is SpectreTabsVariant {\n return (spectreTabsVariants as readonly string[]).includes(value as string)\n}\n\nexport const spectreOffcanvasPlacements = [\n 'start',\n 'end',\n 'top',\n 'bottom'\n] as const\n\nexport type SpectreOffcanvasPlacement =\n (typeof spectreOffcanvasPlacements)[number]\n\nexport function isOffcanvasPlacement(\n value: unknown\n): value is SpectreOffcanvasPlacement {\n return (spectreOffcanvasPlacements as readonly string[]).includes(\n value as string\n )\n}\n\nexport const spectreTableSizes = ['sm', 'md'] as const\n\nexport type SpectreTableSize = (typeof spectreTableSizes)[number]\n\nexport function isTableSize(value: unknown): value is SpectreTableSize {\n return (spectreTableSizes as readonly string[]).includes(value as string)\n}\n\nexport const spectreStepperOrientations = ['horizontal', 'vertical'] as const\n\nexport type SpectreStepperOrientation =\n (typeof spectreStepperOrientations)[number]\n\nexport function isStepperOrientation(\n value: unknown\n): value is SpectreStepperOrientation {\n return (spectreStepperOrientations as readonly string[]).includes(\n value as string\n )\n}\n\nexport const spectreSpacingScale = ['sm', 'md', 'lg'] as const\n\nexport type SpectreSpacingStep = (typeof spectreSpacingScale)[number]\n\nexport function isSpacingStep(value: unknown): value is SpectreSpacingStep {\n return (spectreSpacingScale as readonly string[]).includes(value as string)\n}\n\nexport const spectreGridColStarts = [\n 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12\n] as const\n\nexport type SpectreGridColStart = (typeof spectreGridColStarts)[number]\n\nexport function isGridColStart(value: unknown): value is SpectreGridColStart {\n return (spectreGridColStarts as readonly number[]).includes(value as number)\n}\n\nexport interface SpectreGridColStartOptions {\n base?: SpectreGridColStart\n md?: SpectreGridColStart\n lg?: SpectreGridColStart\n}\n\nexport function isGridColStartOptions(\n value: unknown\n): value is SpectreGridColStartOptions {\n if (typeof value !== 'object' || value === null) {\n return false\n }\n const candidate = value as Record<string, unknown>\n return (\n (candidate.base === undefined || isGridColStart(candidate.base)) &&\n (candidate.md === undefined || isGridColStart(candidate.md)) &&\n (candidate.lg === undefined || isGridColStart(candidate.lg))\n )\n}\n\nexport const spectrePopoverPlacements = [\n 'top',\n 'bottom',\n 'left',\n 'right'\n] as const\n\nexport type SpectrePopoverPlacement = (typeof spectrePopoverPlacements)[number]\n\nexport function isPopoverPlacement(\n value: unknown\n): value is SpectrePopoverPlacement {\n return (spectrePopoverPlacements as readonly string[]).includes(\n value as string\n )\n}\n\nexport const spectreProgressVariants = [\n 'brand',\n 'neutral',\n 'info',\n 'success',\n 'warning',\n 'danger'\n] as const\n\nexport type SpectreProgressVariant = (typeof spectreProgressVariants)[number]\n\nexport function isProgressVariant(\n value: unknown\n): value is SpectreProgressVariant {\n return (spectreProgressVariants as readonly string[]).includes(\n value as string\n )\n}\n\nexport const spectreTextPresets = ['heading', 'display', 'lead'] as const\n\nexport type SpectreTextPreset = (typeof spectreTextPresets)[number]\n\nexport function isTextPreset(value: unknown): value is SpectreTextPreset {\n return (spectreTextPresets as readonly string[]).includes(value as string)\n}\n\nexport const spectreHeadingLevels = [\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6'\n] as const\n\nexport type SpectreHeadingLevel = (typeof spectreHeadingLevels)[number]\n\nexport function isHeadingLevel(value: unknown): value is SpectreHeadingLevel {\n return (spectreHeadingLevels as readonly string[]).includes(value as string)\n}\n\nexport const spectreDisplayLevels = [1, 2, 3, 4, 5, 6] as const\n\nexport type SpectreDisplayLevel = (typeof spectreDisplayLevels)[number]\n\nexport function isDisplayLevel(value: unknown): value is SpectreDisplayLevel {\n return (spectreDisplayLevels as readonly number[]).includes(value as number)\n}\n\nexport const spectreTableRowVariants = [\n 'neutral',\n 'info',\n 'success',\n 'warning',\n 'danger'\n] as const\n\nexport type SpectreTableRowVariant = (typeof spectreTableRowVariants)[number]\n\nexport function isTableRowVariant(\n value: unknown\n): value is SpectreTableRowVariant {\n return (spectreTableRowVariants as readonly string[]).includes(\n value as string\n )\n}\n\nexport function normalizeInt(\n value: unknown,\n fallback: number | undefined,\n min = 0\n): number | undefined {\n if (\n value == null ||\n typeof value !== 'number' ||\n !Number.isInteger(value) ||\n value < min\n ) {\n return fallback\n }\n return value\n}\n\nconst spectreUtilityClassPattern =\n /^sp-[a-z0-9]+(?:-[a-z0-9]+)*(?:__[a-z0-9]+(?:-[a-z0-9]+)*)?(?:--[a-z0-9]+(?:-[a-z0-9]+)*)?$/\n\nexport function sanitizeUtilityClasses(\n value: string | null | undefined\n): string {\n if (!value) {\n return ''\n }\n return value\n .split(/\\s+/)\n .filter((token) => spectreUtilityClassPattern.test(token))\n .join(' ')\n}\n","import { html, nothing } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { getFocusableElements, trapFocus } from '../../utils/focus'\nimport { SpectreProjectableElement } from '../../utils/projectable'\nimport {\n isAccentColor,\n isAccentEdge,\n type SpectreAccentColor,\n type SpectreAccentEdge\n} from '../../utils/form'\n\nimport {\n getModalClasses,\n getModalOverlayClasses,\n type ModalAccentColor,\n type ModalAccentEdge\n} from '@phcdevworks/spectre-ui'\n\nexport interface SpectreModalProps {\n accent?: SpectreAccentEdge | undefined\n accentColor?: SpectreAccentColor | undefined\n ariaLabel?: string | null\n ariaLabelledBy?: string | null\n ariaDescribedBy?: string | null\n fullWidth?: boolean | undefined\n id?: string | null | undefined\n open?: boolean | undefined\n title?: string | null | undefined\n}\n\nexport class SpectreModalElement\n extends SpectreProjectableElement\n implements SpectreModalProps\n{\n static properties = {\n accent: { type: String, reflect: true },\n accentColor: { attribute: 'accent-color', type: String, reflect: true },\n fullWidth: { attribute: 'full-width', type: Boolean, reflect: true },\n open: { type: Boolean, reflect: true }\n }\n\n accent: SpectreAccentEdge | undefined = undefined\n accentColor: SpectreAccentColor | undefined = undefined\n fullWidth: boolean | undefined = false\n open: boolean | undefined = false\n\n private previouslyFocusedElement: HTMLElement | null = null\n\n override get id(): string {\n return super.id\n }\n\n override set id(value: string | null | undefined) {\n super.id = value\n }\n\n override get title(): string {\n return super.title\n }\n\n override set title(value: string | null | undefined) {\n super.title = value\n }\n\n protected override getContentContainer(): Element | null {\n return this.querySelector('[data-sp-modal-native]')\n }\n\n protected override isInternalNode(node: Node): boolean {\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return false\n }\n const el = node as Element\n return (\n el.hasAttribute('data-sp-modal-native') ||\n el.hasAttribute('data-sp-modal-overlay')\n )\n }\n\n protected override willUpdate(\n changedProperties: Map<PropertyKey, unknown>\n ): void {\n if (\n changedProperties.has('accent') &&\n this.accent != null &&\n !isAccentEdge(this.accent)\n ) {\n this.accent = undefined\n }\n if (\n changedProperties.has('accentColor') &&\n this.accentColor != null &&\n !isAccentColor(this.accentColor)\n ) {\n this.accentColor = undefined\n }\n if (changedProperties.has('fullWidth') && this.fullWidth == null) {\n this.fullWidth = false\n }\n if (changedProperties.has('open') && this.open == null) {\n this.open = false\n }\n }\n\n protected override updated(\n changedProperties: Map<PropertyKey, unknown>\n ): void {\n super.updated(changedProperties)\n\n if (!changedProperties.has('open')) {\n return\n }\n\n if (this.open) {\n this.previouslyFocusedElement = document.activeElement as HTMLElement\n this.focusFirstElement()\n } else if (this.previouslyFocusedElement) {\n this.previouslyFocusedElement.focus()\n this.previouslyFocusedElement = null\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n document.addEventListener('keydown', this.handleDocumentKeydown)\n }\n\n override disconnectedCallback(): void {\n document.removeEventListener('keydown', this.handleDocumentKeydown)\n super.disconnectedCallback()\n }\n\n private get modalElement(): HTMLElement | null {\n return this.querySelector('[data-sp-modal-native]')\n }\n\n private focusFirstElement(): void {\n const [first] = getFocusableElements(this.modalElement)\n ;(first ?? this.modalElement)?.focus()\n }\n\n private handleDocumentKeydown = (event: KeyboardEvent): void => {\n if (!this.open) {\n return\n }\n\n if (event.key === 'Escape') {\n this.close()\n return\n }\n\n if (event.key === 'Tab') {\n trapFocus(event, this.modalElement)\n }\n }\n\n private close(): void {\n if (!this.open) {\n return\n }\n this.open = false\n this.dispatchEvent(new CustomEvent('sp-close', { bubbles: true }))\n }\n\n private get overlayClasses(): string {\n return getModalOverlayClasses({ open: this.open ?? false })\n }\n\n private get modalClasses(): string {\n return getModalClasses({\n ...(this.accent !== undefined && {\n accent: this.accent as ModalAccentEdge\n }),\n ...(this.accentColor !== undefined && {\n accentColor: this.accentColor as ModalAccentColor\n }),\n open: this.open ?? false,\n fullWidth: this.fullWidth ?? false\n })\n }\n\n override render() {\n const isHidden = !this.open\n\n return html`<div\n aria-hidden=\"${ifDefined(isHidden ? 'true' : undefined)}\"\n class=\"${this.overlayClasses}\"\n data-sp-modal-overlay\n @click=\"${(event: Event) => {\n if (event.target === event.currentTarget) {\n this.close()\n }\n }}\"\n >\n <div\n aria-describedby=\"${ifDefined(this.forwardedAriaDescribedBy)}\"\n aria-hidden=\"${ifDefined(isHidden ? 'true' : undefined)}\"\n aria-label=\"${ifDefined(this.forwardedAriaLabel)}\"\n aria-labelledby=\"${ifDefined(this.forwardedAriaLabelledBy)}\"\n aria-modal=\"true\"\n class=\"${this.modalClasses}\"\n data-sp-modal-native\n id=\"${ifDefined(this.id || undefined)}\"\n role=\"dialog\"\n tabindex=\"-1\"\n title=\"${ifDefined(this.title || undefined)}\"\n >\n ${this.hasProjectedContent ? this.projectedContent : nothing}\n </div>\n </div>`\n }\n}\n\nexport function defineSpectreModal(\n tagName = 'sp-modal'\n): typeof SpectreModalElement {\n const existingElement = customElements.get(tagName)\n\n if (existingElement) {\n return existingElement as unknown as typeof SpectreModalElement\n }\n\n customElements.define(tagName, SpectreModalElement)\n return SpectreModalElement\n}\n"]}
package/dist/nav-item.cjs CHANGED
@@ -280,6 +280,38 @@ function hasMeaningfulContent(nodes) {
280
280
  return false;
281
281
  });
282
282
  }
283
+
284
+ // src/utils/parts.ts
285
+ function applyPartClasses(elements, parts) {
286
+ for (const element of elements) {
287
+ const part = element.getAttribute("slot");
288
+ const classes = part ? parts[part] : void 0;
289
+ if (classes) {
290
+ element.classList.add(...classes.split(/\s+/).filter(Boolean));
291
+ }
292
+ }
293
+ }
294
+ function childElements(nodes) {
295
+ return nodes.filter(
296
+ (node) => node.nodeType === Node.ELEMENT_NODE
297
+ );
298
+ }
299
+ var spectreAccentEdges = ["top", "right", "bottom", "left"];
300
+ function isAccentEdge(value) {
301
+ return spectreAccentEdges.includes(value);
302
+ }
303
+ var spectreAccentColors = [
304
+ "neutral",
305
+ "brand",
306
+ "info",
307
+ "success",
308
+ "warning",
309
+ "danger",
310
+ "cta"
311
+ ];
312
+ function isAccentColor(value) {
313
+ return spectreAccentColors.includes(value);
314
+ }
283
315
  var spectreDropdownPlacements = [
284
316
  "bottom-start",
285
317
  "bottom-end",
@@ -291,15 +323,35 @@ function isDropdownPlacement(value) {
291
323
  value
292
324
  );
293
325
  }
326
+
327
+ // src/utils/states.ts
328
+ var hoverFocusStateProperties = {
329
+ focused: { type: Boolean, reflect: true },
330
+ hovered: { type: Boolean, reflect: true }
331
+ };
332
+ function hoverFocusStates(element) {
333
+ return {
334
+ focused: element.focused ?? false,
335
+ hovered: element.hovered ?? false
336
+ };
337
+ }
294
338
  var SpectreNavItemElement = class extends SpectreBaseElement {
295
339
  constructor() {
296
340
  super(...arguments);
341
+ this.focused = false;
342
+ this.hovered = false;
343
+ this.accent = void 0;
344
+ this.accentColor = void 0;
345
+ this.active = false;
346
+ this.disabled = false;
297
347
  this.dropdown = false;
348
+ this.fullWidth = false;
298
349
  this.href = void 0;
299
350
  this.label = void 0;
300
351
  this.mega = false;
301
352
  this.open = false;
302
353
  this.placement = "bottom-start";
354
+ this.viewport = false;
303
355
  this.triggerContent = [];
304
356
  this.menuContent = [];
305
357
  this.handleDocumentClick = (event) => {
@@ -397,6 +449,24 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
397
449
  this.contentObserver = void 0;
398
450
  }
399
451
  willUpdate(changedProperties) {
452
+ if (changedProperties.has("accent") && this.accent != null && !isAccentEdge(this.accent)) {
453
+ this.accent = void 0;
454
+ }
455
+ if (changedProperties.has("accentColor") && this.accentColor != null && !isAccentColor(this.accentColor)) {
456
+ this.accentColor = void 0;
457
+ }
458
+ if (changedProperties.has("active") && this.active == null) {
459
+ this.active = false;
460
+ }
461
+ if (changedProperties.has("disabled") && this.disabled == null) {
462
+ this.disabled = false;
463
+ }
464
+ if (changedProperties.has("fullWidth") && this.fullWidth == null) {
465
+ this.fullWidth = false;
466
+ }
467
+ if (changedProperties.has("viewport") && this.viewport == null) {
468
+ this.viewport = false;
469
+ }
400
470
  if (changedProperties.has("dropdown") && this.dropdown == null) {
401
471
  this.dropdown = false;
402
472
  }
@@ -410,6 +480,14 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
410
480
  this.placement = "bottom-start";
411
481
  }
412
482
  }
483
+ updated(changedProperties) {
484
+ super.updated(changedProperties);
485
+ applyPartClasses(childElements(this.menuContent), {
486
+ divider: spectreUi.getDropdownDividerClasses(),
487
+ header: spectreUi.getDropdownHeaderClasses(),
488
+ item: spectreUi.getDropdownItemClasses()
489
+ });
490
+ }
413
491
  get triggerElement() {
414
492
  return this.querySelector("[data-sp-nav-item-trigger]");
415
493
  }
@@ -435,23 +513,40 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
435
513
  this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
436
514
  }
437
515
  get wrapperClasses() {
438
- return spectreUi.getDropdownClasses({ mega: this.mega ?? false });
516
+ return spectreUi.getDropdownClasses({
517
+ fullWidth: this.fullWidth ?? false,
518
+ mega: this.mega ?? false,
519
+ viewport: this.viewport ?? false
520
+ });
439
521
  }
440
522
  get menuClasses() {
441
523
  return spectreUi.getDropdownMenuClasses({
524
+ ...this.accent !== void 0 && {
525
+ accent: this.accent
526
+ },
527
+ ...this.accentColor !== void 0 && {
528
+ accentColor: this.accentColor
529
+ },
442
530
  mega: this.mega ?? false,
531
+ viewport: this.viewport ?? false,
443
532
  open: this.open ?? false,
444
533
  placement: this.placement
445
534
  });
446
535
  }
447
536
  get navLinkClasses() {
448
- return spectreUi.getNavLinkClasses();
537
+ return spectreUi.getNavLinkClasses({
538
+ ...hoverFocusStates(this),
539
+ active: this.active ?? false,
540
+ disabled: this.disabled ?? false
541
+ });
449
542
  }
450
543
  renderLink() {
451
544
  return lit.html`<a
545
+ aria-current="${ifDefined_js.ifDefined(this.active ? "page" : void 0)}"
546
+ aria-disabled="${ifDefined_js.ifDefined(this.disabled ? "true" : void 0)}"
452
547
  aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel)}"
453
548
  class="${this.navLinkClasses}"
454
- href="${ifDefined_js.ifDefined(this.href)}"
549
+ href="${ifDefined_js.ifDefined(this.disabled ? void 0 : this.href)}"
455
550
  id="${ifDefined_js.ifDefined(this.id || void 0)}"
456
551
  title="${ifDefined_js.ifDefined(this.title || void 0)}"
457
552
  >${this.hasMenuContent ? this.menuContent : this.label}</a
@@ -469,6 +564,7 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
469
564
  aria-label="${ifDefined_js.ifDefined(this.forwardedAriaLabel ?? this.label)}"
470
565
  class="${this.navLinkClasses}"
471
566
  data-sp-nav-item-trigger
567
+ ?disabled="${this.disabled ?? false}"
472
568
  type="button"
473
569
  @click="${() => this.toggle()}"
474
570
  >
@@ -484,12 +580,19 @@ var SpectreNavItemElement = class extends SpectreBaseElement {
484
580
  }
485
581
  };
486
582
  SpectreNavItemElement.properties = {
583
+ ...hoverFocusStateProperties,
584
+ accent: { type: String, reflect: true },
585
+ accentColor: { attribute: "accent-color", type: String, reflect: true },
586
+ active: { type: Boolean, reflect: true },
587
+ disabled: { type: Boolean, reflect: true },
487
588
  dropdown: { type: Boolean, reflect: true },
589
+ fullWidth: { attribute: "full-width", type: Boolean, reflect: true },
488
590
  href: { type: String },
489
591
  label: { type: String },
490
592
  mega: { type: Boolean, reflect: true },
491
593
  open: { type: Boolean, reflect: true },
492
- placement: { type: String, reflect: true }
594
+ placement: { type: String, reflect: true },
595
+ viewport: { type: Boolean, reflect: true }
493
596
  };
494
597
  function defineSpectreNavItem(tagName = "sp-nav-item") {
495
598
  const existingElement = customElements.get(tagName);