@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.3

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 (168) hide show
  1. package/README.md +8 -0
  2. package/dist/components/alert/alert.d.ts +13 -0
  3. package/dist/components/alert/alert.d.ts.map +1 -0
  4. package/dist/components/alert/alert.js +105 -0
  5. package/dist/components/badge/badge.d.ts +13 -0
  6. package/dist/components/badge/badge.d.ts.map +1 -0
  7. package/dist/components/badge/badge.js +101 -0
  8. package/dist/components/breadcrumb/breadcrumb.d.ts +19 -0
  9. package/dist/components/breadcrumb/breadcrumb.d.ts.map +1 -0
  10. package/dist/components/breadcrumb/breadcrumb.js +99 -0
  11. package/dist/components/button/button.d.ts +23 -0
  12. package/dist/components/button/button.d.ts.map +1 -0
  13. package/dist/components/button/button.js +304 -0
  14. package/dist/components/button-group/button-group.d.ts +6 -0
  15. package/dist/components/button-group/button-group.d.ts.map +1 -0
  16. package/dist/components/button-group/button-group.js +74 -0
  17. package/dist/components/card/card.d.ts +11 -0
  18. package/dist/components/card/card.d.ts.map +1 -0
  19. package/dist/components/card/card.js +54 -0
  20. package/dist/components/checkbox/checkbox.d.ts +28 -0
  21. package/dist/components/checkbox/checkbox.d.ts.map +1 -0
  22. package/dist/components/checkbox/checkbox.js +247 -0
  23. package/dist/components/code-block/code-block.d.ts +20 -0
  24. package/dist/components/code-block/code-block.d.ts.map +1 -0
  25. package/dist/components/code-block/code-block.js +260 -0
  26. package/dist/components/content-card/content-card.d.ts +13 -0
  27. package/dist/components/content-card/content-card.d.ts.map +1 -0
  28. package/dist/components/content-card/content-card.js +140 -0
  29. package/dist/components/divider/divider.d.ts +16 -0
  30. package/dist/components/divider/divider.d.ts.map +1 -0
  31. package/dist/components/divider/divider.js +82 -0
  32. package/dist/components/drawer/drawer.d.ts +22 -0
  33. package/dist/components/drawer/drawer.d.ts.map +1 -0
  34. package/dist/components/drawer/drawer.js +226 -0
  35. package/dist/components/field/field.d.ts +11 -0
  36. package/dist/components/field/field.d.ts.map +1 -0
  37. package/dist/components/field/field.js +32 -0
  38. package/dist/components/footer/footer.d.ts +6 -0
  39. package/dist/components/footer/footer.d.ts.map +1 -0
  40. package/dist/components/footer/footer.js +65 -0
  41. package/dist/components/form/form-step.d.ts +13 -0
  42. package/dist/components/form/form-step.d.ts.map +1 -0
  43. package/dist/components/form/form-step.js +41 -0
  44. package/dist/components/form/form.d.ts +25 -0
  45. package/dist/components/form/form.d.ts.map +1 -0
  46. package/dist/components/form/form.js +358 -0
  47. package/dist/components/grid/grid-row.d.ts +17 -0
  48. package/dist/components/grid/grid-row.d.ts.map +1 -0
  49. package/dist/components/grid/grid-row.js +92 -0
  50. package/dist/components/grid/grid.d.ts +13 -0
  51. package/dist/components/grid/grid.d.ts.map +1 -0
  52. package/dist/components/grid/grid.js +42 -0
  53. package/dist/components/icon/icon-paths.d.ts +132 -0
  54. package/dist/components/icon/icon-paths.d.ts.map +1 -0
  55. package/dist/components/icon/icon-paths.js +137 -0
  56. package/dist/components/icon/icon.d.ts +16 -0
  57. package/dist/components/icon/icon.d.ts.map +1 -0
  58. package/dist/components/icon/icon.js +95 -0
  59. package/dist/components/input/input.d.ts +31 -0
  60. package/dist/components/input/input.d.ts.map +1 -0
  61. package/dist/components/input/input.js +268 -0
  62. package/dist/components/link/link.d.ts +16 -0
  63. package/dist/components/link/link.d.ts.map +1 -0
  64. package/dist/components/link/link.js +116 -0
  65. package/dist/components/metadata/metadata.d.ts +18 -0
  66. package/dist/components/metadata/metadata.d.ts.map +1 -0
  67. package/dist/components/metadata/metadata.js +71 -0
  68. package/dist/components/modal/modal.d.ts +24 -0
  69. package/dist/components/modal/modal.d.ts.map +1 -0
  70. package/dist/components/modal/modal.js +163 -0
  71. package/dist/components/page-layout/page-layout.d.ts +46 -0
  72. package/dist/components/page-layout/page-layout.d.ts.map +1 -0
  73. package/dist/components/page-layout/page-layout.js +697 -0
  74. package/dist/components/radio/radio.d.ts +16 -0
  75. package/dist/components/radio/radio.d.ts.map +1 -0
  76. package/dist/components/radio/radio.js +152 -0
  77. package/dist/components/radio-group/radio-group.d.ts +27 -0
  78. package/dist/components/radio-group/radio-group.d.ts.map +1 -0
  79. package/dist/components/radio-group/radio-group.js +161 -0
  80. package/dist/components/router/router.d.ts +7 -0
  81. package/dist/components/router/router.d.ts.map +1 -0
  82. package/dist/components/router/router.js +37 -0
  83. package/dist/components/select/select.d.ts +16 -0
  84. package/dist/components/select/select.d.ts.map +1 -0
  85. package/dist/components/select/select.js +172 -0
  86. package/dist/components/skeleton/skeleton.d.ts +17 -0
  87. package/dist/components/skeleton/skeleton.d.ts.map +1 -0
  88. package/dist/components/skeleton/skeleton.js +78 -0
  89. package/dist/components/switch/switch.d.ts +25 -0
  90. package/dist/components/switch/switch.d.ts.map +1 -0
  91. package/dist/components/switch/switch.js +185 -0
  92. package/dist/components/table/data-table.d.ts +72 -0
  93. package/dist/components/table/data-table.d.ts.map +1 -0
  94. package/dist/components/table/data-table.js +551 -0
  95. package/dist/components/table/table.d.ts +22 -0
  96. package/dist/components/table/table.d.ts.map +1 -0
  97. package/dist/components/table/table.js +167 -0
  98. package/dist/components/tabs/tab-panel.d.ts +8 -0
  99. package/dist/components/tabs/tab-panel.d.ts.map +1 -0
  100. package/dist/components/tabs/tab-panel.js +46 -0
  101. package/dist/components/tabs/tab.d.ts +9 -0
  102. package/dist/components/tabs/tab.d.ts.map +1 -0
  103. package/dist/components/tabs/tab.js +91 -0
  104. package/dist/components/tabs/tabs.d.ts +14 -0
  105. package/dist/components/tabs/tabs.d.ts.map +1 -0
  106. package/dist/components/tabs/tabs.js +85 -0
  107. package/dist/components/textarea/textarea.d.ts +36 -0
  108. package/dist/components/textarea/textarea.d.ts.map +1 -0
  109. package/dist/components/textarea/textarea.js +231 -0
  110. package/dist/components/theme-toggle/theme-toggle.d.ts +15 -0
  111. package/dist/components/theme-toggle/theme-toggle.d.ts.map +1 -0
  112. package/dist/components/theme-toggle/theme-toggle.js +130 -0
  113. package/dist/components/vertical-nav/vertical-nav-group.d.ts +10 -0
  114. package/dist/components/vertical-nav/vertical-nav-group.d.ts.map +1 -0
  115. package/dist/components/vertical-nav/vertical-nav-group.js +127 -0
  116. package/dist/components/vertical-nav/vertical-nav-item.d.ts +9 -0
  117. package/dist/components/vertical-nav/vertical-nav-item.d.ts.map +1 -0
  118. package/dist/components/vertical-nav/vertical-nav-item.js +85 -0
  119. package/dist/styles/index.css +171 -0
  120. package/dist/styles/reset.d.ts +2 -0
  121. package/dist/styles/reset.d.ts.map +1 -0
  122. package/dist/styles/reset.js +50 -0
  123. package/package.json +7 -2
  124. package/src/components/alert/alert.ts +100 -100
  125. package/src/components/badge/badge.ts +96 -96
  126. package/src/components/breadcrumb/breadcrumb.ts +98 -98
  127. package/src/components/button/button.ts +281 -281
  128. package/src/components/button-group/button-group.ts +67 -67
  129. package/src/components/card/card.ts +52 -52
  130. package/src/components/checkbox/checkbox.ts +238 -238
  131. package/src/components/code-block/code-block.ts +256 -256
  132. package/src/components/content-card/content-card.ts +133 -133
  133. package/src/components/divider/divider.ts +68 -68
  134. package/src/components/drawer/drawer.ts +217 -217
  135. package/src/components/field/field.ts +30 -30
  136. package/src/components/footer/footer.ts +58 -58
  137. package/src/components/form/form-step.ts +32 -32
  138. package/src/components/form/form.ts +376 -376
  139. package/src/components/grid/grid-row.ts +75 -75
  140. package/src/components/grid/grid.ts +36 -36
  141. package/src/components/icon/icon-paths.ts +140 -124
  142. package/src/components/icon/icon.ts +82 -82
  143. package/src/components/input/input.ts +248 -248
  144. package/src/components/link/link.ts +97 -97
  145. package/src/components/metadata/metadata.ts +66 -66
  146. package/src/components/modal/modal.ts +158 -158
  147. package/src/components/page-layout/page-layout.ts +704 -704
  148. package/src/components/radio/radio.ts +142 -142
  149. package/src/components/radio-group/radio-group.ts +157 -157
  150. package/src/components/router/router.ts +46 -46
  151. package/src/components/select/select.ts +161 -161
  152. package/src/components/skeleton/skeleton.ts +67 -67
  153. package/src/components/switch/switch.ts +181 -181
  154. package/src/components/table/data-table.ts +556 -556
  155. package/src/components/table/table.ts +153 -153
  156. package/src/components/tabs/tab-panel.ts +30 -30
  157. package/src/components/tabs/tab.ts +76 -76
  158. package/src/components/tabs/tabs.ts +88 -88
  159. package/src/components/textarea/textarea.ts +215 -215
  160. package/src/components/theme-toggle/theme-toggle.ts +131 -131
  161. package/src/components/vertical-nav/vertical-nav-group.ts +109 -96
  162. package/src/components/vertical-nav/vertical-nav-item.ts +66 -49
  163. package/src/styles/globals.css +58 -58
  164. package/src/styles/index.css +80 -80
  165. package/src/styles/reset.ts +50 -50
  166. package/src/styles/theme.css +58 -58
  167. package/src/styles/typography.css +25 -25
  168. package/tsconfig.json +15 -15
