@sondor-technology/sondor-components 1.0.4 → 1.0.6

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 (220) 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 +6 -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 +12 -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 +107 -67
  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.js +1 -0
  82. package/dist/components/icon/icon-paths.js.map +1 -0
  83. package/dist/components/icon/icon.js +1 -0
  84. package/dist/components/icon/icon.js.map +1 -0
  85. package/dist/components/input/input.d.ts +14 -0
  86. package/dist/components/input/input.d.ts.map +1 -1
  87. package/dist/components/input/input.js +30 -37
  88. package/dist/components/input/input.js.map +1 -0
  89. package/dist/components/link/link.d.ts +6 -6
  90. package/dist/components/link/link.d.ts.map +1 -1
  91. package/dist/components/link/link.js +42 -19
  92. package/dist/components/link/link.js.map +1 -0
  93. package/dist/components/metadata/metadata.d.ts +3 -3
  94. package/dist/components/metadata/metadata.d.ts.map +1 -1
  95. package/dist/components/metadata/metadata.js +23 -20
  96. package/dist/components/metadata/metadata.js.map +1 -0
  97. package/dist/components/modal/modal.d.ts +4 -16
  98. package/dist/components/modal/modal.d.ts.map +1 -1
  99. package/dist/components/modal/modal.js +99 -62
  100. package/dist/components/modal/modal.js.map +1 -0
  101. package/dist/components/page-layout/page-layout.d.ts +4 -3
  102. package/dist/components/page-layout/page-layout.d.ts.map +1 -1
  103. package/dist/components/page-layout/page-layout.js +96 -69
  104. package/dist/components/page-layout/page-layout.js.map +1 -0
  105. package/dist/components/radio/radio.d.ts +8 -0
  106. package/dist/components/radio/radio.d.ts.map +1 -1
  107. package/dist/components/radio/radio.js +8 -12
  108. package/dist/components/radio/radio.js.map +1 -0
  109. package/dist/components/radio-group/radio-group.d.ts +6 -1
  110. package/dist/components/radio-group/radio-group.d.ts.map +1 -1
  111. package/dist/components/radio-group/radio-group.js +44 -18
  112. package/dist/components/radio-group/radio-group.js.map +1 -0
  113. package/dist/components/router/router.d.ts +5 -7
  114. package/dist/components/router/router.d.ts.map +1 -1
  115. package/dist/components/router/router.js +54 -38
  116. package/dist/components/router/router.js.map +1 -0
  117. package/dist/components/select/select.d.ts +41 -7
  118. package/dist/components/select/select.d.ts.map +1 -1
  119. package/dist/components/select/select.js +467 -150
  120. package/dist/components/select/select.js.map +1 -0
  121. package/dist/components/skeleton/skeleton.d.ts +3 -2
  122. package/dist/components/skeleton/skeleton.d.ts.map +1 -1
  123. package/dist/components/skeleton/skeleton.js +10 -13
  124. package/dist/components/skeleton/skeleton.js.map +1 -0
  125. package/dist/components/switch/switch.d.ts +12 -0
  126. package/dist/components/switch/switch.d.ts.map +1 -1
  127. package/dist/components/switch/switch.js +28 -22
  128. package/dist/components/switch/switch.js.map +1 -0
  129. package/dist/components/table/data-table.d.ts +3 -25
  130. package/dist/components/table/data-table.d.ts.map +1 -1
  131. package/dist/components/table/data-table.js +211 -146
  132. package/dist/components/table/data-table.js.map +1 -0
  133. package/dist/components/table/table.d.ts +3 -3
  134. package/dist/components/table/table.d.ts.map +1 -1
  135. package/dist/components/table/table.js +39 -20
  136. package/dist/components/table/table.js.map +1 -0
  137. package/dist/components/tabs/tab-panel.d.ts +8 -1
  138. package/dist/components/tabs/tab-panel.d.ts.map +1 -1
  139. package/dist/components/tabs/tab-panel.js +21 -11
  140. package/dist/components/tabs/tab-panel.js.map +1 -0
  141. package/dist/components/tabs/tab.d.ts +10 -1
  142. package/dist/components/tabs/tab.d.ts.map +1 -1
  143. package/dist/components/tabs/tab.js +46 -28
  144. package/dist/components/tabs/tab.js.map +1 -0
  145. package/dist/components/tabs/tabs.d.ts +9 -0
  146. package/dist/components/tabs/tabs.d.ts.map +1 -1
  147. package/dist/components/tabs/tabs.js +76 -13
  148. package/dist/components/tabs/tabs.js.map +1 -0
  149. package/dist/components/textarea/textarea.d.ts +13 -0
  150. package/dist/components/textarea/textarea.d.ts.map +1 -1
  151. package/dist/components/textarea/textarea.js +59 -13
  152. package/dist/components/textarea/textarea.js.map +1 -0
  153. package/dist/components/theme-toggle/theme-toggle.constants.d.ts +3 -0
  154. package/dist/components/theme-toggle/theme-toggle.constants.d.ts.map +1 -0
  155. package/dist/components/theme-toggle/theme-toggle.constants.js +2 -0
  156. package/dist/components/theme-toggle/theme-toggle.constants.js.map +1 -0
  157. package/dist/components/theme-toggle/theme-toggle.d.ts +3 -2
  158. package/dist/components/theme-toggle/theme-toggle.d.ts.map +1 -1
  159. package/dist/components/theme-toggle/theme-toggle.js +46 -19
  160. package/dist/components/theme-toggle/theme-toggle.js.map +1 -0
  161. package/dist/components/vertical-nav/vertical-nav-group.d.ts +5 -2
  162. package/dist/components/vertical-nav/vertical-nav-group.d.ts.map +1 -1
  163. package/dist/components/vertical-nav/vertical-nav-group.js +50 -14
  164. package/dist/components/vertical-nav/vertical-nav-group.js.map +1 -0
  165. package/dist/components/vertical-nav/vertical-nav-item.d.ts +3 -2
  166. package/dist/components/vertical-nav/vertical-nav-item.d.ts.map +1 -1
  167. package/dist/components/vertical-nav/vertical-nav-item.js +30 -8
  168. package/dist/components/vertical-nav/vertical-nav-item.js.map +1 -0
  169. package/dist/styles/index.css +50 -17
  170. package/dist/styles/reset.js +1 -0
  171. package/dist/styles/reset.js.map +1 -0
  172. package/package.json +2 -1
  173. package/src/components/alert/alert.constants.ts +2 -0
  174. package/src/components/alert/alert.ts +24 -15
  175. package/src/components/badge/badge.constants.ts +2 -0
  176. package/src/components/badge/badge.ts +3 -4
  177. package/src/components/breadcrumb/breadcrumb.ts +2 -2
  178. package/src/components/button/button.constants.ts +8 -0
  179. package/src/components/button/button.ts +184 -144
  180. package/src/components/button-group/button-group.ts +23 -21
  181. package/src/components/checkbox/checkbox.constants.ts +2 -0
  182. package/src/components/checkbox/checkbox.ts +33 -18
  183. package/src/components/code-block/code-block.ts +157 -84
  184. package/src/components/content-card/content-card.ts +10 -16
  185. package/src/components/divider/divider.constants.ts +5 -0
  186. package/src/components/divider/divider.ts +22 -11
  187. package/src/components/drawer/drawer.ts +79 -34
  188. package/src/components/field/field.ts +9 -11
  189. package/src/components/footer/footer.ts +43 -12
  190. package/src/components/form/form.ts +120 -83
  191. package/src/components/grid/grid-row.ts +45 -32
  192. package/src/components/grid/grid.ts +7 -4
  193. package/src/components/input/input.ts +37 -41
  194. package/src/components/link/link.ts +45 -21
  195. package/src/components/metadata/metadata.ts +26 -24
  196. package/src/components/modal/modal.ts +108 -74
  197. package/src/components/page-layout/page-layout.ts +98 -73
  198. package/src/components/radio/radio.ts +8 -13
  199. package/src/components/radio-group/radio-group.ts +45 -21
  200. package/src/components/router/router.ts +73 -50
  201. package/src/components/select/select.ts +502 -131
  202. package/src/components/skeleton/skeleton.ts +14 -14
  203. package/src/components/switch/switch.ts +31 -25
  204. package/src/components/table/data-table.ts +248 -177
  205. package/src/components/table/table.ts +52 -29
  206. package/src/components/tabs/tab-panel.ts +30 -13
  207. package/src/components/tabs/tab.ts +64 -33
  208. package/src/components/tabs/tabs.ts +82 -14
  209. package/src/components/textarea/textarea.ts +63 -15
  210. package/src/components/theme-toggle/theme-toggle.constants.ts +2 -0
  211. package/src/components/theme-toggle/theme-toggle.ts +47 -22
  212. package/src/components/vertical-nav/vertical-nav-group.ts +57 -18
  213. package/src/components/vertical-nav/vertical-nav-item.ts +35 -12
  214. package/src/styles/globals.css +27 -4
  215. package/src/styles/theme.css +39 -31
  216. package/tsconfig.json +2 -1
  217. package/dist/components/card/card.d.ts +0 -11
  218. package/dist/components/card/card.d.ts.map +0 -1
  219. package/dist/components/card/card.js +0 -54
  220. package/src/components/card/card.ts +0 -53
