@phcdevworks/spectre-components 1.10.0 → 1.12.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 (98) hide show
  1. package/README.md +66 -1
  2. package/dist/alert.cjs.map +1 -1
  3. package/dist/alert.d.cts +2 -2
  4. package/dist/alert.d.ts +2 -2
  5. package/dist/alert.js.map +1 -1
  6. package/dist/avatar.cjs.map +1 -1
  7. package/dist/avatar.d.cts +2 -2
  8. package/dist/avatar.d.ts +2 -2
  9. package/dist/avatar.js.map +1 -1
  10. package/dist/badge.cjs.map +1 -1
  11. package/dist/badge.d.cts +2 -2
  12. package/dist/badge.d.ts +2 -2
  13. package/dist/badge.js.map +1 -1
  14. package/dist/button.cjs.map +1 -1
  15. package/dist/button.d.cts +2 -2
  16. package/dist/button.d.ts +2 -2
  17. package/dist/button.js.map +1 -1
  18. package/dist/card.cjs.map +1 -1
  19. package/dist/card.d.cts +2 -2
  20. package/dist/card.d.ts +2 -2
  21. package/dist/card.js.map +1 -1
  22. package/dist/container.cjs.map +1 -1
  23. package/dist/container.d.cts +2 -2
  24. package/dist/container.d.ts +2 -2
  25. package/dist/container.js.map +1 -1
  26. package/dist/dropdown.cjs.map +1 -1
  27. package/dist/dropdown.d.cts +2 -2
  28. package/dist/dropdown.d.ts +2 -2
  29. package/dist/dropdown.js.map +1 -1
  30. package/dist/{form-DgzRhNmg.d.cts → form-JrKDonG4.d.cts} +9 -1
  31. package/dist/{form-DgzRhNmg.d.ts → form-JrKDonG4.d.ts} +9 -1
  32. package/dist/grid.cjs.map +1 -1
  33. package/dist/grid.d.cts +2 -2
  34. package/dist/grid.d.ts +2 -2
  35. package/dist/grid.js.map +1 -1
  36. package/dist/icon-box.cjs.map +1 -1
  37. package/dist/icon-box.d.cts +2 -2
  38. package/dist/icon-box.d.ts +2 -2
  39. package/dist/icon-box.js.map +1 -1
  40. package/dist/index.cjs +340 -0
  41. package/dist/index.cjs.map +1 -1
  42. package/dist/index.d.cts +3 -1
  43. package/dist/index.d.ts +3 -1
  44. package/dist/index.js +334 -2
  45. package/dist/index.js.map +1 -1
  46. package/dist/input.cjs.map +1 -1
  47. package/dist/input.d.cts +2 -2
  48. package/dist/input.d.ts +2 -2
  49. package/dist/input.js.map +1 -1
  50. package/dist/nav-item.cjs +500 -0
  51. package/dist/nav-item.cjs.map +1 -0
  52. package/dist/nav-item.d.cts +74 -0
  53. package/dist/nav-item.d.ts +74 -0
  54. package/dist/nav-item.js +497 -0
  55. package/dist/nav-item.js.map +1 -0
  56. package/dist/rating.cjs.map +1 -1
  57. package/dist/rating.d.cts +2 -2
  58. package/dist/rating.d.ts +2 -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.map +1 -1
  65. package/dist/spinner.d.cts +2 -2
  66. package/dist/spinner.d.ts +2 -2
  67. package/dist/spinner.js.map +1 -1
  68. package/dist/stack.cjs.map +1 -1
  69. package/dist/stack.d.cts +2 -2
  70. package/dist/stack.d.ts +2 -2
  71. package/dist/stack.js.map +1 -1
  72. package/dist/tag.cjs.map +1 -1
  73. package/dist/tag.d.cts +2 -2
  74. package/dist/tag.d.ts +2 -2
  75. package/dist/tag.js.map +1 -1
  76. package/dist/testimonial.cjs.map +1 -1
  77. package/dist/testimonial.d.cts +2 -2
  78. package/dist/testimonial.d.ts +2 -2
  79. package/dist/testimonial.js.map +1 -1
  80. package/dist/text.cjs +484 -0
  81. package/dist/text.cjs.map +1 -0
  82. package/dist/text.d.cts +53 -0
  83. package/dist/text.d.ts +53 -0
  84. package/dist/text.js +477 -0
  85. package/dist/text.js.map +1 -0
  86. package/dist/textarea.cjs.map +1 -1
  87. package/dist/textarea.d.cts +1 -1
  88. package/dist/textarea.d.ts +1 -1
  89. package/dist/textarea.js.map +1 -1
  90. package/dist/toast.cjs.map +1 -1
  91. package/dist/toast.d.cts +2 -2
  92. package/dist/toast.d.ts +2 -2
  93. package/dist/toast.js.map +1 -1
  94. package/dist/tooltip.cjs.map +1 -1
  95. package/dist/tooltip.d.cts +2 -2
  96. package/dist/tooltip.d.ts +2 -2
  97. package/dist/tooltip.js.map +1 -1
  98. package/package.json +14 -4