@@ -0,0 +1,358 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
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
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html, css } from "lit";
8
+ import { customElement, property, state, queryAssignedElements, query } from "lit/decorators.js";
9
+ import { resetStyles } from "../../styles/reset.js";
10
+ let StForm = class StForm extends LitElement {
11
+ constructor() {
12
+ super(...arguments);
13
+ this.layout = "vertical";
14
+ this.loading = false;
15
+ this.error = "";
16
+ this._currentStepIndex = 0;
17
+ }
18
+ _handleSlotChange() {
19
+ if (this._stepElements.length > 0) {
20
+ this._updateStepVisibility();
21
+ }
22
+ }
23
+ _updateStepVisibility() {
24
+ this._stepElements.forEach((step, index) => {
25
+ step.active = index === this._currentStepIndex;
26
+ });
27
+ this.requestUpdate();
28
+ }
29
+ _validateCurrentContext() {
30
+ if (this._stepElements.length === 0) {
31
+ return this._formEl.checkValidity();
32
+ }
33
+ const currentStep = this._stepElements[this._currentStepIndex];
34
+ let isValid = true;
35
+ // Find all custom and native form inputs assigned to the current step
36
+ const inputs = Array.from(currentStep.querySelectorAll("*"));
37
+ for (const input of inputs) {
38
+ if (typeof input.checkValidity === "function") {
39
+ if (!input.checkValidity()) {
40
+ // Focus and report on the first invalid element encountered
41
+ if (isValid && typeof input.reportValidity === "function") {
42
+ input.reportValidity();
43
+ }
44
+ isValid = false;
45
+ }
46
+ }
47
+ }
48
+ return isValid;
49
+ }
50
+ _triggerSubmission() {
51
+ // HTML5 method that triggers form validation and fires the native submit event
52
+ this._formEl.requestSubmit();
53
+ }
54
+ _prevStep() {
55
+ if (this._currentStepIndex > 0) {
56
+ this._currentStepIndex--;
57
+ this._updateStepVisibility();
58
+ }
59
+ }
60
+ _extractFormData() {
61
+ const formData = new FormData();
62
+ // Query all light-DOM children that have a 'name' attribute
63
+ const fields = this.querySelectorAll("[name]");
64
+ fields.forEach((field) => {
65
+ // Standard HTML form behavior: ignore disabled fields
66
+ if (field.hasAttribute("disabled"))
67
+ return;
68
+ const isToggle = field.tagName === "ST-RADIO" ||
69
+ field.tagName === "ST-CHECKBOX" ||
70
+ field.getAttribute("type") === "radio" ||
71
+ field.getAttribute("type") === "checkbox";
72
+ if (isToggle) {
73
+ // Only append radios/checkboxes if they are actively checked
74
+ if (field.checked) {
75
+ formData.append(field.name, field.value || "on");
76
+ }
77
+ }
78
+ else if (field.tagName === "INPUT" &&
79
+ field.getAttribute("type") === "file" &&
80
+ field.files) {
81
+ // Handle native file uploads
82
+ Array.from(field.files).forEach((file) => formData.append(field.name, file));
83
+ }
84
+ else if (field.value !== undefined) {
85
+ // Handle st-input, st-select, st-textarea, and standard inputs
86
+ formData.append(field.name, field.value);
87
+ }
88
+ });
89
+ return formData;
90
+ }
91
+ _handleSubmit(e) {
92
+ e.preventDefault();
93
+ e.stopPropagation();
94
+ if (!this._validateCurrentContext())
95
+ return;
96
+ const hasSteps = this._stepElements.length > 0;
97
+ const isLastStep = hasSteps ? this._currentStepIndex === this._stepElements.length - 1 : true;
98
+ if (hasSteps && !isLastStep) {
99
+ this._currentStepIndex++;
100
+ this._updateStepVisibility();
101
+ return;
102
+ }
103
+ // Use our custom extractor to pierce the Shadow DOM boundary
104
+ const formData = this._extractFormData();
105
+ this.dispatchEvent(new CustomEvent("submit", {
106
+ bubbles: true,
107
+ composed: true,
108
+ cancelable: true,
109
+ detail: { formData },
110
+ }));
111
+ }
112
+ render() {
113
+ const hasSteps = this._stepElements?.length > 0;
114
+ const isLastStep = hasSteps ? this._currentStepIndex === this._stepElements.length - 1 : true;
115
+ return html `
116
+ <div class="${hasSteps ? "has-steps" : ""}" aria-busy=${this.loading}>
117
+ ${this.loading
118
+ ? html `
119
+ <div class="loading-overlay">
120
+ <st-icon name="cloud-download" color="primary"></st-icon> Processing...
121
+ </div>
122
+ `
123
+ : ""}
124
+ ${hasSteps
125
+ ? html `
126
+ <div class="progress-nav" role="tablist">
127
+ ${this._stepElements.map((step, index) => {
128
+ const isActive = index === this._currentStepIndex;
129
+ const isCompleted = index < this._currentStepIndex;
130
+ return html `
131
+ <div
132
+ class="step-indicator ${isActive ? "active" : ""} ${isCompleted
133
+ ? "completed"
134
+ : ""}"
135
+ role="tab"
136
+ aria-selected=${isActive}
137
+ >
138
+ <div class="step-circle">
139
+ ${isCompleted
140
+ ? html `<st-icon name="check-circle" size="sm"></st-icon>`
141
+ : html `${index + 1}`}
142
+ </div>
143
+ <span>${step.title || `Step ${index + 1}`}</span>
144
+ </div>
145
+ ${index < this._stepElements.length - 1
146
+ ? html ` <div class="step-connector ${isCompleted ? "completed" : ""}"></div> `
147
+ : ""}
148
+ `;
149
+ })}
150
+ </div>
151
+ `
152
+ : ""}
153
+ ${this.error
154
+ ? html `
155
+ <st-alert color="error" style="margin-bottom: var(--st-spacing-lg);">
156
+ <st-icon slot="icon" name="alert-triangle"></st-icon>
157
+ ${this.error}
158
+ </st-alert>
159
+ `
160
+ : ""}
161
+
162
+ <form @submit=${this._handleSubmit}>
163
+ <slot @slotchange=${this._handleSlotChange}></slot>
164
+
165
+ <div class="form-actions">
166
+ ${hasSteps && this._currentStepIndex > 0
167
+ ? html `
168
+ <st-button
169
+ variant="secondary"
170
+ type="button"
171
+ @click=${this._prevStep}
172
+ ?disabled=${this.loading}
173
+ >
174
+ Back
175
+ </st-button>
176
+ `
177
+ : ""}
178
+
179
+ <!-- Type is "button", but click triggers requestSubmit() on the internal form -->
180
+ <st-button
181
+ color="primary"
182
+ type="button"
183
+ @click=${this._triggerSubmission}
184
+ ?disabled=${this.loading}
185
+ >
186
+ ${this.loading ? "Submitting..." : isLastStep ? "Submit" : "Continue"}
187
+ </st-button>
188
+ </div>
189
+ </form>
190
+ </div>
191
+ `;
192
+ }
193
+ };
194
+ StForm.styles = [
195
+ resetStyles,
196
+ css `
197
+ :host {
198
+ display: block;
199
+ position: relative;
200
+ }
201
+
202
+ form {
203
+ display: flex;
204
+ gap: var(--st-spacing-md);
205
+ }
206
+
207
+ /* ==========================================================
208
+ Layouts
209
+ ========================================================== */
210
+ :host([layout="vertical"]) form {
211
+ flex-direction: column;
212
+ }
213
+
214
+ :host([layout="horizontal"]) form {
215
+ display: grid;
216
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
217
+ align-items: start;
218
+ }
219
+
220
+ :host([layout="inline"]) form {
221
+ flex-direction: row;
222
+ align-items: flex-end;
223
+ flex-wrap: wrap;
224
+ }
225
+
226
+ .has-steps form {
227
+ display: flex;
228
+ flex-direction: column;
229
+ }
230
+
231
+ /* ==========================================================
232
+ Progress Navigation
233
+ ========================================================== */
234
+ .progress-nav {
235
+ display: flex;
236
+ align-items: center;
237
+ margin-bottom: var(--st-spacing-xl);
238
+ padding-bottom: var(--st-spacing-md);
239
+ overflow-x: auto;
240
+ scrollbar-width: none;
241
+ }
242
+
243
+ .step-indicator {
244
+ display: flex;
245
+ align-items: center;
246
+ gap: var(--st-spacing-sm);
247
+ color: var(--st-color-text-muted);
248
+ font-size: var(--st-font-size-sm);
249
+ font-weight: var(--st-font-weight-medium);
250
+ transition: color 0.2s ease;
251
+ }
252
+
253
+ .step-indicator.active {
254
+ color: var(--st-color-text);
255
+ }
256
+ .step-indicator.completed {
257
+ color: var(--st-color-success);
258
+ }
259
+
260
+ .step-circle {
261
+ display: flex;
262
+ align-items: center;
263
+ justify-content: center;
264
+ width: 1.75rem;
265
+ height: 1.75rem;
266
+ border-radius: 50%;
267
+ border: 2px solid currentColor;
268
+ font-size: 0.875rem;
269
+ background-color: var(--st-color-bg);
270
+ transition: all 0.2s ease;
271
+ }
272
+
273
+ .step-indicator.active .step-circle {
274
+ background-color: var(--st-color-primary);
275
+ border-color: var(--st-color-primary);
276
+ color: var(--st-color-bg);
277
+ }
278
+
279
+ .step-indicator.completed .step-circle {
280
+ border-color: var(--st-color-success);
281
+ background-color: var(--st-color-success-bg, transparent);
282
+ }
283
+
284
+ .step-connector {
285
+ flex: 1;
286
+ height: 2px;
287
+ min-width: 24px;
288
+ margin: 0 var(--st-spacing-sm);
289
+ background-color: var(--st-color-border);
290
+ transition: background-color 0.2s ease;
291
+ }
292
+
293
+ .step-connector.completed {
294
+ background-color: var(--st-color-success);
295
+ }
296
+
297
+ /* ==========================================================
298
+ Actions & States
299
+ ========================================================== */
300
+ .form-actions {
301
+ display: flex;
302
+ gap: var(--st-spacing-md);
303
+ margin-top: var(--st-spacing-lg);
304
+ justify-content: flex-end;
305
+ }
306
+
307
+ .loading-overlay {
308
+ position: absolute;
309
+ inset: 0;
310
+ background: rgba(var(--st-color-bg-rgb, 255, 255, 255), 0.7);
311
+ backdrop-filter: blur(2px);
312
+ display: flex;
313
+ align-items: center;
314
+ justify-content: center;
315
+ z-index: 10;
316
+ border-radius: inherit;
317
+ color: var(--st-color-text);
318
+ font-weight: var(--st-font-weight-medium);
319
+ gap: var(--st-spacing-sm);
320
+ }
321
+
322
+ @keyframes pulse {
323
+ 0%,
324
+ 100% {
325
+ opacity: 1;
326
+ }
327
+ 50% {
328
+ opacity: 0.5;
329
+ }
330
+ }
331
+
332
+ .loading-overlay st-icon {
333
+ animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
334
+ }
335
+ `,
336
+ ];
337
+ __decorate([
338
+ property({ type: String, reflect: true })
339
+ ], StForm.prototype, "layout", void 0);
340
+ __decorate([
341
+ property({ type: Boolean, reflect: true })
342
+ ], StForm.prototype, "loading", void 0);
343
+ __decorate([
344
+ property({ type: String })
345
+ ], StForm.prototype, "error", void 0);
346
+ __decorate([
347
+ state()
348
+ ], StForm.prototype, "_currentStepIndex", void 0);
349
+ __decorate([
350
+ queryAssignedElements({ selector: "st-form-step" })
351
+ ], StForm.prototype, "_stepElements", void 0);
352
+ __decorate([
353
+ query("form")
354
+ ], StForm.prototype, "_formEl", void 0);
355
+ StForm = __decorate([
356
+ customElement("st-form")
357
+ ], StForm);
358
+ export { StForm };
@@ -0,0 +1,17 @@
1
+ import { LitElement } from 'lit';
2
+ export declare class StGridRow extends LitElement {
3
+ xs: number;
4
+ sm?: number;
5
+ md?: number;
6
+ lg?: number;
7
+ xl?: number;
8
+ static styles: import("lit").CSSResult[];
9
+ updated(changedProperties: Map<string, any>): void;
10
+ render(): import("lit-html").TemplateResult<1>;
11
+ }
12
+ declare global {
13
+ interface HTMLElementTagNameMap {
14
+ 'st-grid-row': StGridRow;
15
+ }
16
+ }
17
+ //# sourceMappingURL=grid-row.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"grid-row.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACX,EAAE,SAAK;IACP,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IAExC,MAAM,CAAC,MAAM,4BAkCX;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,QAgB1C;IAED,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}
@@ -0,0 +1,92 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
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
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html, css } from 'lit';
8
+ import { customElement, property } from 'lit/decorators.js';
9
+ import { resetStyles } from '../../styles/reset.js';
10
+ let StGridRow = class StGridRow extends LitElement {
11
+ constructor() {
12
+ super(...arguments);
13
+ this.xs = 1;
14
+ }
15
+ updated(changedProperties) {
16
+ super.updated(changedProperties);
17
+ this.style.setProperty('--grid-xs', this.xs.toString());
18
+ if (this.sm !== undefined)
19
+ this.style.setProperty('--grid-sm', this.sm.toString());
20
+ else
21
+ this.style.removeProperty('--grid-sm');
22
+ if (this.md !== undefined)
23
+ this.style.setProperty('--grid-md', this.md.toString());
24
+ else
25
+ this.style.removeProperty('--grid-md');
26
+ if (this.lg !== undefined)
27
+ this.style.setProperty('--grid-lg', this.lg.toString());
28
+ else
29
+ this.style.removeProperty('--grid-lg');
30
+ if (this.xl !== undefined)
31
+ this.style.setProperty('--grid-xl', this.xl.toString());
32
+ else
33
+ this.style.removeProperty('--grid-xl');
34
+ }
35
+ render() {
36
+ return html `<slot></slot>`;
37
+ }
38
+ };
39
+ StGridRow.styles = [
40
+ resetStyles,
41
+ css `
42
+ :host {
43
+ display: grid;
44
+ /* Seamlessly inherits --grid-gap from <st-grid> parent, or falls back */
45
+ gap: var(--grid-gap, var(--st-spacing-md));
46
+ grid-template-columns: repeat(var(--_cols, 1), 1fr);
47
+ width: 100%;
48
+ }
49
+
50
+ /* Mobile First (xs) */
51
+ :host { --_cols: var(--grid-xs, 1); }
52
+
53
+ /* Small (sm: >= 640px) */
54
+ @media (min-width: 640px) {
55
+ :host { --_cols: var(--grid-sm, var(--grid-xs, 1)); }
56
+ }
57
+
58
+ /* Medium (md: >= 768px) */
59
+ @media (min-width: 768px) {
60
+ :host { --_cols: var(--grid-md, var(--grid-sm, var(--grid-xs, 1))); }
61
+ }
62
+
63
+ /* Large (lg: >= 1024px) */
64
+ @media (min-width: 1024px) {
65
+ :host { --_cols: var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1)))); }
66
+ }
67
+
68
+ /* Extra Large (xl: >= 1280px) */
69
+ @media (min-width: 1280px) {
70
+ :host { --_cols: var(--grid-xl, var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1))))); }
71
+ }
72
+ `
73
+ ];
74
+ __decorate([
75
+ property({ type: Number })
76
+ ], StGridRow.prototype, "xs", void 0);
77
+ __decorate([
78
+ property({ type: Number })
79
+ ], StGridRow.prototype, "sm", void 0);
80
+ __decorate([
81
+ property({ type: Number })
82
+ ], StGridRow.prototype, "md", void 0);
83
+ __decorate([
84
+ property({ type: Number })
85
+ ], StGridRow.prototype, "lg", void 0);
86
+ __decorate([
87
+ property({ type: Number })
88
+ ], StGridRow.prototype, "xl", void 0);
89
+ StGridRow = __decorate([
90
+ customElement('st-grid-row')
91
+ ], StGridRow);
92
+ export { StGridRow };
@@ -0,0 +1,13 @@
1
+ import { LitElement } from 'lit';
2
+ export declare class StGrid extends LitElement {
3
+ gap: string;
4
+ static styles: import("lit").CSSResult[];
5
+ updated(changedProperties: Map<string, any>): void;
6
+ render(): import("lit-html").TemplateResult<1>;
7
+ }
8
+ declare global {
9
+ interface HTMLElementTagNameMap {
10
+ 'st-grid': StGrid;
11
+ }
12
+ }
13
+ //# sourceMappingURL=grid.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,MAAO,SAAQ,UAAU;IAER,GAAG,SAA0B;IAEzD,MAAM,CAAC,MAAM,4BAUX;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,QAI1C;IAED,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
@@ -0,0 +1,42 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
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
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { LitElement, html, css } from 'lit';
8
+ import { customElement, property } from 'lit/decorators.js';
9
+ import { resetStyles } from '../../styles/reset.js';
10
+ let StGrid = class StGrid extends LitElement {
11
+ constructor() {
12
+ super(...arguments);
13
+ // Centralized gap control
14
+ this.gap = 'var(--st-spacing-md)';
15
+ }
16
+ updated(changedProperties) {
17
+ super.updated(changedProperties);
18
+ // This CSS variable will automatically cascade down the DOM tree
19
+ this.style.setProperty('--grid-gap', this.gap);
20
+ }
21
+ render() {
22
+ return html `<slot></slot>`;
23
+ }
24
+ };
25
+ StGrid.styles = [
26
+ resetStyles,
27
+ css `
28
+ :host {
29
+ display: grid;
30
+ grid-template-columns: 1fr; /* Stacks the rows vertically */
31
+ gap: var(--grid-gap, var(--st-spacing-md));
32
+ width: 100%;
33
+ }
34
+ `
35
+ ];
36
+ __decorate([
37
+ property({ type: String })
38
+ ], StGrid.prototype, "gap", void 0);
39
+ StGrid = __decorate([
40
+ customElement('st-grid')
41
+ ], StGrid);
42
+ export { StGrid };
@@ -0,0 +1,132 @@
1
+ export declare const iconPaths: {
2
+ "check-circle": {
3
+ outline: import("lit-html").TemplateResult<2>;
4
+ solid: import("lit-html").TemplateResult<2>;
5
+ };
6
+ "alert-triangle": {
7
+ outline: import("lit-html").TemplateResult<2>;
8
+ solid: import("lit-html").TemplateResult<2>;
9
+ };
10
+ info: {
11
+ outline: import("lit-html").TemplateResult<2>;
12
+ solid: import("lit-html").TemplateResult<2>;
13
+ };
14
+ package: {
15
+ outline: import("lit-html").TemplateResult<2>;
16
+ solid: import("lit-html").TemplateResult<2>;
17
+ };
18
+ terminal: {
19
+ outline: import("lit-html").TemplateResult<2>;
20
+ solid: import("lit-html").TemplateResult<2>;
21
+ };
22
+ "cloud-download": {
23
+ outline: import("lit-html").TemplateResult<2>;
24
+ solid: import("lit-html").TemplateResult<2>;
25
+ };
26
+ monitor: {
27
+ outline: import("lit-html").TemplateResult<2>;
28
+ solid: import("lit-html").TemplateResult<2>;
29
+ };
30
+ component: {
31
+ outline: import("lit-html").TemplateResult<2>;
32
+ solid: import("lit-html").TemplateResult<2>;
33
+ };
34
+ "layout-template": {
35
+ outline: import("lit-html").TemplateResult<2>;
36
+ solid: import("lit-html").TemplateResult<2>;
37
+ };
38
+ palette: {
39
+ outline: import("lit-html").TemplateResult<2>;
40
+ solid: import("lit-html").TemplateResult<2>;
41
+ };
42
+ bug: {
43
+ outline: import("lit-html").TemplateResult<2>;
44
+ solid: import("lit-html").TemplateResult<2>;
45
+ };
46
+ support: {
47
+ outline: import("lit-html").TemplateResult<2>;
48
+ solid: import("lit-html").TemplateResult<2>;
49
+ };
50
+ "join-us": {
51
+ outline: import("lit-html").TemplateResult<2>;
52
+ solid: import("lit-html").TemplateResult<2>;
53
+ };
54
+ "chevron-left": {
55
+ outline: import("lit-html").TemplateResult<2>;
56
+ solid: import("lit-html").TemplateResult<2>;
57
+ };
58
+ "chevron-right": {
59
+ outline: import("lit-html").TemplateResult<2>;
60
+ solid: import("lit-html").TemplateResult<2>;
61
+ };
62
+ discord: {
63
+ outline: import("lit-html").TemplateResult<2>;
64
+ solid: import("lit-html").TemplateResult<2>;
65
+ };
66
+ envelope: {
67
+ outline: import("lit-html").TemplateResult<2>;
68
+ solid: import("lit-html").TemplateResult<2>;
69
+ };
70
+ button: {
71
+ outline: import("lit-html").TemplateResult<2>;
72
+ solid: import("lit-html").TemplateResult<2>;
73
+ };
74
+ "pointer-click": {
75
+ outline: import("lit-html").TemplateResult<2>;
76
+ solid: import("lit-html").TemplateResult<2>;
77
+ };
78
+ checkbox: {
79
+ outline: import("lit-html").TemplateResult<2>;
80
+ solid: import("lit-html").TemplateResult<2>;
81
+ };
82
+ input: {
83
+ outline: import("lit-html").TemplateResult<2>;
84
+ solid: import("lit-html").TemplateResult<2>;
85
+ };
86
+ "check-box": {
87
+ outline: import("lit-html").TemplateResult<2>;
88
+ solid: import("lit-html").TemplateResult<2>;
89
+ };
90
+ github: {
91
+ outline: import("lit-html").TemplateResult<2>;
92
+ solid: import("lit-html").TemplateResult<2>;
93
+ };
94
+ link: {
95
+ outline: import("lit-html").TemplateResult<2>;
96
+ solid: import("lit-html").TemplateResult<2>;
97
+ };
98
+ "layout-single-column": {
99
+ outline: import("lit-html").TemplateResult<2>;
100
+ solid: import("lit-html").TemplateResult<2>;
101
+ };
102
+ "layout-content-sidebar": {
103
+ outline: import("lit-html").TemplateResult<2>;
104
+ solid: import("lit-html").TemplateResult<2>;
105
+ };
106
+ "layout-app-shell": {
107
+ outline: import("lit-html").TemplateResult<2>;
108
+ solid: import("lit-html").TemplateResult<2>;
109
+ };
110
+ "layout-three-column": {
111
+ outline: import("lit-html").TemplateResult<2>;
112
+ solid: import("lit-html").TemplateResult<2>;
113
+ };
114
+ calender: {
115
+ outline: import("lit-html").TemplateResult<2>;
116
+ solid: import("lit-html").TemplateResult<2>;
117
+ };
118
+ user: {
119
+ outline: import("lit-html").TemplateResult<2>;
120
+ solid: import("lit-html").TemplateResult<2>;
121
+ };
122
+ home: {
123
+ outline: import("lit-html").TemplateResult<2>;
124
+ solid: import("lit-html").TemplateResult<2>;
125
+ };
126
+ "circle-cross": {
127
+ outline: import("lit-html").TemplateResult<2>;
128
+ solid: import("lit-html").TemplateResult<2>;
129
+ };
130
+ };
131
+ export type IconName = keyof typeof iconPaths;
132
+ //# sourceMappingURL=icon-paths.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-paths.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon-paths.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;IACpB,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,iBAAiB;QACf,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,GAAG;QACD,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QAIP,KAAK;;IAKP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,KAAK;QACH,OAAO;QACP,KAAK;;IAEP,WAAW;QACT,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,sBAAsB;QACpB,OAAO;QACP,KAAK;;IAEP,wBAAwB;QACtB,OAAO;QACP,KAAK;;IAEP,kBAAkB;QAChB,OAAO;QACP,KAAK;;IAEP,qBAAqB;QACnB,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,cAAc;QACZ,OAAO;QACP,KAAK;;CAER,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC"}