@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.14

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 (226) hide show
  1. package/dist/components/alert/alert.constants.d.ts +3 -0
  2. package/dist/components/alert/alert.constants.d.ts.map +1 -0
  3. package/dist/components/alert/alert.constants.js +2 -0
  4. package/dist/components/alert/alert.constants.js.map +1 -0
  5. package/dist/components/alert/alert.d.ts +4 -3
  6. package/dist/components/alert/alert.d.ts.map +1 -1
  7. package/dist/components/alert/alert.js +21 -11
  8. package/dist/components/alert/alert.js.map +1 -0
  9. package/dist/components/badge/badge.constants.d.ts +3 -0
  10. package/dist/components/badge/badge.constants.d.ts.map +1 -0
  11. package/dist/components/badge/badge.constants.js +2 -0
  12. package/dist/components/badge/badge.constants.js.map +1 -0
  13. package/dist/components/badge/badge.d.ts +1 -1
  14. package/dist/components/badge/badge.d.ts.map +1 -1
  15. package/dist/components/badge/badge.js +3 -2
  16. package/dist/components/badge/badge.js.map +1 -0
  17. package/dist/components/breadcrumb/breadcrumb.d.ts.map +1 -1
  18. package/dist/components/breadcrumb/breadcrumb.js +2 -1
  19. package/dist/components/breadcrumb/breadcrumb.js.map +1 -0
  20. package/dist/components/button/button.constants.d.ts +7 -0
  21. package/dist/components/button/button.constants.d.ts.map +1 -0
  22. package/dist/components/button/button.constants.js +4 -0
  23. package/dist/components/button/button.constants.js.map +1 -0
  24. package/dist/components/button/button.d.ts +8 -4
  25. package/dist/components/button/button.d.ts.map +1 -1
  26. package/dist/components/button/button.js +181 -137
  27. package/dist/components/button/button.js.map +1 -0
  28. package/dist/components/button-group/button-group.d.ts +1 -0
  29. package/dist/components/button-group/button-group.d.ts.map +1 -1
  30. package/dist/components/button-group/button-group.js +17 -21
  31. package/dist/components/button-group/button-group.js.map +1 -0
  32. package/dist/components/checkbox/checkbox.constants.d.ts +3 -0
  33. package/dist/components/checkbox/checkbox.constants.d.ts.map +1 -0
  34. package/dist/components/checkbox/checkbox.constants.js +2 -0
  35. package/dist/components/checkbox/checkbox.constants.js.map +1 -0
  36. package/dist/components/checkbox/checkbox.d.ts +5 -1
  37. package/dist/components/checkbox/checkbox.d.ts.map +1 -1
  38. package/dist/components/checkbox/checkbox.js +21 -5
  39. package/dist/components/checkbox/checkbox.js.map +1 -0
  40. package/dist/components/code-block/code-block.d.ts +7 -7
  41. package/dist/components/code-block/code-block.d.ts.map +1 -1
  42. package/dist/components/code-block/code-block.js +130 -66
  43. package/dist/components/code-block/code-block.js.map +1 -0
  44. package/dist/components/content-card/content-card.d.ts.map +1 -1
  45. package/dist/components/content-card/content-card.js +10 -15
  46. package/dist/components/content-card/content-card.js.map +1 -0
  47. package/dist/components/divider/divider.constants.d.ts +5 -0
  48. package/dist/components/divider/divider.constants.d.ts.map +1 -0
  49. package/dist/components/divider/divider.constants.js +3 -0
  50. package/dist/components/divider/divider.constants.js.map +1 -0
  51. package/dist/components/divider/divider.d.ts +4 -2
  52. package/dist/components/divider/divider.d.ts.map +1 -1
  53. package/dist/components/divider/divider.js +18 -9
  54. package/dist/components/divider/divider.js.map +1 -0
  55. package/dist/components/drawer/drawer.d.ts +7 -4
  56. package/dist/components/drawer/drawer.d.ts.map +1 -1
  57. package/dist/components/drawer/drawer.js +73 -30
  58. package/dist/components/drawer/drawer.js.map +1 -0
  59. package/dist/components/field/field.d.ts +2 -2
  60. package/dist/components/field/field.d.ts.map +1 -1
  61. package/dist/components/field/field.js +8 -9
  62. package/dist/components/field/field.js.map +1 -0
  63. package/dist/components/footer/footer.d.ts +8 -1
  64. package/dist/components/footer/footer.d.ts.map +1 -1
  65. package/dist/components/footer/footer.js +42 -12
  66. package/dist/components/footer/footer.js.map +1 -0
  67. package/dist/components/form/form-step.js +1 -0
  68. package/dist/components/form/form-step.js.map +1 -0
  69. package/dist/components/form/form.d.ts +3 -0
  70. package/dist/components/form/form.d.ts.map +1 -1
  71. package/dist/components/form/form.js +109 -69
  72. package/dist/components/form/form.js.map +1 -0
  73. package/dist/components/grid/grid-row.d.ts +3 -3
  74. package/dist/components/grid/grid-row.d.ts.map +1 -1
  75. package/dist/components/grid/grid-row.js +36 -22
  76. package/dist/components/grid/grid-row.js.map +1 -0
  77. package/dist/components/grid/grid.d.ts +2 -2
  78. package/dist/components/grid/grid.d.ts.map +1 -1
  79. package/dist/components/grid/grid.js +5 -2
  80. package/dist/components/grid/grid.js.map +1 -0
  81. package/dist/components/icon/icon-paths.d.ts +161 -86
  82. package/dist/components/icon/icon-paths.d.ts.map +1 -1
  83. package/dist/components/icon/icon-paths.js +176 -106
  84. package/dist/components/icon/icon-paths.js.map +1 -0
  85. package/dist/components/icon/icon.d.ts +1 -1
  86. package/dist/components/icon/icon.d.ts.map +1 -1
  87. package/dist/components/icon/icon.js +6 -5
  88. package/dist/components/icon/icon.js.map +1 -0
  89. package/dist/components/input/input.d.ts +9 -0
  90. package/dist/components/input/input.d.ts.map +1 -1
  91. package/dist/components/input/input.js +30 -37
  92. package/dist/components/input/input.js.map +1 -0
  93. package/dist/components/link/link.d.ts +6 -6
  94. package/dist/components/link/link.d.ts.map +1 -1
  95. package/dist/components/link/link.js +42 -19
  96. package/dist/components/link/link.js.map +1 -0
  97. package/dist/components/metadata/metadata.d.ts +3 -3
  98. package/dist/components/metadata/metadata.d.ts.map +1 -1
  99. package/dist/components/metadata/metadata.js +23 -20
  100. package/dist/components/metadata/metadata.js.map +1 -0
  101. package/dist/components/modal/modal.d.ts +4 -16
  102. package/dist/components/modal/modal.d.ts.map +1 -1
  103. package/dist/components/modal/modal.js +99 -62
  104. package/dist/components/modal/modal.js.map +1 -0
  105. package/dist/components/page-layout/page-layout.d.ts +4 -3
  106. package/dist/components/page-layout/page-layout.d.ts.map +1 -1
  107. package/dist/components/page-layout/page-layout.js +95 -68
  108. package/dist/components/page-layout/page-layout.js.map +1 -0
  109. package/dist/components/radio/radio.d.ts +8 -0
  110. package/dist/components/radio/radio.d.ts.map +1 -1
  111. package/dist/components/radio/radio.js +8 -12
  112. package/dist/components/radio/radio.js.map +1 -0
  113. package/dist/components/radio-group/radio-group.d.ts +6 -1
  114. package/dist/components/radio-group/radio-group.d.ts.map +1 -1
  115. package/dist/components/radio-group/radio-group.js +44 -18
  116. package/dist/components/radio-group/radio-group.js.map +1 -0
  117. package/dist/components/router/router.d.ts +5 -7
  118. package/dist/components/router/router.d.ts.map +1 -1
  119. package/dist/components/router/router.js +54 -38
  120. package/dist/components/router/router.js.map +1 -0
  121. package/dist/components/select/select.d.ts +1 -3
  122. package/dist/components/select/select.d.ts.map +1 -1
  123. package/dist/components/select/select.js +14 -5
  124. package/dist/components/select/select.js.map +1 -0
  125. package/dist/components/skeleton/skeleton.d.ts +3 -2
  126. package/dist/components/skeleton/skeleton.d.ts.map +1 -1
  127. package/dist/components/skeleton/skeleton.js +10 -13
  128. package/dist/components/skeleton/skeleton.js.map +1 -0
  129. package/dist/components/switch/switch.d.ts +12 -0
  130. package/dist/components/switch/switch.d.ts.map +1 -1
  131. package/dist/components/switch/switch.js +28 -22
  132. package/dist/components/switch/switch.js.map +1 -0
  133. package/dist/components/table/data-table.d.ts +3 -25
  134. package/dist/components/table/data-table.d.ts.map +1 -1
  135. package/dist/components/table/data-table.js +211 -146
  136. package/dist/components/table/data-table.js.map +1 -0
  137. package/dist/components/table/table.d.ts +3 -3
  138. package/dist/components/table/table.d.ts.map +1 -1
  139. package/dist/components/table/table.js +39 -20
  140. package/dist/components/table/table.js.map +1 -0
  141. package/dist/components/tabs/tab-panel.d.ts +3 -1
  142. package/dist/components/tabs/tab-panel.d.ts.map +1 -1
  143. package/dist/components/tabs/tab-panel.js +21 -11
  144. package/dist/components/tabs/tab-panel.js.map +1 -0
  145. package/dist/components/tabs/tab.d.ts +5 -1
  146. package/dist/components/tabs/tab.d.ts.map +1 -1
  147. package/dist/components/tabs/tab.js +46 -28
  148. package/dist/components/tabs/tab.js.map +1 -0
  149. package/dist/components/tabs/tabs.d.ts +4 -0
  150. package/dist/components/tabs/tabs.d.ts.map +1 -1
  151. package/dist/components/tabs/tabs.js +76 -13
  152. package/dist/components/tabs/tabs.js.map +1 -0
  153. package/dist/components/textarea/textarea.d.ts +13 -0
  154. package/dist/components/textarea/textarea.d.ts.map +1 -1
  155. package/dist/components/textarea/textarea.js +59 -13
  156. package/dist/components/textarea/textarea.js.map +1 -0
  157. package/dist/components/theme-toggle/theme-toggle.constants.d.ts +3 -0
  158. package/dist/components/theme-toggle/theme-toggle.constants.d.ts.map +1 -0
  159. package/dist/components/theme-toggle/theme-toggle.constants.js +2 -0
  160. package/dist/components/theme-toggle/theme-toggle.constants.js.map +1 -0
  161. package/dist/components/theme-toggle/theme-toggle.d.ts +3 -2
  162. package/dist/components/theme-toggle/theme-toggle.d.ts.map +1 -1
  163. package/dist/components/theme-toggle/theme-toggle.js +46 -19
  164. package/dist/components/theme-toggle/theme-toggle.js.map +1 -0
  165. package/dist/components/vertical-nav/vertical-nav-group.d.ts +5 -2
  166. package/dist/components/vertical-nav/vertical-nav-group.d.ts.map +1 -1
  167. package/dist/components/vertical-nav/vertical-nav-group.js +50 -14
  168. package/dist/components/vertical-nav/vertical-nav-group.js.map +1 -0
  169. package/dist/components/vertical-nav/vertical-nav-item.d.ts +3 -2
  170. package/dist/components/vertical-nav/vertical-nav-item.d.ts.map +1 -1
  171. package/dist/components/vertical-nav/vertical-nav-item.js +30 -8
  172. package/dist/components/vertical-nav/vertical-nav-item.js.map +1 -0
  173. package/dist/styles/index.css +48 -17
  174. package/dist/styles/reset.js +1 -0
  175. package/dist/styles/reset.js.map +1 -0
  176. package/package.json +2 -1
  177. package/src/components/alert/alert.constants.ts +2 -0
  178. package/src/components/alert/alert.ts +24 -15
  179. package/src/components/badge/badge.constants.ts +2 -0
  180. package/src/components/badge/badge.ts +3 -4
  181. package/src/components/breadcrumb/breadcrumb.ts +2 -2
  182. package/src/components/button/button.constants.ts +8 -0
  183. package/src/components/button/button.ts +184 -144
  184. package/src/components/button-group/button-group.ts +18 -22
  185. package/src/components/checkbox/checkbox.constants.ts +2 -0
  186. package/src/components/checkbox/checkbox.ts +33 -18
  187. package/src/components/code-block/code-block.ts +151 -84
  188. package/src/components/content-card/content-card.ts +10 -16
  189. package/src/components/divider/divider.constants.ts +5 -0
  190. package/src/components/divider/divider.ts +22 -11
  191. package/src/components/drawer/drawer.ts +79 -34
  192. package/src/components/field/field.ts +9 -11
  193. package/src/components/footer/footer.ts +43 -12
  194. package/src/components/form/form.ts +121 -84
  195. package/src/components/grid/grid-row.ts +45 -32
  196. package/src/components/grid/grid.ts +7 -4
  197. package/src/components/icon/icon-paths.ts +175 -106
  198. package/src/components/icon/icon.ts +6 -6
  199. package/src/components/input/input.ts +32 -42
  200. package/src/components/link/link.ts +45 -21
  201. package/src/components/metadata/metadata.ts +26 -24
  202. package/src/components/modal/modal.ts +108 -74
  203. package/src/components/page-layout/page-layout.ts +97 -72
  204. package/src/components/radio/radio.ts +8 -13
  205. package/src/components/radio-group/radio-group.ts +45 -21
  206. package/src/components/router/router.ts +73 -50
  207. package/src/components/select/select.ts +18 -19
  208. package/src/components/skeleton/skeleton.ts +14 -14
  209. package/src/components/switch/switch.ts +31 -25
  210. package/src/components/table/data-table.ts +248 -177
  211. package/src/components/table/table.ts +52 -29
  212. package/src/components/tabs/tab-panel.ts +25 -13
  213. package/src/components/tabs/tab.ts +58 -33
  214. package/src/components/tabs/tabs.ts +77 -15
  215. package/src/components/textarea/textarea.ts +63 -15
  216. package/src/components/theme-toggle/theme-toggle.constants.ts +2 -0
  217. package/src/components/theme-toggle/theme-toggle.ts +47 -22
  218. package/src/components/vertical-nav/vertical-nav-group.ts +57 -18
  219. package/src/components/vertical-nav/vertical-nav-item.ts +35 -12
  220. package/src/styles/globals.css +27 -4
  221. package/src/styles/theme.css +38 -32
  222. package/tsconfig.json +2 -1
  223. package/dist/components/card/card.d.ts +0 -11
  224. package/dist/components/card/card.d.ts.map +0 -1
  225. package/dist/components/card/card.js +0 -54
  226. package/src/components/card/card.ts +0 -53