package/dist/index.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridColumns, k as SpectreGridGap, S as SpectreIconBoxSize, l as SpectreIconBoxVariant, S as SpectreInputSize, m as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, n as SpectreSpinnerVariant, o as SpectreStackAlign, p as SpectreStackBasis, q as SpectreStackDirection, S as SpectreTagSize, r as SpectreTagVariant, s as SpectreTestimonialVariant, t as SpectreToastVariant, u as SpectreTooltipPlacement, v as spectreAlertSizes, w as spectreAlertVariants, x as spectreAvatarShapes, y as spectreAvatarSizes, v as spectreBadgeSizes, z as spectreBadgeVariants, v as spectreButtonSizes, A as spectreButtonTypes, B as spectreButtonVariants, C as spectreCardVariants, D as spectreContainerMaxWidths, E as spectreDropdownPlacements, F as spectreGridColumns, G as spectreGridGaps, v as spectreIconBoxSizes, H as spectreIconBoxVariants, v as spectreInputSizes, I as spectreInputTypes, v as spectreRatingSizes, v as spectreSpinnerSizes, J as spectreSpinnerVariants, K as spectreStackAligns, L as spectreStackBases, M as spectreStackDirections, v as spectreTagSizes, N as spectreTagVariants, O as spectreTestimonialVariants, P as spectreToastVariants, Q as spectreTooltipPlacements } from './form-DgzRhNmg.cjs';
1
+ export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridColumns, k as SpectreGridGap, S as SpectreIconBoxSize, l as SpectreIconBoxVariant, S as SpectreInputSize, m as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, n as SpectreSpinnerVariant, o as SpectreStackAlign, p as SpectreStackBasis, q as SpectreStackDirection, S as SpectreTagSize, r as SpectreTagVariant, s as SpectreTestimonialVariant, t as SpectreTextFamily, u as SpectreTextLevel, v as SpectreTextSize, w as SpectreTextVariant, x as SpectreToastVariant, y as SpectreTooltipPlacement, z as spectreAlertSizes, A as spectreAlertVariants, B as spectreAvatarShapes, C as spectreAvatarSizes, z as spectreBadgeSizes, D as spectreBadgeVariants, z as spectreButtonSizes, E as spectreButtonTypes, F as spectreButtonVariants, G as spectreCardVariants, H as spectreContainerMaxWidths, I as spectreDropdownPlacements, J as spectreGridColumns, K as spectreGridGaps, z as spectreIconBoxSizes, L as spectreIconBoxVariants, z as spectreInputSizes, M as spectreInputTypes, z as spectreRatingSizes, z as spectreSpinnerSizes, N as spectreSpinnerVariants, O as spectreStackAligns, P as spectreStackBases, Q as spectreStackDirections, z as spectreTagSizes, R as spectreTagVariants, T as spectreTestimonialVariants, U as spectreTextFamilies, V as spectreTextLevels, W as spectreTextSizes, X as spectreTextVariants, Y as spectreToastVariants, Z as spectreTooltipPlacements } from './form-JrKDonG4.cjs';
2
2
  export { SpectreButtonElement, SpectreButtonProps, defineSpectreButton } from './button.cjs';
3
3
  export { SpectreInputElement, SpectreInputProps, defineSpectreInput } from './input.cjs';
4
4
  export { SpectreTextareaElement, SpectreTextareaProps, defineSpectreTextarea } from './textarea.cjs';
@@ -25,9 +25,11 @@ export { SpectreDropdownElement, SpectreDropdownProps, defineSpectreDropdown } f
25
25
  export { SpectreFooterElement, SpectreFooterProps, defineSpectreFooter } from './footer.cjs';