@@ -4,15 +4,15 @@ 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 StTable = class StTable extends LitElement {
11
11
  constructor() {
12
12
  super(...arguments);
13
13
  this.columns = [];
14
14
  this.data = [];
15
- this.mode = 'horizontal';
15
+ this.mode = "horizontal";
16
16
  this.striped = false;
17
17
  this.hoverable = false;
18
18
  this.dense = false;
@@ -20,20 +20,31 @@ let StTable = class StTable extends LitElement {
20
20
  render() {
21
21
  return html `
22
22
  <div class="table-wrapper">
23
- <table>
24
- <thead>
25
- <tr>
26
- ${this.columns.map(col => html `<th scope="col">${col.header}</th>`)}
23
+ <!-- 🚀 FIX: Explicit ARIA roles map to preserve semantics when CSS 'display' changes -->
24
+ <table role="table">
25
+ <thead role="rowgroup">
26
+ <tr role="row">
27
+ ${this.columns.map((col) => html `<th role="columnheader" scope="col">${col.header}</th>`)}
27
28
  </tr>
28
29
  </thead>
29
- <tbody>
30
- ${this.data.map(row => html `
31
- <tr>
32
- ${this.columns.map(col => html `
33
- <td data-label=${col.header}>${row[col.key]}</td>
34
- `)}
35
- </tr>
36
- `)}
30
+ <tbody role="rowgroup">
31
+ ${this.data.length === 0
32
+ ? html `
33
+ <tr role="row">
34
+ <td role="cell" colspan=${this.columns.length} class="empty-state">
35
+ No data available.
36
+ </td>
37
+ </tr>
38
+ `
39
+ : this.data.map((row) => html `
40
+ <tr role="row">
41
+ ${this.columns.map(
42
+ // 🚀 FIX: Nullish coalescing prevents printing "undefined" for sparse data objects
43
+ (col) => html `
44
+ <td role="cell" data-label=${col.header}>${row[col.key] ?? ""}</td>
45
+ `)}
46
+ </tr>
47
+ `)}
37
48
  </tbody>
38
49
  </table>
39
50
  </div>
@@ -82,11 +93,11 @@ StTable.styles = [
82
93
  }
83
94
 
84
95
  :host([striped]) tbody tr:nth-of-type(odd) {
85
- background-color: var(--st-color-surface-muted);
96
+ background-color: var(--st-color-surface-muted, #f8fafc);
86
97
  }
87
98
 
88
99
  :host([hoverable]) tbody tr:hover {
89
- background-color: var(--st-color-surface-hover);
100
+ background-color: var(--st-color-surface-hover, #f1f5f9);
90
101
  }
91
102
 
92
103
  /* ==========================================================
@@ -141,7 +152,14 @@ StTable.styles = [
141
152
  padding-right: var(--st-spacing-md);
142
153
  color: var(--st-color-text-muted);
143
154
  }
144
- `
155
+
156
+ .empty-state {
157
+ text-align: center;
158
+ padding: 2rem !important;
159
+ color: var(--st-color-text-muted);
160
+ font-style: italic;
161
+ }
162
+ `,
145
163
  ];
146
164
  __decorate([
147
165
  property({ type: Array })
@@ -162,6 +180,7 @@ __decorate([
162
180
  property({ type: Boolean, reflect: true })
163
181
  ], StTable.prototype, "dense", void 0);
164
182
  StTable = __decorate([
165
- customElement('st-table')
183
+ customElement("st-table")
166
184
  ], StTable);
167
185
  export { StTable };
186
+ //# sourceMappingURL=table.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.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;AAU3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACoB,YAAO,GAAkB,EAAE,CAAC;QAC5B,SAAI,GAA0B,EAAE,CAAC;QAEjB,SAAI,GAAc,YAAY,CAAC;QAC9B,YAAO,GAAG,KAAK,CAAC;QAChB,cAAS,GAAG,KAAK,CAAC;QAClB,UAAK,GAAG,KAAK,CAAC;IAuJ1D,CAAC;IAtCC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;gBAMC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA,uCAAuC,GAAG,CAAC,MAAM,OAAO,CACtE;;;;cAID,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC;YACtB,CAAC,CAAC,IAAI,CAAA;;8CAE0B,IAAI,CAAC,OAAO,CAAC,MAAM;;;;iBAIhD;YACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CACX,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAEP,IAAI,CAAC,OAAO,CAAC,GAAG;YAChB,mFAAmF;YACnF,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;uDACkB,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE;yBAC9D,CACF;;mBAEJ,CACF;;;;KAIZ,CAAC;IACJ,CAAC;CACF,CAAA;AArJQ,cAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;CACF,AA7GY,CA6GX;AArHuB;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;wCAA6B;AAC5B;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;qCAAkC;AAEjB;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAAgC;AAC9B;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAiB;AAChB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAmB;AAClB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;sCAAe;AAP7C,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA8JnB"}
@@ -1,8 +1,15 @@
1
- import { LitElement } from 'lit';
1
+ import { LitElement, PropertyValues } from "lit";
2
2
  export declare class StTabPanel extends LitElement {
3
3
  name: string;
4
4
  active: boolean;
5
5
  static styles: import("lit").CSSResult[];
6
+ connectedCallback(): void;
7
+ updated(changedProperties: PropertyValues): void;
6
8
  render(): import("lit-html").TemplateResult<1>;
7
9
  }
10
+ declare global {
11
+ interface HTMLElementTagNameMap {
12
+ "st-tab-panel": StTabPanel;
13
+ }
14
+ }
8
15
  //# sourceMappingURL=tab-panel.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACG,IAAI,SAAM;IACT,MAAM,UAAS;IAE3D,MAAM,CAAC,MAAM,4BAYX;IAEF,MAAM,yCAML;CACF"}
1
+ {"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACC,IAAI,SAAM;IACT,MAAM,UAAS;IAEzD,MAAM,CAAC,MAAM,4BAYX;IAEF,iBAAiB,SAMhB;IAEQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAKjD;IAED,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}
@@ -4,21 +4,30 @@ 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 StTabPanel = class StTabPanel extends LitElement {
11
11
  constructor() {
12
12
  super(...arguments);
13
- this.name = '';
13
+ this.name = "";
14
14
  this.active = false;
15
15
  }
16
+ connectedCallback() {
17
+ super.connectedCallback();
18
+ // 🚀 FIX: Expose role and ID on the host to link perfectly with the orchestrator
19
+ this.id = this.id || `panel-${this.name}`;
20
+ this.setAttribute("role", "tabpanel");
21
+ this.setAttribute("aria-hidden", this.active ? "false" : "true");
22
+ }
23
+ updated(changedProperties) {
24
+ super.updated(changedProperties);
25
+ if (changedProperties.has("active")) {
26
+ this.setAttribute("aria-hidden", this.active ? "false" : "true");
27
+ }
28
+ }
16
29
  render() {
17
- return html `
18
- <div role="tabpanel" aria-hidden=${this.active ? 'false' : 'true'}>
19
- <slot></slot>
20
- </div>
21
- `;
30
+ return html `<slot></slot>`;
22
31
  }
23
32
  };
24
33
  StTabPanel.styles = [
@@ -32,7 +41,7 @@ StTabPanel.styles = [
32
41
  :host(:not([active])) {
33
42
  display: none;
34
43
  }
35
- `
44
+ `,
36
45
  ];
37
46
  __decorate([
38
47
  property({ type: String, reflect: true })
@@ -41,6 +50,7 @@ __decorate([
41
50
  property({ type: Boolean, reflect: true })
42
51
  ], StTabPanel.prototype, "active", void 0);
43
52
  StTabPanel = __decorate([
44
- customElement('st-tab-panel')
53
+ customElement("st-tab-panel")
45
54
  ], StTabPanel);
46
55
  export { StTabPanel };
56
+ //# sourceMappingURL=tab-panel.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAiB,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACoC,SAAI,GAAG,EAAE,CAAC;QACT,WAAM,GAAG,KAAK,CAAC;IAkC3D,CAAC;IAlBC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,iFAAiF;QACjF,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,SAAS,IAAI,CAAC,IAAI,EAAE,CAAC;QAC1C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACnE,CAAC;IAEQ,OAAO,CAAC,iBAAiC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAhCQ,iBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;KASF;CACF,AAZY,CAYX;AAfuC;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAW;AACT;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAgB;AAF9C,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAoCtB"}
@@ -1,9 +1,18 @@
1
- import { LitElement } from 'lit';
1
+ import { LitElement, PropertyValues } from "lit";
2
2
  export declare class StTab extends LitElement {
3
3
  panel: string;
4
4
  active: boolean;
5
5
  static styles: import("lit").CSSResult[];
6
+ connectedCallback(): void;
7
+ disconnectedCallback(): void;
8
+ updated(changedProperties: PropertyValues): void;
6
9
  private _handleClick;
10
+ private _handleKeyDown;
7
11
  render(): import("lit-html").TemplateResult<1>;
8
12
  }
13
+ declare global {
14
+ interface HTMLElementTagNameMap {
15
+ "st-tab": StTab;
16
+ }
17
+ }
9
18
  //# sourceMappingURL=tab.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,KAAM,SAAQ,UAAU;IACQ,KAAK,SAAM;IACV,MAAM,UAAS;IAE3D,MAAM,CAAC,MAAM,4BA6CX;IAEF,OAAO,CAAC,YAAY;IAQpB,MAAM,yCAWL;CACF"}
1
+ {"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,KAAM,SAAQ,UAAU;IACM,KAAK,SAAM;IACV,MAAM,UAAS;IAEzD,MAAM,CAAC,MAAM,4BAwCX;IAEF,iBAAiB,SAYhB;IAED,oBAAoB,SAInB;IAEQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAOjD;IAED,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,cAAc;IAQtB,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}
@@ -4,48 +4,66 @@ 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 StTab = class StTab extends LitElement {
11
11
  constructor() {
12
12
  super(...arguments);
13
- this.panel = '';
13
+ this.panel = "";
14
14
  this.active = false;
15
15
  }
16
+ connectedCallback() {
17
+ super.connectedCallback();
18
+ // 🚀 FIX: Apply the ARIA role and attributes to the Host element
19
+ this.id = this.id || `tab-${this.panel}`;
20
+ this.setAttribute("role", "tab");
21
+ this.setAttribute("aria-selected", this.active ? "true" : "false");
22
+ this.setAttribute("tabindex", this.active ? "0" : "-1");
23
+ // Attach native event listeners since we are no longer using a button
24
+ this.addEventListener("click", this._handleClick);
25
+ this.addEventListener("keydown", this._handleKeyDown);
26
+ }
27
+ disconnectedCallback() {
28
+ super.disconnectedCallback();
29
+ this.removeEventListener("click", this._handleClick);
30
+ this.removeEventListener("keydown", this._handleKeyDown);
31
+ }
32
+ updated(changedProperties) {
33
+ super.updated(changedProperties);
34
+ if (changedProperties.has("active")) {
35
+ // Sync ARIA states when active changes
36
+ this.setAttribute("aria-selected", this.active ? "true" : "false");
37
+ this.setAttribute("tabindex", this.active ? "0" : "-1");
38
+ }
39
+ }
16
40
  _handleClick() {
17
- this.dispatchEvent(new CustomEvent('st-tab-select', {
41
+ this.dispatchEvent(new CustomEvent("st-tab-select", {
18
42
  detail: { panel: this.panel },
19
43
  bubbles: true,
20
- composed: true
44
+ composed: true,
21
45
  }));
22
46
  }
47
+ _handleKeyDown(e) {
48
+ // 🚀 FIX: Ensure Enter and Space keys activate the tab natively
49
+ if (e.key === "Enter" || e.key === " ") {
50
+ e.preventDefault();
51
+ this._handleClick();
52
+ }
53
+ }
23
54
  render() {
24
- return html `
25
- <button
26
- role="tab"
27
- aria-selected=${this.active ? 'true' : 'false'}
28
- tabindex=${this.active ? '0' : '-1'}
29
- @click=${this._handleClick}
30
- >
31
- <slot></slot>
32
- </button>
33
- `;
55
+ return html `<slot></slot>`;
34
56
  }
35
57
  };
36
58
  StTab.styles = [
37
59
  resetStyles,
38
60
  css `
61
+ /* 🚀 FIX: Style the host element directly to act as the interactive tab */
39
62
  :host {
40
- display: inline-block;
41
- }
42
-
43
- button {
44
63
  display: inline-flex;
45
64
  align-items: center;
46
65
  gap: var(--st-spacing-sm);
47
66
  background: transparent;
48
- border: none;
49
67
  border-bottom: 2px solid transparent;
50
68
  padding: var(--st-spacing-sm) var(--st-spacing-md);
51
69
  color: var(--st-color-text-muted);
@@ -54,20 +72,19 @@ StTab.styles = [
54
72
  cursor: pointer;
55
73
  transition: all 0.2s ease;
56
74
  white-space: nowrap;
75
+ outline: none; /* Focus outline handled below */
57
76
  }
58
77
 
59
- button:hover {
78
+ :host(:hover) {
60
79
  color: var(--st-color-text);
61
80
  }
62
81
 
63
- button:focus-visible {
64
- outline: none;
82
+ :host(:focus-visible) {
65
83
  background-color: var(--st-color-surface);
66
84
  border-radius: 4px 4px 0 0;
67
85
  }
68
86
 
69
- /* Active State */
70
- :host([active]) button {
87
+ :host([active]) {
71
88
  color: var(--st-color-primary);
72
89
  border-bottom-color: var(--st-color-primary);
73
90
  }
@@ -77,7 +94,7 @@ StTab.styles = [
77
94
  height: 1.125rem;
78
95
  fill: currentColor;
79
96
  }
80
- `
97
+ `,
81
98
  ];
82
99
  __decorate([
83
100
  property({ type: String, reflect: true })
@@ -86,6 +103,7 @@ __decorate([
86
103
  property({ type: Boolean, reflect: true })
87
104
  ], StTab.prototype, "active", void 0);
88
105
  StTab = __decorate([
89
- customElement('st-tab')
106
+ customElement("st-tab")
90
107
  ], StTab);
91
108
  export { StTab };
109
+ //# sourceMappingURL=tab.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":"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"}
@@ -4,11 +4,20 @@ import { LitElement } from "lit";
4
4
  export declare class StTabs extends LitElement {
5
5
  private _tabs;
6
6
  private _panels;
7
+ syncUrl: boolean;
7
8
  static styles: import("lit").CSSResult[];
8
9
  connectedCallback(): void;
9
10
  disconnectedCallback(): void;
11
+ private _handleHashChange;
10
12
  private _handleTabSelect;
13
+ private _activateTab;
11
14
  private _handleSlotChange;
15
+ private _handleKeyDown;
12
16
  render(): import("lit-html").TemplateResult<1>;
13
17
  }
18
+ declare global {
19
+ interface HTMLElementTagNameMap {
20
+ "st-tabs": StTabs;
21
+ }
22
+ }
14
23
  //# sourceMappingURL=tabs.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAM1C,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAO,CAAC,KAAK,CAAW;IAGxB,OAAO,CAAC,OAAO,CAAgB;IAE/B,MAAM,CAAC,MAAM,4BAoBX;IAEF,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAED,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,iBAAiB;IAUzB,MAAM,yCASL;CACF"}
1
+ {"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAM1C,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAO,CAAC,KAAK,CAAW;IAGxB,OAAO,CAAC,OAAO,CAAgB;IAGmB,OAAO,UAAS;IAElE,MAAM,CAAC,MAAM,4BAmBX;IAEF,iBAAiB,SAIhB;IAED,oBAAoB,SAInB;IAED,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,cAAc;IAuBtB,MAAM,yCASL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
@@ -7,43 +7,103 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import "./tab.js";
8
8
  import "./tab-panel.js";
9
9
  import { LitElement, html, css } from "lit";
10
- import { customElement, queryAssignedElements } from "lit/decorators.js";
10
+ import { customElement, queryAssignedElements, property } from "lit/decorators.js";
11
11
  import { resetStyles } from "../../styles/reset.js";
12
12
  let StTabs = class StTabs extends LitElement {
13
+ constructor() {
14
+ super(...arguments);
15
+ // 🚀 FEATURE: Syncs the active tab with the URL Hash
16
+ this.syncUrl = false;
17
+ this._handleHashChange = () => {
18
+ if (!this.syncUrl)
19
+ return;
20
+ const hash = window.location.hash.replace("#", "");
21
+ if (hash && this._tabs.some((t) => t.panel === hash)) {
22
+ this._activateTab(hash, false); // Don't push state if we are responding to a history change
23
+ }
24
+ };
25
+ }
13
26
  connectedCallback() {
14
27
  super.connectedCallback();
15
28
  this.addEventListener("st-tab-select", this._handleTabSelect);
29
+ window.addEventListener("hashchange", this._handleHashChange);
16
30
  }
17
31
  disconnectedCallback() {
18
32
  super.disconnectedCallback();
19
33
  this.removeEventListener("st-tab-select", this._handleTabSelect);
34
+ window.removeEventListener("hashchange", this._handleHashChange);
20
35
  }
21
36
  _handleTabSelect(e) {
22
- // 1. Stop the event here so parent <st-tabs> instances don't react to it
23
37
  e.stopPropagation();
24
- const targetPanel = e.detail.panel;
25
- // Update active states on all tabs
38
+ this._activateTab(e.detail.panel, true);
39
+ }
40
+ _activateTab(targetPanel, updateUrl) {
26
41
  this._tabs.forEach((tab) => {
27
42
  tab.active = tab.panel === targetPanel;
28
43
  });
29
- // Update active states on all panels
30
44
  this._panels.forEach((panel) => {
31
45
  panel.active = panel.name === targetPanel;
32
46
  });
47
+ if (updateUrl && this.syncUrl) {
48
+ window.history.replaceState(null, "", `#${targetPanel}`);
49
+ }
50
+ this.dispatchEvent(new CustomEvent("change", {
51
+ detail: { panel: targetPanel },
52
+ bubbles: true,
53
+ composed: true,
54
+ }));
33
55
  }
34
- // Ensures the first tab is active by default if none are explicitly set
35
56
  _handleSlotChange() {
36
57
  if (!this._tabs.length || !this._panels.length)
37
58
  return;
59
+ // Link ARIA attributes securely
60
+ this._tabs.forEach((t) => {
61
+ t.setAttribute("aria-controls", `panel-${t.panel}`);
62
+ });
63
+ this._panels.forEach((p) => {
64
+ p.setAttribute("aria-labelledby", `tab-${p.name}`);
65
+ });
66
+ // 1. If sync-url is on, and hash exists, try to load it
67
+ if (this.syncUrl) {
68
+ const hash = window.location.hash.replace("#", "");
69
+ if (hash && this._tabs.some((t) => t.panel === hash)) {
70
+ this._activateTab(hash, false);
71
+ return;
72
+ }
73
+ }
74
+ // 2. Otherwise fallback to the first active tab, or the very first tab
38
75
  const hasActiveTab = this._tabs.some((tab) => tab.active);
39
76
  if (!hasActiveTab) {
40
- this._tabs[0].active = true;
41
- this._panels[0].active = true;
77
+ this._activateTab(this._tabs[0].panel, false);
42
78
  }
43
79
  }
80
+ // 🚀 FEATURE: W3C Keyboard Navigation (Arrows, Home, End)
81
+ _handleKeyDown(e) {
82
+ if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key))
83
+ return;
84
+ const tabs = this._tabs;
85
+ const currentIndex = tabs.findIndex((t) => t.active);
86
+ let nextIndex = currentIndex;
87
+ if (e.key === "ArrowRight") {
88
+ nextIndex = (currentIndex + 1) % tabs.length;
89
+ }
90
+ else if (e.key === "ArrowLeft") {
91
+ nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
92
+ }
93
+ else if (e.key === "Home") {
94
+ nextIndex = 0;
95
+ }
96
+ else if (e.key === "End") {
97
+ nextIndex = tabs.length - 1;
98
+ }
99
+ e.preventDefault();
100
+ const targetTab = tabs[nextIndex];
101
+ targetTab.focus();
102
+ this._activateTab(targetTab.panel, true);
103
+ }
44
104
  render() {
45
105
  return html `
46
- <div class="nav-container" role="tablist">
106
+ <div class="nav-container" role="tablist" @keydown=${this._handleKeyDown}>
47
107
  <slot name="nav" @slotchange=${this._handleSlotChange}></slot>
48
108
  </div>
49
109
  <div class="panels-container">
@@ -61,15 +121,14 @@ StTabs.styles = [
61
121
 
62
122
  .nav-container {
63
123
  display: flex;
64
- /* Creates the track line underneath the tabs */
65
124
  border-bottom: 1px solid var(--st-color-border);
66
125
  gap: var(--st-spacing-xs);
67
- overflow-x: auto; /* Allows tabs to scroll horizontally on small screens */
68
- scrollbar-width: none; /* Hides scrollbar on Firefox */
126
+ overflow-x: auto;
127
+ scrollbar-width: none;
69
128
  }
70
129
 
71
130
  .nav-container::-webkit-scrollbar {
72
- display: none; /* Hides scrollbar on Chrome/Safari */
131
+ display: none;
73
132
  }
74
133
  `,
75
134
  ];
@@ -79,7 +138,11 @@ __decorate([
79
138
  __decorate([
80
139
  queryAssignedElements({ selector: "st-tab-panel" })
81
140
  ], StTabs.prototype, "_panels", void 0);
141
+ __decorate([
142
+ property({ type: Boolean, attribute: "sync-url" })
143
+ ], StTabs.prototype, "syncUrl", void 0);
82
144
  StTabs = __decorate([
83
145
  customElement("st-tabs")
84
146
  ], StTabs);
85
147
  export { StTabs };
148
+ //# sourceMappingURL=tabs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"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"}
@@ -3,6 +3,14 @@ export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
3
3
  export declare class StTextarea extends LitElement {
4
4
  static formAssociated: boolean;
5
5
  private _internals;
6
+ static shadowRootOptions: {
7
+ clonable?: boolean;
8
+ customElementRegistry?: CustomElementRegistry | null;
9
+ mode: ShadowRootMode;
10
+ serializable?: boolean;
11
+ slotAssignment?: SlotAssignmentMode;
12
+ delegatesFocus: boolean;
13
+ };
6
14
  private _textareaEl;
7
15
  name: string;
8
16
  label: string;
@@ -11,15 +19,20 @@ export declare class StTextarea extends LitElement {
11
19
  helpText: string;
12
20
  rows: number;
13
21
  resize: TextareaResize;
22
+ autoResize: boolean;
23
+ spellcheckAttr?: "true" | "false";
14
24
  required: boolean;
15
25
  minlength?: number;
16
26
  maxlength?: number;
17
27
  disabled: boolean;
18
28
  invalid: boolean;
19
29
  readonly: boolean;
30
+ private _defaultValue;
20
31
  constructor();
21
32
  static styles: import("lit").CSSResult[];
33
+ firstUpdated(changedProperties: PropertyValues<this>): void;
22
34
  updated(changedProperties: PropertyValues<this>): void;
35
+ private _adjustHeight;
23
36
  private _syncValidity;
24
37
  formResetCallback(): void;
25
38
  checkValidity(): boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEzE,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAElB,OAAO,CAAC,WAAW,CAAuB;IAEpB,IAAI,SAAM;IACzB,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAM;IACP,QAAQ,SAAM;IAGxB,IAAI,SAAK;IACM,MAAM,EAAE,cAAc,CAAc;IAGnC,QAAQ,UAAS;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGH,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IAE3D,cAaC;IAED,MAAM,CAAC,MAAM,4BAuFX;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAOvD;IAED,OAAO,CAAC,aAAa;IASrB,iBAAiB,SAIhB;IAED,aAAa,YAEZ;IACD,cAAc,YAEb;IAED,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,aAAa;IAIrB,MAAM,yCAuBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
1
+ {"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEzE,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAGrC,MAAM,CAAC,iBAAiB;;;;;;;MAA2D;IAEhE,OAAO,CAAC,WAAW,CAAuB;IAEpB,IAAI,SAAM;IACzB,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAM;IACP,QAAQ,SAAM;IAGxB,IAAI,SAAK;IACM,MAAM,EAAE,cAAc,CAAc;IAGxB,UAAU,UAAS;IAGrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAG3C,QAAQ,UAAS;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGH,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IAE3D,OAAO,CAAC,aAAa,CAAM;IAE3B,cAaC;IAED,MAAM,CAAC,MAAM,4BA4FX;IAEO,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAI5D;IAEQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QASvD;YAEa,aAAa;IAS3B,OAAO,CAAC,aAAa;IASrB,iBAAiB,SAShB;IAEM,aAAa,YAEnB;IAEM,cAAc,YAEpB;IAED,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,aAAa;IAIrB,MAAM,yCA4BL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}