@@ -19,38 +19,63 @@ let StTextarea = class StTextarea extends LitElement {
19
19
  // Textarea specific properties
20
20
  this.rows = 4;
21
21
  this.resize = "vertical";
22
+ // 🚀 FEATURE: Auto-resize support
23
+ this.autoResize = false;
22
24
  // Validation
23
25
  this.required = false;
24
26
  // States
25
27
  this.disabled = false;
26
28
  this.invalid = false;
27
29
  this.readonly = false;
30
+ this._defaultValue = "";
28
31
  this._internals = this.attachInternals();
29
- // 1. Trigger error state if the user clicks away and the field is invalid
30
32
  this.addEventListener("focusout", () => {
31
- this.invalid = !this._textareaEl.validity.valid;
33
+ if (this._textareaEl) {
34
+ this.invalid = !this._textareaEl.validity.valid;
35
+ }
32
36
  });
33
- // 2. Trigger error state if the st-form tries to submit and fails
34
37
  this.addEventListener("invalid", () => {
35
38
  this.invalid = true;
36
39
  });
37
40
  }
41
+ firstUpdated(changedProperties) {
42
+ super.firstUpdated(changedProperties);
43
+ this._defaultValue = this.value;
44
+ if (this.autoResize)
45
+ this._adjustHeight();
46
+ }
38
47
  updated(changedProperties) {
39
48
  super.updated(changedProperties);
40
49
  if (changedProperties.has("value")) {
41
50
  this._internals.setFormValue(this.value);
51
+ if (this.autoResize)
52
+ this._adjustHeight();
42
53
  }
43
54
  this._syncValidity();
44
55
  }