26
26
  export { SpectreModalElement, SpectreModalProps, defineSpectreModal } from './modal.cjs';
27
27
  export { SpectreNavElement, SpectreNavProps, defineSpectreNav } from './nav.cjs';
28
+ export { SpectreNavItemElement, SpectreNavItemProps, defineSpectreNavItem } from './nav-item.cjs';
28
29
  export { SpectreSidebarElement, SpectreSidebarProps, defineSpectreSidebar } from './sidebar.cjs';
29
30
  export { SpectreToastElement, SpectreToastProps, defineSpectreToast } from './toast.cjs';
30
31
  export { SpectreTooltipElement, SpectreTooltipProps, defineSpectreTooltip } from './tooltip.cjs';
32
+ export { SpectreTextElement, SpectreTextProps, defineSpectreText } from './text.cjs';
31
33
  import 'lit';
32
34
  import './projectable-DLOn6eaW.cjs';
33
35
  import './base-D0s95V2v.cjs';
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridColumns, k as SpectreGridGap, S as SpectreIconBoxSize, l as SpectreIconBoxVariant, S as SpectreInputSize, m as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, n as SpectreSpinnerVariant, o as SpectreStackAlign, p as SpectreStackBasis, q as SpectreStackDirection, S as SpectreTagSize, r as SpectreTagVariant, s as SpectreTestimonialVariant, t as SpectreToastVariant, u as SpectreTooltipPlacement, v as spectreAlertSizes, w as spectreAlertVariants, x as spectreAvatarShapes, y as spectreAvatarSizes, v as spectreBadgeSizes, z as spectreBadgeVariants, v as spectreButtonSizes, A as spectreButtonTypes, B as spectreButtonVariants, C as spectreCardVariants, D as spectreContainerMaxWidths, E as spectreDropdownPlacements, F as spectreGridColumns, G as spectreGridGaps, v as spectreIconBoxSizes, H as spectreIconBoxVariants, v as spectreInputSizes, I as spectreInputTypes, v as spectreRatingSizes, v as spectreSpinnerSizes, J as spectreSpinnerVariants, K as spectreStackAligns, L as spectreStackBases, M as spectreStackDirections, v as spectreTagSizes, N as spectreTagVariants, O as spectreTestimonialVariants, P as spectreToastVariants, Q as spectreTooltipPlacements } from './form-DgzRhNmg.js';
1
+ export { S as SpectreAlertSize, a as SpectreAlertVariant, b as SpectreAvatarShape, c as SpectreAvatarSize, S as SpectreBadgeSize, d as SpectreBadgeVariant, S as SpectreButtonSize, e as SpectreButtonType, f as SpectreButtonVariant, g as SpectreCardVariant, h as SpectreContainerMaxWidth, i as SpectreDropdownPlacement, j as SpectreGridColumns, k as SpectreGridGap, S as SpectreIconBoxSize, l as SpectreIconBoxVariant, S as SpectreInputSize, m as SpectreInputType, S as SpectreRatingSize, S as SpectreSpinnerSize, n as SpectreSpinnerVariant, o as SpectreStackAlign, p as SpectreStackBasis, q as SpectreStackDirection, S as SpectreTagSize, r as SpectreTagVariant, s as SpectreTestimonialVariant, t as SpectreTextFamily, u as SpectreTextLevel, v as SpectreTextSize, w as SpectreTextVariant, x as SpectreToastVariant, y as SpectreTooltipPlacement, z as spectreAlertSizes, A as spectreAlertVariants, B as spectreAvatarShapes, C as spectreAvatarSizes, z as spectreBadgeSizes, D as spectreBadgeVariants, z as spectreButtonSizes, E as spectreButtonTypes, F as spectreButtonVariants, G as spectreCardVariants, H as spectreContainerMaxWidths, I as spectreDropdownPlacements, J as spectreGridColumns, K as spectreGridGaps, z as spectreIconBoxSizes, L as spectreIconBoxVariants, z as spectreInputSizes, M as spectreInputTypes, z as spectreRatingSizes, z as spectreSpinnerSizes, N as spectreSpinnerVariants, O as spectreStackAligns, P as spectreStackBases, Q as spectreStackDirections, z as spectreTagSizes, R as spectreTagVariants, T as spectreTestimonialVariants, U as spectreTextFamilies, V as spectreTextLevels, W as spectreTextSizes, X as spectreTextVariants, Y as spectreToastVariants, Z as spectreTooltipPlacements } from './form-JrKDonG4.js';
2
2
  export { SpectreButtonElement, SpectreButtonProps, defineSpectreButton } from './button.js';