56
+ async _adjustHeight() {
57
+ await this.updateComplete;
58
+ if (!this._textareaEl)
59
+ return;
60
+ // Reset height to auto to force scrollHeight to shrink if text is deleted
61
+ this._textareaEl.style.height = "auto";
62
+ this._textareaEl.style.height = `${this._textareaEl.scrollHeight}px`;
63
+ }
45
64
  _syncValidity() {
46
65
  if (!this._textareaEl)
47
66
  return;
48
67
  this._internals.setValidity(this._textareaEl.validity, this._textareaEl.validationMessage, this._textareaEl);
49
68
  }
50
69
  formResetCallback() {
51
- this.value = "";
52
- this._internals.setFormValue("");
53
- this.updateComplete.then(() => this._syncValidity());
70
+ // 🚀 FIX: Revert to the initial value instead of hardcoding an empty string
71
+ this.value = this._defaultValue;
72
+ this.invalid = false;
73
+ this._internals.setFormValue(this.value);
74
+ this.updateComplete.then(() => {
75
+ this._syncValidity();
76
+ if (this.autoResize)
77
+ this._adjustHeight();
78
+ });
54
79
  }
55
80
  checkValidity() {
56
81
  return this._internals.checkValidity();
@@ -64,12 +89,16 @@ let StTextarea = class StTextarea extends LitElement {
64
89
  if (this.invalid && target.validity.valid) {
65
90
  this.invalid = false;
66
91
  }
92
+ if (this.autoResize) {
93
+ this._adjustHeight();
94
+ }
67
95
  this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
68
96
  }
69
97
  _handleChange(e) {
70
98
  this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
71
99
  }
72
100
  render() {
101
+ const helpTextId = "help-text";
73
102
  return html `
74
103
  <div class="form-control">
75
104
  ${this.label ? html `<label for="textarea">${this.label}</label>` : ""}
@@ -85,16 +114,21 @@ let StTextarea = class StTextarea extends LitElement {
85
114
  ?required=${this.required}
86
115
  minlength=${ifDefined(this.minlength)}
87
116
  maxlength=${ifDefined(this.maxlength)}
117
+ spellcheck=${ifDefined(this.spellcheck)}
118
+ aria-invalid=${this.invalid ? "true" : "false"}
119
+ aria-describedby=${ifDefined(this.helpText ? helpTextId : undefined)}
88
120
  @input=${this._handleInput}
89
121
  @change=${this._handleChange}
90
122
  ></textarea>
91
123
 
92
- ${this.helpText ? html `<div class="help-text">${this.helpText}</div>` : ""}
124
+ ${this.helpText ? html `<div id=${helpTextId} class="help-text">${this.helpText}</div>` : ""}
93
125
  </div>
94
126
  `;
95
127
  }
96
128
  };