3
3
  export { SpectreInputElement, SpectreInputProps, defineSpectreInput } from './input.js';
4
4
  export { SpectreTextareaElement, SpectreTextareaProps, defineSpectreTextarea } from './textarea.js';
@@ -25,9 +25,11 @@ export { SpectreDropdownElement, SpectreDropdownProps, defineSpectreDropdown } f
25
25
  export { SpectreFooterElement, SpectreFooterProps, defineSpectreFooter } from './footer.js';
26
26
  export { SpectreModalElement, SpectreModalProps, defineSpectreModal } from './modal.js';
27
27
  export { SpectreNavElement, SpectreNavProps, defineSpectreNav } from './nav.js';
28
+ export { SpectreNavItemElement, SpectreNavItemProps, defineSpectreNavItem } from './nav-item.js';
28
29
  export { SpectreSidebarElement, SpectreSidebarProps, defineSpectreSidebar } from './sidebar.js';
29
30
  export { SpectreToastElement, SpectreToastProps, defineSpectreToast } from './toast.js';
30
31
  export { SpectreTooltipElement, SpectreTooltipProps, defineSpectreTooltip } from './tooltip.js';
32
+ export { SpectreTextElement, SpectreTextProps, defineSpectreText } from './text.js';
31
33
  import 'lit';
32
34
  import './projectable-D9YCo9NY.js';
33
35
  import './base-D0s95V2v.js';
package/dist/index.js CHANGED
@@ -1,7 +1,8 @@
1
- import { getButtonClasses, getInputLabelClasses, getInputClasses, getTextareaClasses, getSelectClasses, getCheckboxClasses, getRadioClasses, getLabelClasses, getFieldsetLegendClasses, getFieldsetClasses, getBadgeClasses, getCardClasses, getIconBoxClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialClasses, getAlertClasses, getAvatarClasses, getSpinnerClasses, getTagClasses, getPricingCardClasses, getContainerClasses, getGridClasses, getStackClasses, getDropdownClasses, getDropdownMenuClasses, getFooterClasses, getModalOverlayClasses, getModalClasses, getNavClasses, getSidebarClasses, getSidebarToggleClasses, getSidebarBackdropClasses, getToastClasses, getToastIconClasses, getTooltipClasses, getSectionClasses } from '@phcdevworks/spectre-ui';
1
+ import { getButtonClasses, getInputLabelClasses, getInputClasses, getTextareaClasses, getSelectClasses, getCheckboxClasses, getRadioClasses, getLabelClasses, getFieldsetLegendClasses, getFieldsetClasses, getBadgeClasses, getCardClasses, getIconBoxClasses, getRatingClasses, getRatingStarClasses, getRatingStarsClasses, getRatingTextClasses, getTestimonialClasses, getAlertClasses, getAvatarClasses, getSpinnerClasses, getTagClasses, getPricingCardClasses, getContainerClasses, getGridClasses, getStackClasses, getDropdownClasses, getDropdownMenuClasses, getFooterClasses, getModalOverlayClasses, getModalClasses, getNavClasses, getNavLinkClasses, getSidebarClasses, getSidebarToggleClasses, getSidebarBackdropClasses, getToastClasses, getToastIconClasses, getTooltipClasses, getTextClasses, getSectionClasses } from '@phcdevworks/spectre-ui';
2
2
  import { LitElement, html, nothing } from 'lit';
3
3
  import { ifDefined } from 'lit/directives/if-defined.js';
4
4
  import { live } from 'lit/directives/live.js';
5
+ import { literal, html as html$1 } from 'lit/static-html.js';
5
6
 
6
7
  // src/utils/form.ts
7
8
  var spectreInputSizes = ["sm", "md", "lg"];
@@ -201,6 +202,48 @@ function isTooltipPlacement(value) {
201
202
  value
202
203
  );
203
204
  }