97
129
  StTextarea.formAssociated = true;
130
+ // 🚀 FIX: Forwards host clicks and keyboard tabs to the hidden native input
131
+ StTextarea.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
98
132
  StTextarea.styles = [
99
133
  resetStyles,
100
134
  css `
@@ -116,6 +150,7 @@ StTextarea.styles = [
116
150
 
117
151
  textarea {
118
152
  width: 100%;
153
+ box-sizing: border-box; /* 🚀 FIX: Prevent padding from causing overflow */
119
154
  padding: var(--st-spacing-sm) var(--st-spacing-md);
120
155
  font-size: var(--st-font-size-base);
121
156
  font-family: inherit;
@@ -126,12 +161,10 @@ StTextarea.styles = [
126
161
  transition:
127
162
  border-color 0.2s ease,
128
163
  box-shadow 0.2s ease;
129
-
130
- /* Map the resize property */
131
164
  resize: vertical;
132
165
  }
133
166
 
134
- /* Dynamically handle resize constraints based on the host attribute */
167
+ /* Dynamically handle resize constraints */
135
168
  :host([resize="none"]) textarea {
136
169
  resize: none;
137
170
  }
@@ -142,6 +175,12 @@ StTextarea.styles = [
142
175
  resize: both;
143
176
  }
144
177
 
178
+ /* Auto-resize overrides manual resize */
179
+ :host([auto-resize]) textarea {
180
+ resize: none;
181
+ overflow-y: hidden;
182
+ }
183
+
145
184
  textarea::placeholder {
146
185
  color: var(--st-color-text-muted);
147
186
  }
@@ -154,15 +193,15 @@ StTextarea.styles = [
154
193
 
155
194
  /* Validation States */
156
195
  :host([invalid]) textarea {
157
- border-color: var(--st-color-error);
196
+ border-color: var(--st-color-error, #dc2626);
158
197
  }
159
198
 
160
199
  :host([invalid]) textarea:focus {
161
- box-shadow: 0 0 0 1px var(--st-color-error);
200
+ box-shadow: 0 0 0 1px var(--st-color-error, #dc2626);
162
201
  }
163
202
 
164
203
  :host([invalid]) .help-text {
165
- color: var(--st-color-error);
204
+ color: var(--st-color-error, #dc2626);
166
205
  }
167
206
 
168
207
  /* Disabled & Readonly */
@@ -207,6 +246,12 @@ __decorate([
207
246
  __decorate([
208
247
  property({ type: String, reflect: true })
209
248
  ], StTextarea.prototype, "resize", void 0);
249
+ __decorate([
250
+ property({ type: Boolean, attribute: "auto-resize" })
251
+ ], StTextarea.prototype, "autoResize", void 0);
252
+ __decorate([
253
+ property({ type: String, attribute: "spellcheck" })
254
+ ], StTextarea.prototype, "spellcheckAttr", void 0);
210
255
  __decorate([
211
256
  property({ type: Boolean, reflect: true })
212
257
  ], StTextarea.prototype, "required", void 0);
@@ -229,3 +274,4 @@ StTextarea = __decorate([
229
274
  customElement("st-textarea")
230
275
  ], StTextarea);
231
276
  export { StTextarea };
277
+ //# sourceMappingURL=textarea.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ export declare const themeModes: readonly ["light", "system", "dark"];
2
+ export type ThemeMode = typeof themeModes[number];
3
+ //# sourceMappingURL=theme-toggle.constants.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-toggle.constants.d.ts","sourceRoot":"","sources":["../../../src/components/theme-toggle/theme-toggle.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,YAAI,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAC/D,MAAM,MAAM,SAAS,GAAG,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export const themeModes = ["light", "system", "dark"];
2
+ //# sourceMappingURL=theme-toggle.constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-toggle.constants.js","sourceRoot":"","sources":["../../../src/components/theme-toggle/theme-toggle.constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC"}
@@ -1,10 +1,11 @@
1
1
  import { LitElement } from "lit";
2
- export type ThemeMode = "light" | "system" | "dark";
2
+ import { ThemeMode } from "./theme-toggle.constants.js";
3
3
  export declare class StThemeToggle extends LitElement {
4
4
  theme: ThemeMode;
5
+ auto: boolean;
5
6
  static styles: import("lit").CSSResult[];
6
- private _handleThemeChange;
7
7
  connectedCallback(): void;
8
+ private _handleThemeChange;
8
9
  render(): import("lit-html").TemplateResult<1>;
9
10
  }
10
11
  declare global {
@@ -1 +1 @@
1
- {"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/theme-toggle/theme-toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEpD,qBACa,aAAc,SAAQ,UAAU;IACF,KAAK,EAAE,SAAS,CAAY;IAErE,MAAM,CAAC,MAAM,4BAkDX;IAEF,OAAO,CAAC,kBAAkB;IAajB,iBAAiB,SAOzB;IAED,MAAM,yCAuCL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
1
+ {"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/theme-toggle/theme-toggle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAC,SAAS,EAAC,MAAM,6BAA6B,CAAC;AAEtD,qBACa,aAAc,SAAQ,UAAU;IACF,KAAK,EAAE,SAAS,CAAY;IAG1C,IAAI,UAAS;IAExC,MAAM,CAAC,MAAM,4BA8CX;IAEO,iBAAiB,SA0BzB;IAED,OAAO,CAAC,kBAAkB;IAoB1B,MAAM,yCAwCL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
@@ -11,33 +11,60 @@ let StThemeToggle = class StThemeToggle extends LitElement {
11
11
  constructor() {
12
12
  super(...arguments);
13
13
  this.theme = "system";
14
+ // 🚀 FEATURE: Automatically applies the theme to the document and saves to localStorage
15
+ this.auto = false;
16
+ }
17
+ connectedCallback() {
18
+ super.connectedCallback();
19
+ // 🚀 FIX: Semantically group the buttons for screen readers
20
+ this.setAttribute("role", "group");
21
+ this.setAttribute("aria-label", "Theme preference");
22
+ // If auto is enabled, try loading from localStorage first
23
+ if (this.auto) {
24
+ try {
25
+ const savedTheme = localStorage.getItem("st-theme");
26
+ if (savedTheme) {
27
+ this.theme = savedTheme;
28
+ document.documentElement.setAttribute("data-theme", savedTheme);
29
+ return;
30
+ }
31
+ }
32
+ catch (e) {
33
+ // Silently fail if localStorage is blocked (e.g., incognito mode)
34
+ }
35
+ }
36
+ // Fallback to checking the document root for a pre-rendered theme
37
+ const rootTheme = document.documentElement.getAttribute("data-theme");
38
+ if (rootTheme) {
39
+ this.theme = rootTheme;
40
+ }
14
41
  }
15
42
  _handleThemeChange(newTheme) {
16
43
  this.theme = newTheme;
17
- // Dispatch an event so the consuming app knows to update the document root
44
+ // Apply automatically if the feature is enabled
45
+ if (this.auto) {
46
+ document.documentElement.setAttribute("data-theme", newTheme);
47
+ try {
48
+ localStorage.setItem("st-theme", newTheme);
49
+ }
50
+ catch (e) { }
51
+ }
18
52
  this.dispatchEvent(new CustomEvent("st-theme-change", {
19
53
  detail: { theme: newTheme },
20
54
  bubbles: true,
21
55
  composed: true,
22
56
  }));
23
57
  }
24
- connectedCallback() {
25
- super.connectedCallback();
26
- // Check the html tag for the theme injected by your blocking <head> script
27
- const rootTheme = document.documentElement.getAttribute("data-theme");
28
- if (rootTheme) {
29
- this.theme = rootTheme;
30
- }
31
- }
32
58
  render() {
33
59
  return html `
34
60
  <button
35
61
  aria-pressed=${this.theme === "light"}
62
+ aria-label="Light Mode"
36
63
  title="Light Mode"
37
64
  @click=${() => this._handleThemeChange("light")}
38
65
  >
39
- <!-- Sun Icon -->
40
- <svg viewBox="0 0 24 24">
66
+ <!-- 🚀 FIX: Hide decorative SVGs from the accessibility tree -->
67
+ <svg aria-hidden="true" viewBox="0 0 24 24">
41
68
  <circle cx="12" cy="12" r="5"></circle>
42
69
  <path
43
70
  d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
@@ -47,11 +74,11 @@ let StThemeToggle = class StThemeToggle extends LitElement {
47
74
 
48
75
  <button
49
76
  aria-pressed=${this.theme === "system"}
77
+ aria-label="System Preference"
50
78
  title="System Preference"
51
79
  @click=${() => this._handleThemeChange("system")}
52
80
  >
53
- <!-- Monitor/System Icon -->
54
- <svg viewBox="0 0 24 24">
81
+ <svg aria-hidden="true" viewBox="0 0 24 24">
55
82
  <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
56
83
  <path d="M8 21h8M12 17v4"></path>
57
84
  </svg>
@@ -59,11 +86,11 @@ let StThemeToggle = class StThemeToggle extends LitElement {
59
86
 
60
87
  <button
61
88
  aria-pressed=${this.theme === "dark"}
89
+ aria-label="Dark Mode"
62
90
  title="Dark Mode"
63
91
  @click=${() => this._handleThemeChange("dark")}
64
92
  >
65
- <!-- Moon Icon -->
66
- <svg viewBox="0 0 24 24">
93
+ <svg aria-hidden="true" viewBox="0 0 24 24">
67
94
  <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
68
95
  </svg>
69
96
  </button>
@@ -75,7 +102,6 @@ StThemeToggle.styles = [
75
102
  css `
76
103
  :host {
77
104
  display: inline-flex;
78
- /* Use semantic tokens for the container */
79
105
  background-color: var(--st-color-surface);
80
106
  border: 1px solid var(--st-color-border);
81
107
  border-radius: 999px;
@@ -101,12 +127,9 @@ StThemeToggle.styles = [
101
127
  color: var(--st-color-text);
102
128
  }
103
129
 
104
- /* Active State Styling */
105
130
  button[aria-pressed="true"] {
106
- /* Use the main background color so the active pill "pops" out of the surface */
107
131
  background-color: var(--st-color-bg);
108
132
  color: var(--st-color-primary);
109
- /* Subtle shadow to lift the active pill */
110
133
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
111
134
  }
112
135
 
@@ -124,7 +147,11 @@ StThemeToggle.styles = [
124
147
  __decorate([
125
148
  property({ type: String, reflect: true })
126
149
  ], StThemeToggle.prototype, "theme", void 0);
150
+ __decorate([
151
+ property({ type: Boolean })
152
+ ], StThemeToggle.prototype, "auto", void 0);
127
153
  StThemeToggle = __decorate([
128
154
  customElement("st-theme-toggle")
129
155
  ], StThemeToggle);
130
156
  export { StThemeToggle };
157
+ //# sourceMappingURL=theme-toggle.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"theme-toggle.js","sourceRoot":"","sources":["../../../src/components/theme-toggle/theme-toggle.ts"],"names":[],"mappings":"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"}
@@ -1,15 +1,18 @@
1
- import { LitElement } from 'lit';
1
+ import { LitElement, PropertyValues } from "lit";
2
2
  export declare class StNavGroup extends LitElement {
3
3
  label: string;
4
4
  open: boolean;
5
5
  depth: number;
6
+ private _drawerContent;
6
7
  static styles: import("lit").CSSResult[];
7
8
  private _toggle;
9
+ private _updateChildDepths;
10
+ updated(changedProperties: PropertyValues): void;
8
11
  render(): import("lit-html").TemplateResult<1>;
9
12
  }
10
13
  declare global {
11
14
  interface HTMLElementTagNameMap {
12
- 'st-vertical-nav-group': StNavGroup;
15
+ "st-vertical-nav-group": StNavGroup;
13
16
  }
14
17
  }
15
18
  //# sourceMappingURL=vertical-nav-group.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"vertical-nav-group.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACZ,KAAK,SAAM;IACK,IAAI,UAAS;IAC7B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8EX;IAEF,OAAO,CAAC,OAAO;IAIf,MAAM,yCAcL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,UAAU,CAAC;KACrC;CACF"}
1
+ {"version":3,"file":"vertical-nav-group.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACd,KAAK,SAAM;IACK,IAAI,UAAS;IAC7B,KAAK,SAAK;IAEV,OAAO,CAAC,cAAc,CAAe;IAE/D,MAAM,CAAC,MAAM,4BAoFX;IAEF,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,kBAAkB;IAQjB,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAKjD;IAED,MAAM,yCAuBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,UAAU,CAAC;KACrC;CACF"}
@@ -4,30 +4,56 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
4
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
- import { LitElement, html, css } from 'lit';
8
- import { customElement, property } from 'lit/decorators.js';
9
- import { resetStyles } from '../../styles/reset.js';
7
+ import { LitElement, html, css } from "lit";
8
+ import { customElement, property, query } from "lit/decorators.js";
9
+ import { resetStyles } from "../../styles/reset.js";
10
10
  let StNavGroup = class StNavGroup extends LitElement {
11
11
  constructor() {
12
12
  super(...arguments);
13
- this.label = '';
13
+ this.label = "";
14
14
  this.open = false;
15
15
  this.depth = 0;
16
16
  }
17
17
  _toggle() {
18
18
  this.open = !this.open;
19
+ this.dispatchEvent(new CustomEvent("st-group-toggle", {
20
+ detail: { open: this.open, label: this.label },
21
+ bubbles: true,
22
+ composed: true,
23
+ }));
24
+ }
25
+ _updateChildDepths() {
26
+ // Query 'this' (Light DOM) instead of the Shadow DOM
27
+ const childItems = this.querySelectorAll("st-vertical-nav-item, st-vertical-nav-group");
28
+ childItems.forEach((item) => {
29
+ item.depth = this.depth + 1;
30
+ });
31
+ }
32
+ updated(changedProperties) {
33
+ super.updated(changedProperties);
34
+ if (changedProperties.has("depth")) {
35
+ this._updateChildDepths();
36
+ }
19
37
  }
20
38
  render() {
39
+ const groupId = `nav-group-${this.label.toLowerCase().replace(/\s+/g, "-")}`;
21
40
  return html `
22
- <button @click=${this._toggle} aria-expanded=${this.open} style="--nav-depth: ${this.depth}">
41
+ <button
42
+ @click=${this._toggle}
43
+ aria-expanded=${this.open}
44
+ aria-controls=${groupId}
45
+ style="--nav-depth: ${this.depth}"
46
+ >
23
47
  <slot name="icon"></slot>
24
48
  <span class="label">${this.label}</span>
25
- <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>
49
+ <svg class="chevron" aria-hidden="true" viewBox="0 0 24 24">
50
+ <path d="M6 9l6 6 6-6"></path>
51
+ </svg>
26
52
  </button>
27
-
28
- <div class="drawer">
53
+
54
+ <div id=${groupId} class="drawer" role="region" aria-label=${this.label}>
29
55
  <div class="drawer-content">
30
- <slot></slot>
56
+ <slot @slotchange=${this._updateChildDepths}></slot>
31
57
  </div>
32
58
  </div>
33
59
  `;
@@ -56,14 +82,20 @@ StNavGroup.styles = [
56
82
  font-size: var(--st-font-size-sm);
57
83
  font-weight: var(--st-font-weight-semibold);
58
84
  cursor: pointer;
59
- transition: background-color 0.2s ease, color 0.2s ease;
85
+ transition:
86
+ background-color 0.2s ease,
87
+ color 0.2s ease;
60
88
  }
61
89
 
62
90
  button:hover {
63
- background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
91
+ background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.03));
92
+ }
93
+
94
+ button:focus-visible {
95
+ outline: 2px solid var(--st-color-primary);
96
+ outline-offset: -2px;
64
97
  }
65
98
 
66
- /* Styles for slotted icons */
67
99
  ::slotted([slot="icon"]) {
68
100
  width: 1rem;
69
101
  height: 1rem;
@@ -110,7 +142,7 @@ StNavGroup.styles = [
110
142
  display: flex;
111
143
  flex-direction: column;
112
144
  }
113
- `
145
+ `,
114
146
  ];
115
147
  __decorate([
116
148
  property({ type: String })
@@ -121,7 +153,11 @@ __decorate([
121
153
  __decorate([
122
154
  property({ type: Number })
123
155
  ], StNavGroup.prototype, "depth", void 0);
156
+ __decorate([
157
+ query(".drawer-content")
158
+ ], StNavGroup.prototype, "_drawerContent", void 0);
124
159
  StNavGroup = __decorate([
125
- customElement('st-vertical-nav-group')
160
+ customElement("st-vertical-nav-group")
126
161
  ], StNavGroup);
127
162
  export { StNavGroup };
163
+ //# sourceMappingURL=vertical-nav-group.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"vertical-nav-group.js","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAiB,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACqB,UAAK,GAAG,EAAE,CAAC;QACK,SAAI,GAAG,KAAK,CAAC;QAC7B,UAAK,GAAG,CAAC,CAAC;IA4ItC,CAAC;IAlDS,OAAO;QACb,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,MAAM,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC;YAC5C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,qDAAqD;QACrD,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,6CAA6C,CAAC,CAAC;QACxF,UAAU,CAAC,OAAO,CAAC,CAAC,IAAS,EAAE,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,OAAO,CAAC,iBAAiC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,aAAa,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;QAE7E,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,OAAO;wBACL,IAAI,CAAC,IAAI;wBACT,OAAO;8BACD,IAAI,CAAC,KAAK;;;8BAGV,IAAI,CAAC,KAAK;;;;;;gBAMxB,OAAO,4CAA4C,IAAI,CAAC,KAAK;;8BAE/C,IAAI,CAAC,kBAAkB;;;KAGhD,CAAC;IACJ,CAAC;CACF,CAAA;AAxIQ,iBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFF;CACF,AApFY,CAoFX;AA1FwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCAAY;AACK;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAc;AAC7B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCAAW;AAEF;IAAjC,KAAK,CAAC,iBAAiB,CAAC;kDAAsC;AALpD,UAAU;IADtB,aAAa,CAAC,uBAAuB,CAAC;GAC1B,UAAU,CA+ItB"}
@@ -1,14 +1,15 @@
1
- import { LitElement } from 'lit';
1
+ import { LitElement } from "lit";
2
2
  export declare class StNavItem extends LitElement {
3
3
  href: string;
4
4
  active: boolean;
5
5
  depth: number;
6
6
  static styles: import("lit").CSSResult[];
7
+ private _handleClick;
7
8
  render(): import("lit-html").TemplateResult<1>;
8
9
  }
9
10
  declare global {
10
11
  interface HTMLElementTagNameMap {
11
- 'st-vertical-nav-item': StNavItem;
12
+ "st-vertical-nav-item": StNavItem;
12
13
  }
13
14
  }
14
15
  //# sourceMappingURL=vertical-nav-item.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"vertical-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAO;IACK,MAAM,UAAS;IAC/B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8CX;IAEF,MAAM,yCAOL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,SAAS,CAAC;KACnC;CACF"}
1
+ {"version":3,"file":"vertical-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,qBACa,SAAU,SAAQ,UAAU;IACb,IAAI,SAAO;IACK,MAAM,UAAS;IAC/B,KAAK,SAAK;IAEpC,MAAM,CAAC,MAAM,4BAmDX;IAEF,OAAO,CAAC,YAAY;IAYpB,MAAM,yCAaL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,SAAS,CAAC;KACnC;CACF"}
@@ -4,19 +4,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
4
4
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
5
  return c > 3 && r && Object.defineProperty(target, key, r), r;
6
6
  };
7
- import { LitElement, html, css } from 'lit';
8
- import { customElement, property } from 'lit/decorators.js';
9
- import { resetStyles } from '../../styles/reset.js';
7
+ import { LitElement, html, css } from "lit";
8
+ import { customElement, property } from "lit/decorators.js";
9
+ import { resetStyles } from "../../styles/reset.js";
10
10
  let StNavItem = class StNavItem extends LitElement {
11
11
  constructor() {
12
12
  super(...arguments);
13
- this.href = '#';
13
+ this.href = "#";
14
14
  this.active = false;
15
15
  this.depth = 0;
16
16
  }
17
+ _handleClick(e) {
18
+ // Dispatch a custom event so single-page apps can catch internal route clicks if desired
19
+ const event = new CustomEvent("st-nav-click", {
20
+ detail: { href: this.href },
21
+ bubbles: true,
22
+ composed: true,
23
+ cancelable: true,
24
+ });
25
+ this.dispatchEvent(event);
26
+ }
17
27
  render() {
18
28
  return html `
19
- <a href=${this.href} part="link" style="--nav-depth: ${this.depth}">
29
+ <a
30
+ href=${this.href}
31
+ part="link"
32
+ style="--nav-depth: ${this.depth}"
33
+ aria-current=${this.active ? "page" : "false"}
34
+ @click=${this._handleClick}
35
+ >
20
36
  <slot name="icon"></slot>
21
37
  <slot></slot>
22
38
  </a>
@@ -52,7 +68,12 @@ StNavItem.styles = [
52
68
 
53
69
  a:hover {
54
70
  color: var(--st-color-text);
55
- background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
71
+ background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.03));
72
+ }
73
+
74
+ a:focus-visible {
75
+ outline: 2px solid var(--st-color-primary);
76
+ outline-offset: -2px;
56
77
  }
57
78
 
58
79
  ::slotted([slot="icon"]) {
@@ -68,7 +89,7 @@ StNavItem.styles = [
68
89
  font-weight: var(--st-font-weight-bold);
69
90
  background-color: var(--st-color-primary-light, rgba(98, 0, 238, 0.05));
70
91
  }
71
- `
92
+ `,
72
93
  ];
73
94
  __decorate([
74
95
  property({ type: String })
@@ -80,6 +101,7 @@ __decorate([
80
101
  property({ type: Number })
81
102
  ], StNavItem.prototype, "depth", void 0);
82
103
  StNavItem = __decorate([
83
- customElement('st-vertical-nav-item')
104
+ customElement("st-vertical-nav-item")
84
105
  ], StNavItem);
85
106
  export { StNavItem };
107
+ //# sourceMappingURL=vertical-nav-item.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"vertical-nav-item.js","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAG3C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACqB,SAAI,GAAG,GAAG,CAAC;QACK,WAAM,GAAG,KAAK,CAAC;QAC/B,UAAK,GAAG,CAAC,CAAC;IAiFtC,CAAC;IA1BS,YAAY,CAAC,CAAa;QAChC,yFAAyF;QACzF,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,cAAc,EAAE;YAC5C,MAAM,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC;YACzB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;;8BAEM,IAAI,CAAC,KAAK;uBACjB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBACpC,IAAI,CAAC,YAAY;;;;;KAK7B,CAAC;IACJ,CAAC;CACF,CAAA;AA/EQ,gBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDF;CACF,AAnDY,CAmDX;AAvDwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uCAAY;AACK;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAgB;AAC/B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCAAW;AAHzB,SAAS;IADrB,aAAa,CAAC,sBAAsB,CAAC;GACzB,SAAS,CAoFrB"}