205
+ var spectreTextSizes = [
206
+ "xs",
207
+ "sm",
208
+ "md",
209
+ "lg",
210
+ "xl",
211
+ "2xl",
212
+ "3xl",
213
+ "4xl",
214
+ "5xl",
215
+ "6xl"
216
+ ];
217
+ function isTextSize(value) {
218
+ return spectreTextSizes.includes(value);
219
+ }
220
+ var spectreTextVariants = [
221
+ "default",
222
+ "muted",
223
+ "subtle",
224
+ "meta",
225
+ "brand"
226
+ ];
227
+ function isTextVariant(value) {
228
+ return spectreTextVariants.includes(value);
229
+ }
230
+ var spectreTextFamilies = ["sans", "serif", "mono"];
231
+ function isTextFamily(value) {
232
+ return spectreTextFamilies.includes(value);
233
+ }
234
+ var spectreTextLevels = [
235
+ "h1",
236
+ "h2",
237
+ "h3",
238
+ "h4",
239
+ "h5",
240
+ "h6",
241
+ "p",
242
+ "span"
243
+ ];
244
+ function isTextLevel(value) {
245
+ return spectreTextLevels.includes(value);
246
+ }
204
247
  function normalizeInt(value, fallback, min = 0) {
205
248
  if (value == null || typeof value !== "number" || !Number.isInteger(value) || value < min) {
206
249
  return fallback;
@@ -3407,6 +3450,208 @@ function defineSpectreNav(tagName = "sp-nav") {
3407
3450
  customElements.define(tagName, SpectreNavElement);
3408
3451
  return SpectreNavElement;
3409
3452
  }
3453
+ var SpectreNavItemElement = class extends SpectreBaseElement {
3454
+ constructor() {
3455
+ super(...arguments);
3456
+ this.dropdown = false;
3457
+ this.href = void 0;
3458
+ this.label = void 0;
3459
+ this.open = false;
3460
+ this.placement = "bottom-start";
3461
+ this.triggerContent = [];
3462
+ this.menuContent = [];
3463
+ this.handleDocumentClick = (event) => {
3464
+ if (!this.open) {
3465
+ return;
3466
+ }
3467
+ if (!event.composedPath().includes(this)) {
3468
+ this.close();
3469
+ }
3470
+ };
3471
+ this.handleDocumentKeydown = (event) => {
3472
+ if (event.key === "Escape" && this.open) {
3473
+ this.close();
3474
+ this.triggerElement?.focus();
3475
+ }
3476
+ };
3477
+ }
3478
+ get id() {
3479
+ return super.id;
3480
+ }
3481
+ set id(value) {
3482
+ super.id = value;
3483
+ }
3484
+ get title() {
3485
+ return super.title;
3486
+ }
3487
+ set title(value) {
3488
+ super.title = value;
3489
+ }
3490
+ isInternalNode(node) {
3491
+ if (node.nodeType !== Node.ELEMENT_NODE) {
3492
+ return false;
3493
+ }
3494
+ const el = node;
3495
+ return el.hasAttribute("data-sp-nav-item-menu") || el.hasAttribute("data-sp-nav-item-trigger");
3496
+ }
3497
+ syncProjectedContent() {
3498
+ const nextTriggerContent = [];
3499
+ const nextMenuContent = [];
3500
+ this.childNodes.forEach((node) => {
3501
+ if (this.isInternalNode(node)) {
3502
+ return;
3503
+ }
3504
+ const isTriggerSlot = node.nodeType === Node.ELEMENT_NODE && node.getAttribute("slot") === "trigger";
3505
+ if (isTriggerSlot) {
3506
+ nextTriggerContent.push(node);
3507
+ } else {
3508
+ nextMenuContent.push(node);
3509
+ }
3510
+ });
3511
+ const changed = nextTriggerContent.length !== this.triggerContent.length || nextTriggerContent.some((n, i) => n !== this.triggerContent[i]) || nextMenuContent.length !== this.menuContent.length || nextMenuContent.some((n, i) => n !== this.menuContent[i]);
3512
+ if (changed) {
3513
+ this.triggerContent = nextTriggerContent;
3514
+ this.menuContent = nextMenuContent;
3515
+ }
3516
+ return changed;
3517
+ }
3518
+ get hasTriggerContent() {
3519
+ return hasMeaningfulContent(this.triggerContent);
3520
+ }
3521
+ get hasMenuContent() {
3522
+ return hasMeaningfulContent(this.menuContent);
3523
+ }
3524
+ connectedCallback() {
3525
+ super.connectedCallback();
3526
+ this.syncProjectedContent();
3527
+ this.startContentObserver();
3528
+ document.addEventListener("click", this.handleDocumentClick);
3529
+ document.addEventListener("keydown", this.handleDocumentKeydown);
3530
+ }
3531
+ disconnectedCallback() {
3532
+ this.stopContentObserver();
3533
+ document.removeEventListener("click", this.handleDocumentClick);
3534
+ document.removeEventListener("keydown", this.handleDocumentKeydown);
3535
+ super.disconnectedCallback();
3536
+ }
3537
+ update(changedProperties) {
3538
+ this.stopContentObserver();
3539
+ super.update(changedProperties);
3540
+ this.startContentObserver();
3541
+ }
3542
+ startContentObserver() {
3543
+ if (this.contentObserver) {
3544
+ return;
3545
+ }
3546
+ this.contentObserver = new MutationObserver(() => {
3547
+ if (this.syncProjectedContent()) {
3548
+ this.requestUpdate();
3549
+ }
3550
+ });
3551
+ this.contentObserver.observe(this, { childList: true });
3552
+ }
3553
+ stopContentObserver() {
3554
+ this.contentObserver?.disconnect();
3555
+ this.contentObserver = void 0;
3556
+ }
3557
+ willUpdate(changedProperties) {
3558
+ if (changedProperties.has("dropdown") && this.dropdown == null) {
3559
+ this.dropdown = false;
3560
+ }
3561
+ if (changedProperties.has("open") && this.open == null) {
3562
+ this.open = false;
3563
+ }
3564
+ if (changedProperties.has("placement") && (this.placement == null || !isDropdownPlacement(this.placement))) {
3565
+ this.placement = "bottom-start";
3566
+ }
3567
+ }
3568
+ get triggerElement() {
3569
+ return this.querySelector("[data-sp-nav-item-trigger]");
3570
+ }
3571
+ toggle() {
3572
+ if (this.open) {
3573
+ this.close();
3574
+ } else {
3575
+ this.openMenu();
3576
+ }
3577
+ }
3578
+ openMenu() {
3579
+ if (this.open) {
3580
+ return;
3581
+ }
3582
+ this.open = true;
3583
+ this.dispatchEvent(new CustomEvent("sp-open", { bubbles: true }));
3584
+ }
3585
+ close() {
3586
+ if (!this.open) {
3587
+ return;
3588
+ }
3589
+ this.open = false;
3590
+ this.dispatchEvent(new CustomEvent("sp-close", { bubbles: true }));
3591
+ }
3592
+ get wrapperClasses() {
3593
+ return getDropdownClasses();
3594
+ }
3595
+ get menuClasses() {
3596
+ return getDropdownMenuClasses({
3597
+ open: this.open ?? false,
3598
+ placement: this.placement
3599
+ });
3600
+ }
3601
+ get navLinkClasses() {
3602
+ return getNavLinkClasses();
3603
+ }
3604
+ renderLink() {
3605
+ return html`<a
3606
+ aria-label="${ifDefined(this.forwardedAriaLabel)}"
3607
+ class="${this.navLinkClasses}"
3608
+ href="${ifDefined(this.href)}"
3609
+ id="${ifDefined(this.id || void 0)}"
3610
+ title="${ifDefined(this.title || void 0)}"
3611
+ >${this.hasMenuContent ? this.menuContent : this.label}</a
3612
+ >`;
3613
+ }
3614
+ renderDropdown() {
3615
+ return html`<div
3616
+ class="${this.wrapperClasses}"
3617
+ id="${ifDefined(this.id || void 0)}"
3618
+ title="${ifDefined(this.title || void 0)}"
3619
+ >
3620
+ <button
3621
+ aria-expanded="${this.open ? "true" : "false"}"
3622
+ aria-haspopup="true"
3623
+ aria-label="${ifDefined(this.forwardedAriaLabel ?? this.label)}"
3624
+ class="${this.navLinkClasses}"
3625
+ data-sp-nav-item-trigger
3626
+ type="button"
3627
+ @click="${() => this.toggle()}"
3628
+ >
3629
+ ${this.hasTriggerContent ? this.triggerContent : this.label}
3630
+ </button>
3631
+ <div class="${this.menuClasses}" data-sp-nav-item-menu>
3632
+ ${this.hasMenuContent ? this.menuContent : nothing}
3633
+ </div>
3634
+ </div>`;
3635
+ }
3636
+ render() {
3637
+ return this.dropdown ? this.renderDropdown() : this.renderLink();
3638
+ }
3639
+ };
3640
+ SpectreNavItemElement.properties = {
3641
+ dropdown: { type: Boolean, reflect: true },
3642
+ href: { type: String },
3643
+ label: { type: String },
3644
+ open: { type: Boolean, reflect: true },
3645
+ placement: { type: String, reflect: true }
3646
+ };
3647
+ function defineSpectreNavItem(tagName = "sp-nav-item") {
3648
+ const existingElement = customElements.get(tagName);
3649
+ if (existingElement) {
3650
+ return existingElement;
3651
+ }
3652
+ customElements.define(tagName, SpectreNavItemElement);
3653
+ return SpectreNavItemElement;
3654
+ }
3410
3655
  var SpectreSidebarElement = class extends SpectreProjectableElement {
3411
3656
  constructor() {
3412
3657
  super(...arguments);
@@ -3853,6 +4098,91 @@ function defineSpectreTooltip(tagName = "sp-tooltip") {
3853
4098
  customElements.define(tagName, SpectreTooltipElement);
3854
4099
  return SpectreTooltipElement;
3855
4100
  }
4101
+ var LEVEL_TAGS = {
4102
+ h1: literal`h1`,
4103
+ h2: literal`h2`,
4104
+ h3: literal`h3`,
4105
+ h4: literal`h4`,
4106
+ h5: literal`h5`,
4107
+ h6: literal`h6`,
4108
+ p: literal`p`,
4109
+ span: literal`span`
4110
+ };
4111
+ var SpectreTextElement = class extends SpectreProjectableElement {
4112
+ constructor() {
4113
+ super(...arguments);
4114
+ this.level = "p";
4115
+ this.size = "md";
4116
+ this.variant = "default";
4117
+ }
4118
+ willUpdate(changedProperties) {
4119
+ if (changedProperties.has("family") && !isTextFamily(this.family)) {
4120
+ this.family = void 0;
4121
+ }
4122
+ if (changedProperties.has("level") && !isTextLevel(this.level)) {
4123
+ this.level = "p";
4124
+ }
4125
+ if (changedProperties.has("size") && !isTextSize(this.size)) {
4126
+ this.size = "md";
4127
+ }
4128
+ if (changedProperties.has("variant") && !isTextVariant(this.variant)) {
4129
+ this.variant = "default";
4130
+ }
4131
+ }
4132
+ get id() {
4133
+ return super.id;
4134
+ }
4135
+ set id(value) {
4136
+ super.id = value;
4137
+ }
4138
+ get title() {
4139
+ return super.title;
4140
+ }
4141
+ set title(value) {
4142
+ super.title = value;
4143
+ }
4144
+ getContentContainer() {
4145
+ return this.querySelector("[data-sp-text-native]");
4146
+ }
4147
+ isInternalNode(node) {
4148
+ if (node.nodeType !== Node.ELEMENT_NODE) {
4149
+ return false;
4150
+ }
4151
+ const el = node;
4152
+ return el.hasAttribute("data-sp-text-native");
4153
+ }
4154
+ render() {
4155
+ const tag = LEVEL_TAGS[this.level ?? "p"];
4156
+ const textClasses = getTextClasses({
4157
+ ...this.family !== void 0 && { family: this.family },
4158
+ size: this.size ?? "md",
4159
+ variant: this.variant ?? "default"
4160
+ });
4161
+ return html$1`<${tag}
4162
+ aria-describedby="${ifDefined(this.forwardedAriaDescribedBy)}"
4163
+ aria-label="${ifDefined(this.forwardedAriaLabel)}"
4164
+ aria-labelledby="${ifDefined(this.forwardedAriaLabelledBy)}"
4165
+ class="${textClasses}"
4166
+ data-sp-text-native
4167
+ id="${ifDefined(this.id || void 0)}"
4168
+ title="${ifDefined(this.title || void 0)}"
4169
+ >${this.hasProjectedContent ? this.projectedContent : nothing}</${tag}>`;
4170
+ }
4171
+ };
4172
+ SpectreTextElement.properties = {
4173
+ family: { type: String, reflect: true },
4174
+ level: { type: String, reflect: true },
4175
+ size: { type: String, reflect: true },
4176
+ variant: { type: String, reflect: true }
4177
+ };
4178
+ function defineSpectreText(tagName = "sp-text") {
4179
+ const existingElement = customElements.get(tagName);
4180
+ if (existingElement) {
4181
+ return existingElement;
4182
+ }
4183
+ customElements.define(tagName, SpectreTextElement);
4184
+ return SpectreTextElement;
4185
+ }
3856
4186
 
3857
4187
  // src/index.ts
3858
4188
  function defineSpectreComponents() {
@@ -3882,11 +4212,13 @@ function defineSpectreComponents() {
3882
4212
  defineSpectreFooter();
3883
4213
  defineSpectreModal();
3884
4214
  defineSpectreNav();
4215
+ defineSpectreNavItem();
3885
4216
  defineSpectreSidebar();
3886
4217
  defineSpectreToast();
3887
4218
  defineSpectreTooltip();
4219
+ defineSpectreText();
3888
4220
  }
3889
4221
 
3890
- export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreDropdownElement, SpectreFieldsetElement, SpectreFooterElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreModalElement, SpectreNavElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreDropdown, defineSpectreFieldset, defineSpectreFooter, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreModal, defineSpectreNav, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreTextarea, defineSpectreToast, defineSpectreTooltip, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreContainerMaxWidths, spectreDropdownPlacements, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants, spectreToastVariants, spectreTooltipPlacements };
4222
+ export { SpectreAlertElement, SpectreAvatarElement, SpectreBadgeElement, SpectreButtonElement, SpectreCardElement, SpectreCheckboxElement, SpectreContainerElement, SpectreDropdownElement, SpectreFieldsetElement, SpectreFooterElement, SpectreGridElement, SpectreIconBoxElement, SpectreInputElement, SpectreLabelElement, SpectreModalElement, SpectreNavElement, SpectreNavItemElement, SpectrePricingCardElement, SpectreRadioElement, SpectreRatingElement, SpectreSectionElement, SpectreSelectElement, SpectreSidebarElement, SpectreSpinnerElement, SpectreStackElement, SpectreTagElement, SpectreTestimonialElement, SpectreTextElement, SpectreTextareaElement, SpectreToastElement, SpectreTooltipElement, defineSpectreAlert, defineSpectreAvatar, defineSpectreBadge, defineSpectreButton, defineSpectreCard, defineSpectreCheckbox, defineSpectreComponents, defineSpectreContainer, defineSpectreDropdown, defineSpectreFieldset, defineSpectreFooter, defineSpectreGrid, defineSpectreIconBox, defineSpectreInput, defineSpectreLabel, defineSpectreModal, defineSpectreNav, defineSpectreNavItem, defineSpectrePricingCard, defineSpectreRadio, defineSpectreRating, defineSpectreSection, defineSpectreSelect, defineSpectreSidebar, defineSpectreSpinner, defineSpectreStack, defineSpectreTag, defineSpectreTestimonial, defineSpectreText, defineSpectreTextarea, defineSpectreToast, defineSpectreTooltip, spectreInputSizes as spectreAlertSizes, spectreAlertVariants, spectreAvatarShapes, spectreAvatarSizes, spectreInputSizes as spectreBadgeSizes, spectreBadgeVariants, spectreInputSizes as spectreButtonSizes, spectreButtonTypes, spectreButtonVariants, spectreCardVariants, spectreContainerMaxWidths, spectreDropdownPlacements, spectreGridColumns, spectreGridGaps, spectreInputSizes as spectreIconBoxSizes, spectreIconBoxVariants, spectreInputSizes, spectreInputTypes, spectreInputSizes as spectreRatingSizes, spectreInputSizes as spectreSpinnerSizes, spectreSpinnerVariants, spectreStackAligns, spectreStackBases, spectreStackDirections, spectreInputSizes as spectreTagSizes, spectreTagVariants, spectreTestimonialVariants, spectreTextFamilies, spectreTextLevels, spectreTextSizes, spectreTextVariants, spectreToastVariants, spectreTooltipPlacements };
3891
4223
  //# sourceMappingURL=index.js.map
3892
4224
  //# sourceMappingURL=index.js.map