@scania/tegel 0.0.1-beta.7 → 0.0.1-beta.9

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 (281) hide show
  1. package/package.json +1 -1
  2. package/readme.md +7 -8
  3. package/dist/cjs/index-e1c79686.js +0 -1912
  4. package/dist/cjs/index.cjs.js +0 -2
  5. package/dist/cjs/loader.cjs.js +0 -21
  6. package/dist/cjs/popper-11d5f714.js +0 -1801
  7. package/dist/cjs/sdds-accordion-item.cjs.entry.js +0 -34
  8. package/dist/cjs/sdds-accordion.cjs.entry.js +0 -21
  9. package/dist/cjs/sdds-badges.cjs.entry.js +0 -55
  10. package/dist/cjs/sdds-body-cell_2.cjs.entry.js +0 -173
  11. package/dist/cjs/sdds-button.cjs.entry.js +0 -36
  12. package/dist/cjs/sdds-datetime.cjs.entry.js +0 -66
  13. package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +0 -92
  14. package/dist/cjs/sdds-dropdown_2.cjs.entry.js +0 -335
  15. package/dist/cjs/sdds-header-cell.cjs.entry.js +0 -141
  16. package/dist/cjs/sdds-icon.cjs.entry.js +0 -42
  17. package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +0 -96
  18. package/dist/cjs/sdds-inline-tabs.cjs.entry.js +0 -211
  19. package/dist/cjs/sdds-modal.cjs.entry.js +0 -49
  20. package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +0 -95
  21. package/dist/cjs/sdds-popover-canvas.cjs.entry.js +0 -76
  22. package/dist/cjs/sdds-popover-menu.cjs.entry.js +0 -75
  23. package/dist/cjs/sdds-slider.cjs.entry.js +0 -336
  24. package/dist/cjs/sdds-spinner.cjs.entry.js +0 -21
  25. package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +0 -81
  26. package/dist/cjs/sdds-table-body.cjs.entry.js +0 -289
  27. package/dist/cjs/sdds-table-footer.cjs.entry.js +0 -165
  28. package/dist/cjs/sdds-table-header.cjs.entry.js +0 -100
  29. package/dist/cjs/sdds-table-toolbar.cjs.entry.js +0 -66
  30. package/dist/cjs/sdds-table.cjs.entry.js +0 -69
  31. package/dist/cjs/sdds-textarea.cjs.entry.js +0 -61
  32. package/dist/cjs/sdds-textfield.cjs.entry.js +0 -82
  33. package/dist/cjs/sdds-tooltip.cjs.entry.js +0 -95
  34. package/dist/cjs/tegel.cjs.js +0 -19
  35. package/dist/collection/collection-manifest.json +0 -40
  36. package/dist/collection/components/accordion/accordion-item/accordion-item.css +0 -134
  37. package/dist/collection/components/accordion/accordion-item/accordion-item.js +0 -146
  38. package/dist/collection/components/accordion/accordion.css +0 -77
  39. package/dist/collection/components/accordion/accordion.js +0 -62
  40. package/dist/collection/components/badge/badges.css +0 -42
  41. package/dist/collection/components/badge/badges.js +0 -150
  42. package/dist/collection/components/button/button-component.js +0 -154
  43. package/dist/collection/components/button/button.css +0 -658
  44. package/dist/collection/components/data-table/table/table.css +0 -15
  45. package/dist/collection/components/data-table/table/table.js +0 -253
  46. package/dist/collection/components/data-table/table-body/table-body.css +0 -22
  47. package/dist/collection/components/data-table/table-body/table-body.js +0 -425
  48. package/dist/collection/components/data-table/table-body-cell/table-body-cell.css +0 -40
  49. package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +0 -169
  50. package/dist/collection/components/data-table/table-body-row/table-body-row.css +0 -196
  51. package/dist/collection/components/data-table/table-body-row/table-body-row.js +0 -164
  52. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.css +0 -79
  53. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +0 -155
  54. package/dist/collection/components/data-table/table-footer/table-footer.css +0 -93
  55. package/dist/collection/components/data-table/table-footer/table-footer.js +0 -355
  56. package/dist/collection/components/data-table/table-header/table-header.css +0 -204
  57. package/dist/collection/components/data-table/table-header/table-header.js +0 -153
  58. package/dist/collection/components/data-table/table-header-cell/table-header-cell.css +0 -126
  59. package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +0 -320
  60. package/dist/collection/components/data-table/table-toolbar/table-toolbar.css +0 -92
  61. package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +0 -142
  62. package/dist/collection/components/datetime/datetime.css +0 -375
  63. package/dist/collection/components/datetime/datetime.js +0 -251
  64. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +0 -339
  65. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +0 -185
  66. package/dist/collection/components/dropdown/dropdown.css +0 -891
  67. package/dist/collection/components/dropdown/dropdown.js +0 -554
  68. package/dist/collection/components/icon/icon.css +0 -16
  69. package/dist/collection/components/icon/icon.js +0 -89
  70. package/dist/collection/components/icon/iconsArray.js +0 -2
  71. package/dist/collection/components/modal/modal.css +0 -324
  72. package/dist/collection/components/modal/modal.js +0 -146
  73. package/dist/collection/components/popover-canvas/popover-canvas.css +0 -20
  74. package/dist/collection/components/popover-canvas/popover-canvas.js +0 -190
  75. package/dist/collection/components/popover-menu/popover-menu.css +0 -19
  76. package/dist/collection/components/popover-menu/popover-menu.js +0 -189
  77. package/dist/collection/components/slider/slider.css +0 -260
  78. package/dist/collection/components/slider/slider.js +0 -682
  79. package/dist/collection/components/spinner/spinner.css +0 -79
  80. package/dist/collection/components/spinner/spinner.js +0 -61
  81. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +0 -159
  82. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +0 -302
  83. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +0 -172
  84. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +0 -126
  85. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +0 -153
  86. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +0 -103
  87. package/dist/collection/components/textarea/textarea.css +0 -283
  88. package/dist/collection/components/textarea/textarea.js +0 -336
  89. package/dist/collection/components/textfield/textfield.css +0 -494
  90. package/dist/collection/components/textfield/textfield.js +0 -359
  91. package/dist/collection/components/tooltip/tooltip.css +0 -46
  92. package/dist/collection/components/tooltip/tooltip.js +0 -200
  93. package/dist/collection/index.js +0 -1
  94. package/dist/collection/stories/assets/code-brackets.svg +0 -1
  95. package/dist/collection/stories/assets/colors.svg +0 -1
  96. package/dist/collection/stories/assets/comments.svg +0 -1
  97. package/dist/collection/stories/assets/direction.svg +0 -1
  98. package/dist/collection/stories/assets/flow.svg +0 -1
  99. package/dist/collection/stories/assets/plugin.svg +0 -1
  100. package/dist/collection/stories/assets/repo.svg +0 -1
  101. package/dist/collection/stories/assets/stackalt.svg +0 -1
  102. package/dist/collection/utils/utils.js +0 -12
  103. package/dist/components/dropdown-option.js +0 -100
  104. package/dist/components/dropdown.js +0 -296
  105. package/dist/components/icon.js +0 -58
  106. package/dist/components/index.d.ts +0 -50
  107. package/dist/components/index.js +0 -30
  108. package/dist/components/popper.js +0 -1799
  109. package/dist/components/sdds-accordion-item.d.ts +0 -11
  110. package/dist/components/sdds-accordion-item.js +0 -60
  111. package/dist/components/sdds-accordion.d.ts +0 -11
  112. package/dist/components/sdds-accordion.js +0 -38
  113. package/dist/components/sdds-badges.d.ts +0 -11
  114. package/dist/components/sdds-badges.js +0 -76
  115. package/dist/components/sdds-body-cell.d.ts +0 -11
  116. package/dist/components/sdds-body-cell.js +0 -6
  117. package/dist/components/sdds-button.d.ts +0 -11
  118. package/dist/components/sdds-button.js +0 -58
  119. package/dist/components/sdds-datetime.d.ts +0 -11
  120. package/dist/components/sdds-datetime.js +0 -90
  121. package/dist/components/sdds-dropdown-filter.d.ts +0 -11
  122. package/dist/components/sdds-dropdown-filter.js +0 -138
  123. package/dist/components/sdds-dropdown-option.d.ts +0 -11
  124. package/dist/components/sdds-dropdown-option.js +0 -6
  125. package/dist/components/sdds-dropdown.d.ts +0 -11
  126. package/dist/components/sdds-dropdown.js +0 -6
  127. package/dist/components/sdds-header-cell.d.ts +0 -11
  128. package/dist/components/sdds-header-cell.js +0 -173
  129. package/dist/components/sdds-icon.d.ts +0 -11
  130. package/dist/components/sdds-icon.js +0 -6
  131. package/dist/components/sdds-inline-tabs-fullbleed.d.ts +0 -11
  132. package/dist/components/sdds-inline-tabs-fullbleed.js +0 -115
  133. package/dist/components/sdds-inline-tabs.d.ts +0 -11
  134. package/dist/components/sdds-inline-tabs.js +0 -235
  135. package/dist/components/sdds-modal.d.ts +0 -11
  136. package/dist/components/sdds-modal.js +0 -69
  137. package/dist/components/sdds-navigation-tabs.d.ts +0 -11
  138. package/dist/components/sdds-navigation-tabs.js +0 -113
  139. package/dist/components/sdds-popover-canvas.d.ts +0 -11
  140. package/dist/components/sdds-popover-canvas.js +0 -97
  141. package/dist/components/sdds-popover-menu.d.ts +0 -11
  142. package/dist/components/sdds-popover-menu.js +0 -96
  143. package/dist/components/sdds-slider.d.ts +0 -11
  144. package/dist/components/sdds-slider.js +0 -366
  145. package/dist/components/sdds-spinner.d.ts +0 -11
  146. package/dist/components/sdds-spinner.js +0 -37
  147. package/dist/components/sdds-table-body-row-expandable.d.ts +0 -11
  148. package/dist/components/sdds-table-body-row-expandable.js +0 -104
  149. package/dist/components/sdds-table-body-row.d.ts +0 -11
  150. package/dist/components/sdds-table-body-row.js +0 -6
  151. package/dist/components/sdds-table-body.d.ts +0 -11
  152. package/dist/components/sdds-table-body.js +0 -337
  153. package/dist/components/sdds-table-footer.d.ts +0 -11
  154. package/dist/components/sdds-table-footer.js +0 -196
  155. package/dist/components/sdds-table-header.d.ts +0 -11
  156. package/dist/components/sdds-table-header.js +0 -125
  157. package/dist/components/sdds-table-toolbar.d.ts +0 -11
  158. package/dist/components/sdds-table-toolbar.js +0 -88
  159. package/dist/components/sdds-table.d.ts +0 -11
  160. package/dist/components/sdds-table.js +0 -92
  161. package/dist/components/sdds-textarea.d.ts +0 -11
  162. package/dist/components/sdds-textarea.js +0 -90
  163. package/dist/components/sdds-textfield.d.ts +0 -11
  164. package/dist/components/sdds-textfield.js +0 -111
  165. package/dist/components/sdds-tooltip.d.ts +0 -11
  166. package/dist/components/sdds-tooltip.js +0 -116
  167. package/dist/components/table-body-cell.js +0 -102
  168. package/dist/components/table-body-row.js +0 -119
  169. package/dist/esm/index-b67b15a6.js +0 -1884
  170. package/dist/esm/index.js +0 -1
  171. package/dist/esm/loader.js +0 -17
  172. package/dist/esm/polyfills/core-js.js +0 -11
  173. package/dist/esm/polyfills/css-shim.js +0 -1
  174. package/dist/esm/polyfills/dom.js +0 -79
  175. package/dist/esm/polyfills/es5-html-element.js +0 -1
  176. package/dist/esm/polyfills/index.js +0 -34
  177. package/dist/esm/polyfills/system.js +0 -6
  178. package/dist/esm/popper-f860750c.js +0 -1799
  179. package/dist/esm/sdds-accordion-item.entry.js +0 -30
  180. package/dist/esm/sdds-accordion.entry.js +0 -17
  181. package/dist/esm/sdds-badges.entry.js +0 -51
  182. package/dist/esm/sdds-body-cell_2.entry.js +0 -168
  183. package/dist/esm/sdds-button.entry.js +0 -32
  184. package/dist/esm/sdds-datetime.entry.js +0 -62
  185. package/dist/esm/sdds-dropdown-filter.entry.js +0 -88
  186. package/dist/esm/sdds-dropdown_2.entry.js +0 -330
  187. package/dist/esm/sdds-header-cell.entry.js +0 -137
  188. package/dist/esm/sdds-icon.entry.js +0 -38
  189. package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +0 -92
  190. package/dist/esm/sdds-inline-tabs.entry.js +0 -207
  191. package/dist/esm/sdds-modal.entry.js +0 -45
  192. package/dist/esm/sdds-navigation-tabs.entry.js +0 -91
  193. package/dist/esm/sdds-popover-canvas.entry.js +0 -72
  194. package/dist/esm/sdds-popover-menu.entry.js +0 -71
  195. package/dist/esm/sdds-slider.entry.js +0 -332
  196. package/dist/esm/sdds-spinner.entry.js +0 -17
  197. package/dist/esm/sdds-table-body-row-expandable.entry.js +0 -77
  198. package/dist/esm/sdds-table-body.entry.js +0 -285
  199. package/dist/esm/sdds-table-footer.entry.js +0 -161
  200. package/dist/esm/sdds-table-header.entry.js +0 -96
  201. package/dist/esm/sdds-table-toolbar.entry.js +0 -62
  202. package/dist/esm/sdds-table.entry.js +0 -65
  203. package/dist/esm/sdds-textarea.entry.js +0 -57
  204. package/dist/esm/sdds-textfield.entry.js +0 -78
  205. package/dist/esm/sdds-tooltip.entry.js +0 -91
  206. package/dist/esm/tegel.js +0 -17
  207. package/dist/index.cjs.js +0 -1
  208. package/dist/index.js +0 -1
  209. package/dist/node_modules/@types/jest/index.d.ts +0 -1512
  210. package/dist/tegel/index.esm.js +0 -0
  211. package/dist/tegel/p-040efb32.entry.js +0 -1
  212. package/dist/tegel/p-12ca5cfa.entry.js +0 -1
  213. package/dist/tegel/p-157e1618.js +0 -2
  214. package/dist/tegel/p-1fe61cf6.entry.js +0 -1
  215. package/dist/tegel/p-2f376504.entry.js +0 -1
  216. package/dist/tegel/p-44ced895.entry.js +0 -1
  217. package/dist/tegel/p-4880f03d.entry.js +0 -1
  218. package/dist/tegel/p-4aba73a3.entry.js +0 -1
  219. package/dist/tegel/p-4b58a02c.entry.js +0 -1
  220. package/dist/tegel/p-4cb85347.entry.js +0 -1
  221. package/dist/tegel/p-52031b5a.entry.js +0 -1
  222. package/dist/tegel/p-677baf7f.entry.js +0 -1
  223. package/dist/tegel/p-71797eaf.entry.js +0 -1
  224. package/dist/tegel/p-7373284c.entry.js +0 -1
  225. package/dist/tegel/p-7451779b.entry.js +0 -1
  226. package/dist/tegel/p-77aeea3b.entry.js +0 -1
  227. package/dist/tegel/p-8582d6a7.entry.js +0 -1
  228. package/dist/tegel/p-96021bd0.entry.js +0 -1
  229. package/dist/tegel/p-9d8caf51.entry.js +0 -1
  230. package/dist/tegel/p-a5919930.entry.js +0 -1
  231. package/dist/tegel/p-b01cface.entry.js +0 -1
  232. package/dist/tegel/p-bf896643.entry.js +0 -1
  233. package/dist/tegel/p-c311725c.entry.js +0 -1
  234. package/dist/tegel/p-cf72dfd9.entry.js +0 -1
  235. package/dist/tegel/p-d91caec6.entry.js +0 -1
  236. package/dist/tegel/p-e10eec33.entry.js +0 -1
  237. package/dist/tegel/p-ec26fc38.js +0 -1
  238. package/dist/tegel/p-f2262a69.entry.js +0 -1
  239. package/dist/tegel/p-f2f7aa45.entry.js +0 -1
  240. package/dist/tegel/tegel.css +0 -101
  241. package/dist/tegel/tegel.esm.js +0 -1
  242. package/dist/types/components/accordion/accordion-item/accordion-item.d.ts +0 -17
  243. package/dist/types/components/accordion/accordion.d.ts +0 -7
  244. package/dist/types/components/badge/badges.d.ts +0 -16
  245. package/dist/types/components/button/button-component.d.ts +0 -15
  246. package/dist/types/components/data-table/table/table.d.ts +0 -47
  247. package/dist/types/components/data-table/table-body/table-body.d.ts +0 -54
  248. package/dist/types/components/data-table/table-body-cell/table-body-cell.d.ts +0 -24
  249. package/dist/types/components/data-table/table-body-row/table-body-row.d.ts +0 -27
  250. package/dist/types/components/data-table/table-body-row-expandable/table-body-row-expandable.d.ts +0 -27
  251. package/dist/types/components/data-table/table-footer/table-footer.d.ts +0 -50
  252. package/dist/types/components/data-table/table-header/table-header.d.ts +0 -27
  253. package/dist/types/components/data-table/table-header-cell/table-header-cell.d.ts +0 -45
  254. package/dist/types/components/data-table/table-toolbar/table-toolbar.d.ts +0 -22
  255. package/dist/types/components/datetime/datetime.d.ts +0 -32
  256. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.d.ts +0 -42
  257. package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +0 -19
  258. package/dist/types/components/dropdown/dropdown.d.ts +0 -56
  259. package/dist/types/components/icon/icon.d.ts +0 -12
  260. package/dist/types/components/modal/modal.d.ts +0 -16
  261. package/dist/types/components/popover-canvas/popover-canvas.d.ts +0 -18
  262. package/dist/types/components/popover-menu/popover-menu.d.ts +0 -18
  263. package/dist/types/components/slider/slider.d.ts +0 -82
  264. package/dist/types/components/spinner/spinner.d.ts +0 -7
  265. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.d.ts +0 -41
  266. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.d.ts +0 -20
  267. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +0 -18
  268. package/dist/types/components/textarea/textarea.d.ts +0 -41
  269. package/dist/types/components/textfield/textfield.d.ts +0 -42
  270. package/dist/types/components/tooltip/tooltip.d.ts +0 -20
  271. package/dist/types/components.d.ts +0 -1752
  272. package/dist/types/global.d.ts +0 -2
  273. package/dist/types/index.d.ts +0 -1
  274. package/dist/types/stencil-public-runtime.d.ts +0 -1581
  275. package/dist/types/utils/utils.d.ts +0 -2
  276. package/loader/cdn.js +0 -3
  277. package/loader/index.cjs.js +0 -3
  278. package/loader/index.d.ts +0 -12
  279. package/loader/index.es2017.js +0 -3
  280. package/loader/index.js +0 -4
  281. package/loader/package.json +0 -11
package/dist/collection/components/textfield/textfield.css DELETED
@@ -1,494 +0,0 @@
1
- :root,
2
- .sdds-theme-light {
3
- --sdds-textfield-color: var(--sdds-grey-868);
4
- --sdds-textfield-bg: var(--sdds-white);
5
- --sdds-textfield-border-bottom: var(--sdds-grey-400);
6
- --sdds-textfield-placeholder: var(--sdds-grey-500);
7
- --sdds-textfield-border-bottom-hover: var(--sdds-grey-600);
8
- --sdds-textfield-disabled-bg: var(--sdds-white);
9
- --sdds-textfield-disabled-color: var(--sdds-grey-400);
10
- --sdds-textfield-disabled-placeholder: var(--sdds-grey-400);
11
- --sdds-textfield-disabled-label: var(--sdds-grey-400);
12
- --sdds-textfield-disabled-ps-color: var(--sdds-grey-400);
13
- --sdds-textfield-label-color: var(--sdds-grey-958);
14
- --sdds-textfield-label-inside-color: var(--sdds-grey-700);
15
- --sdds-textfield-placeholder-focus-color: var(--sdds-grey-500);
16
- --sdds-textfield-bar: var(--sdds-blue-400);
17
- --sdds-textfield-helper: var(--sdds-grey-700);
18
- --sdds-textfield-border-bottom-success: var(--sdds-grey-800);
19
- --sdds-textfield-border-bottom-error: var(--sdds-red-500);
20
- --sdds-textfield-helper-error: var(--sdds-red-500);
21
- --sdds-textfield-bar-error: var(--sdds-red-500);
22
- --sdds-textfield-icon-error: var(--sdds-red-500);
23
- --sdds-textfield-textcounter: var(--sdds-grey-700);
24
- --sdds-textfield-textcounter-divider: var(--sdds-grey-500);
25
- --sdds-textfield-ps-color: var(--sdds-grey-600);
26
- --sdds-textfield-resize-icon: var(--sdds-grey-500);
27
- --sdds-textarea-border-bottom: var(--sdds-grey-400);
28
- --sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
29
- --sdds-textfield-on-white-bg: var(--sdds-grey-50);
30
- }
31
-
32
- .sdds-theme-dark {
33
- --sdds-textfield-color: var(--sdds-grey-868);
34
- --sdds-textfield-bg: var(--sdds-red);
35
- --sdds-textfield-border-bottom: var(--sdds-grey-400);
36
- --sdds-textfield-placeholder: var(--sdds-grey-500);
37
- --sdds-textfield-border-bottom-hover: var(--sdds-grey-600);
38
- --sdds-textfield-disabled-bg: var(--red-white);
39
- --sdds-textfield-disabled-color: var(--sdds-grey-400);
40
- --sdds-textfield-disabled-placeholder: var(--sdds-grey-400);
41
- --sdds-textfield-disabled-label: var(--sdds-grey-400);
42
- --sdds-textfield-disabled-ps-color: var(--sdds-grey-400);
43
- --sdds-textfield-label-color: var(--sdds-grey-958);
44
- --sdds-textfield-label-inside-color: var(--sdds-grey-700);
45
- --sdds-textfield-placeholder-focus-color: var(--sdds-grey-500);
46
- --sdds-textfield-bar: var(--sdds-blue-400);
47
- --sdds-textfield-helper: var(--sdds-grey-700);
48
- --sdds-textfield-border-bottom-success: var(--sdds-grey-800);
49
- --sdds-textfield-border-bottom-error: var(--sdds-red-500);
50
- --sdds-textfield-helper-error: var(--sdds-red-500);
51
- --sdds-textfield-bar-error: var(--sdds-red-500);
52
- --sdds-textfield-icon-error: var(--sdds-red-500);
53
- --sdds-textfield-textcounter: var(--sdds-grey-700);
54
- --sdds-textfield-textcounter-divider: var(--sdds-grey-500);
55
- --sdds-textfield-ps-color: var(--sdds-grey-600);
56
- --sdds-textfield-resize-icon: var(--sdds-grey-500);
57
- --sdds-textarea-border-bottom: var(--sdds-grey-400);
58
- --sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
59
- --sdds-textfield-on-white-bg: var(--sdds-grey-50);
60
- }
61
-
62
- .sdds-on-white-bg {
63
- --sdds-textfield-bg: var(--sdds-textfield-on-white-bg);
64
- }
65
-
66
- .sdds-textfield-input {
67
- border-radius: 4px 4px 0 0;
68
- width: 100%;
69
- box-sizing: border-box;
70
- margin: 0;
71
- border: none;
72
- outline: none;
73
- height: 100%;
74
- color: var(--sdds-textfield-color);
75
- background-color: var(--sdds-textfield-bg);
76
- font: var(--sdds-detail-02);
77
- letter-spacing: var(--sdds-detail-02-ls);
78
- padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
79
- }
80
- .sdds-textfield-input::placeholder {
81
- opacity: 1;
82
- color: var(--sdds-textfield-placeholder);
83
- }
84
- .sdds-textfield-input:focus::placeholder {
85
- color: var(--sdds-textfield-placeholder-focus-color);
86
- }
87
- .sdds-textfield-input:disabled {
88
- cursor: not-allowed;
89
- background-color: var(--sdds-textfield-disabled-bg);
90
- color: var(--sdds-textfield-disabled-color);
91
- }
92
- .sdds-textfield-input:disabled::placeholder {
93
- color: var(--sdds-textfield-disabled-placeholder);
94
- }
95
- .sdds-textfield-input:disabled ~ .sdds-textfield-label-inside {
96
- color: var(--sdds-textfield-disabled-label);
97
- }
98
-
99
- .sdds-textfield-input-md {
100
- border-radius: 4px 4px 0 0;
101
- width: 100%;
102
- box-sizing: border-box;
103
- margin: 0;
104
- border: none;
105
- outline: none;
106
- height: 100%;
107
- color: var(--sdds-textfield-color);
108
- background-color: var(--sdds-textfield-bg);
109
- font: var(--sdds-detail-02);
110
- letter-spacing: var(--sdds-detail-02-ls);
111
- padding: var(--sdds-spacing-element-16);
112
- }
113
- .sdds-textfield-input-md::placeholder {
114
- opacity: 1;
115
- color: var(--sdds-textfield-placeholder);
116
- }
117
- .sdds-textfield-input-md:focus::placeholder {
118
- color: var(--sdds-textfield-placeholder-focus-color);
119
- }
120
- .sdds-textfield-input-md:disabled {
121
- cursor: not-allowed;
122
- background-color: var(--sdds-textfield-disabled-bg);
123
- color: var(--sdds-textfield-disabled-color);
124
- }
125
- .sdds-textfield-input-md:disabled::placeholder {
126
- color: var(--sdds-textfield-disabled-placeholder);
127
- }
128
- .sdds-textfield-input-md:disabled ~ .sdds-textfield-label-inside {
129
- color: var(--sdds-textfield-disabled-label);
130
- }
131
-
132
- .sdds-textfield-input-sm {
133
- border-radius: 4px 4px 0 0;
134
- width: 100%;
135
- box-sizing: border-box;
136
- margin: 0;
137
- border: none;
138
- outline: none;
139
- height: 100%;
140
- color: var(--sdds-textfield-color);
141
- background-color: var(--sdds-textfield-bg);
142
- font: var(--sdds-detail-02);
143
- letter-spacing: var(--sdds-detail-02-ls);
144
- padding: var(--sdds-spacing-element-16);
145
- }
146
- .sdds-textfield-input-sm::placeholder {
147
- opacity: 1;
148
- color: var(--sdds-textfield-placeholder);
149
- }
150
- .sdds-textfield-input-sm:focus::placeholder {
151
- color: var(--sdds-textfield-placeholder-focus-color);
152
- }
153
- .sdds-textfield-input-sm:disabled {
154
- cursor: not-allowed;
155
- background-color: var(--sdds-textfield-disabled-bg);
156
- color: var(--sdds-textfield-disabled-color);
157
- }
158
- .sdds-textfield-input-sm:disabled::placeholder {
159
- color: var(--sdds-textfield-disabled-placeholder);
160
- }
161
- .sdds-textfield-input-sm:disabled ~ .sdds-textfield-label-inside {
162
- color: var(--sdds-textfield-disabled-label);
163
- }
164
-
165
- .sdds-textfield-container {
166
- border-radius: 4px 4px 0 0;
167
- display: flex;
168
- position: relative;
169
- height: 56px;
170
- box-sizing: border-box;
171
- background-color: var(--sdds-textfield-bg);
172
- border-bottom: 1px solid var(--sdds-textfield-border-bottom);
173
- transition: border-bottom-color 200ms ease;
174
- }
175
- .sdds-textfield-container:hover {
176
- border-bottom-color: var(--sdds-textfield-border-bottom-hover);
177
- }
178
- .sdds-form-textfield-md .sdds-textfield-container {
179
- height: 48px;
180
- }
181
- .sdds-form-textfield-sm .sdds-textfield-container {
182
- height: 40px;
183
- }
184
-
185
- .sdds-textfield-input-container {
186
- position: relative;
187
- width: 100%;
188
- }
189
-
190
- /* slot[name="sdds-label"]::slotted(*) {
191
- @include type-style("detail-05");
192
- display: block;
193
- margin-bottom: var(--sdds-spacing-element-8);
194
- color: var(--sdds-textfield-label-color);
195
- } */
196
- .sdds-textfield-label-outside > * {
197
- font: var(--sdds-detail-05);
198
- letter-spacing: var(--sdds-detail-05-ls);
199
- display: block;
200
- margin-bottom: var(--sdds-spacing-element-8);
201
- color: var(--sdds-textfield-label-color);
202
- }
203
-
204
- .sdds-textfield-label-inside {
205
- font: var(--sdds-detail-02);
206
- letter-spacing: var(--sdds-detail-02-ls);
207
- position: absolute;
208
- pointer-events: none;
209
- color: var(--sdds-textfield-label-inside-color);
210
- left: 16px;
211
- }
212
-
213
- .sdds-form-textfield {
214
- display: block;
215
- min-width: 208px;
216
- }
217
- .sdds-form-textfield-nomin {
218
- min-width: auto;
219
- }
220
-
221
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input {
222
- padding-top: var(--sdds-spacing-element-24);
223
- padding-bottom: 15px;
224
- }
225
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ~ .sdds-textfield-label-inside {
226
- top: 20px;
227
- }
228
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::placeholder {
229
- color: transparent;
230
- }
231
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::input-placeholder {
232
- color: transparent;
233
- }
234
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:placeholder {
235
- color: transparent;
236
- }
237
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ::placeholder {
238
- color: transparent;
239
- }
240
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:focus::placeholder {
241
- transition: color 0.35s ease;
242
- color: var(--sdds-textfield-placeholder-focus-color);
243
- }
244
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md {
245
- padding-top: var(--sdds-spacing-element-20);
246
- padding-bottom: 11px;
247
- }
248
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ~ .sdds-textfield-label-inside {
249
- top: 16px;
250
- }
251
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::placeholder {
252
- color: transparent;
253
- }
254
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::input-placeholder {
255
- color: transparent;
256
- }
257
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:placeholder {
258
- color: transparent;
259
- }
260
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ::placeholder {
261
- color: transparent;
262
- }
263
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:focus::placeholder {
264
- transition: color 0.35s ease;
265
- color: var(--sdds-textfield-placeholder-focus-color);
266
- }
267
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm {
268
- padding-top: var(--sdds-spacing-element-20);
269
- padding-bottom: 11px;
270
- }
271
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ~ .sdds-textfield-label-inside {
272
- top: 16px;
273
- }
274
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::placeholder {
275
- color: transparent;
276
- }
277
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::input-placeholder {
278
- color: transparent;
279
- }
280
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:placeholder {
281
- color: transparent;
282
- }
283
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ::placeholder {
284
- color: transparent;
285
- }
286
- .sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:focus::placeholder {
287
- transition: color 0.35s ease;
288
- color: var(--sdds-textfield-placeholder-focus-color);
289
- }
290
- .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-sm ~ .sdds-textfield-label-inside, .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-sm ~ .sdds-textfield-label-inside {
291
- font: var(--sdds-detail-07);
292
- letter-spacing: var(--sdds-detail-07-ls);
293
- transition: 0.1s ease all;
294
- top: 8px;
295
- }
296
- .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-md ~ .sdds-textfield-label-inside, .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-md ~ .sdds-textfield-label-inside {
297
- font: var(--sdds-detail-07);
298
- letter-spacing: var(--sdds-detail-07-ls);
299
- transition: 0.1s ease all;
300
- top: 8px;
301
- }
302
- .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input ~ .sdds-textfield-label-inside, .sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input ~ .sdds-textfield-label-inside {
303
- font: var(--sdds-detail-07);
304
- letter-spacing: var(--sdds-detail-07-ls);
305
- transition: 0.1s ease all;
306
- top: 12px;
307
- }
308
-
309
- .sdds-textfield-bar {
310
- position: absolute;
311
- width: 100%;
312
- }
313
- .sdds-textfield-bar::before, .sdds-textfield-bar::after {
314
- content: "";
315
- height: 2px;
316
- top: 54px;
317
- width: 0;
318
- position: absolute;
319
- background: var(--sdds-textfield-bar);
320
- transition: 0.35s ease all;
321
- }
322
- .sdds-form-textfield-md .sdds-textfield-bar::before, .sdds-form-textfield-md .sdds-textfield-bar::after {
323
- top: 46px;
324
- }
325
- .sdds-form-textfield-sm .sdds-textfield-bar::before, .sdds-form-textfield-sm .sdds-textfield-bar::after {
326
- top: 40px;
327
- }
328
- .sdds-textfield-bar::before {
329
- left: 50%;
330
- }
331
- .sdds-textfield-bar::after {
332
- right: 50%;
333
- }
334
- .sdds-textfield-focus .sdds-textfield-bar::before, .sdds-textfield-focus .sdds-textfield-bar::after {
335
- width: 50%;
336
- }
337
-
338
- .sdds-textfield-helper {
339
- font: var(--sdds-detail-05);
340
- letter-spacing: var(--sdds-detail-05-ls);
341
- display: flex;
342
- justify-content: space-between;
343
- flex-basis: 100%;
344
- padding-top: var(--sdds-spacing-element-4);
345
- color: var(--sdds-textfield-helper);
346
- }
347
- .sdds-textfield-helper .sdds-textfield-textcounter {
348
- margin-left: auto;
349
- }
350
-
351
- .sdds-form-textfield-disabled {
352
- /* slot[name="sdds-prefix"]::slotted(*),
353
- slot[name="sdds-suffix"]::slotted(*) {
354
- color: var(--sdds-textfield-disabled-ps-color);
355
- }
356
- slot[name="sdds-label"]::slotted(*) {
357
- color: var(--sdds-textfield-disabled-label);
358
- } */
359
- }
360
- .sdds-form-textfield-disabled .sdds-textfield-container {
361
- border-bottom-color: transparent;
362
- }
363
- .sdds-form-textfield-disabled .sdds-textfield-slot-wrap-prefix > *,
364
- .sdds-form-textfield-disabled .sdds-textfield-slot-wrap-suffix > * {
365
- color: var(--sdds-textfield-disabled-ps-color);
366
- }
367
- .sdds-form-textfield-disabled .sdds-textfield-label-outside > * {
368
- color: var(--sdds-textfield-disabled-label);
369
- }
370
-
371
- .sdds-textfield-icon__readonly {
372
- display: none;
373
- position: absolute;
374
- right: 18px;
375
- top: 50%;
376
- transform: translateY(-50%);
377
- }
378
- .sdds-textfield-icon__readonly-label {
379
- display: none;
380
- position: absolute;
381
- right: 18px;
382
- bottom: -24px;
383
- font: var(--sdds-detail-05);
384
- letter-spacing: var(--sdds-detail-05-ls);
385
- padding: 8px;
386
- color: var(--sdds-white);
387
- background-color: var(--sdds-grey-800);
388
- white-space: nowrap;
389
- border-radius: 4px 0 4px 4px;
390
- }
391
-
392
- .sdds-form-textfield-readonly {
393
- pointer-events: none;
394
- }
395
- .sdds-form-textfield-readonly .sdds-textfield-icon__readonly {
396
- display: block;
397
- }
398
- .sdds-form-textfield-readonly .sdds-textfield-icon__readonly:hover ~ .sdds-textfield-icon__readonly-label {
399
- display: block;
400
- }
401
- .sdds-form-textfield-readonly .sdds-textfield-input {
402
- padding-right: 54px;
403
- background-color: transparent;
404
- }
405
- .sdds-form-textfield-readonly .sdds-textfield-container {
406
- background-color: transparent;
407
- }
408
-
409
- .sdds-form-textfield-success .sdds-textfield-container {
410
- border-bottom-color: var(--sdds-textfield-border-bottom-success);
411
- }
412
-
413
- .sdds-form-textfield-error .sdds-textfield-helper {
414
- color: var(--sdds-textfield-helper-error);
415
- }
416
- .sdds-form-textfield-error .sdds-textfield-container {
417
- border-bottom-color: var(--sdds-textfield-border-bottom-error);
418
- }
419
- .sdds-form-textfield-error .sdds-textfield-bar::before, .sdds-form-textfield-error .sdds-textfield-bar::after {
420
- background: var(--sdds-textfield-bar-error);
421
- }
422
- .sdds-form-textfield-error slot[name=sdds-prefix]::slotted(sdds-icon),
423
- .sdds-form-textfield-error slot[name=sdds-suffix]::slotted(sdds-icon) {
424
- color: var(--sdds-textfield-icon-error);
425
- }
426
-
427
- .sdds-textfield-helper-error-state {
428
- display: flex;
429
- flex-wrap: nowrap;
430
- }
431
- .sdds-textfield-helper-error-state svg {
432
- margin-right: 8px;
433
- }
434
-
435
- .sdds-textfield-textcounter {
436
- font: var(--sdds-detail-05);
437
- letter-spacing: var(--sdds-detail-05-ls);
438
- color: var(--sdds-textfield-textcounter);
439
- float: right;
440
- }
441
- .sdds-textfield-textcounter .sdds-textfield-textcounter-divider {
442
- color: var(--sdds-textfield-textcounter-divider);
443
- }
444
-
445
- /* slot[name="sdds-prefix"]::slotted(*),
446
- slot[name="sdds-suffix"]::slotted(*) {
447
- @include type-style("detail-02");
448
- align-self: center;
449
- color: var(--sdds-textfield-ps-color);
450
- } */
451
- .sdds-textfield-slot-wrap-prefix {
452
- align-self: center;
453
- }
454
- .sdds-textfield-slot-wrap-prefix > * {
455
- font: var(--sdds-detail-02);
456
- letter-spacing: var(--sdds-detail-02-ls);
457
- margin-left: 16px;
458
- color: var(--sdds-textfield-ps-color);
459
- }
460
- .sdds-textfield-slot-wrap-prefix.sdds-textfield-error sdds-icon,
461
- .sdds-textfield-slot-wrap-prefix.sdds-textfield-error .sdds-icon {
462
- color: var(--sdds-negative);
463
- }
464
-
465
- .sdds-textfield-slot-wrap-suffix {
466
- align-self: center;
467
- }
468
- .sdds-textfield-slot-wrap-suffix > * {
469
- font: var(--sdds-detail-02);
470
- letter-spacing: var(--sdds-detail-02-ls);
471
- margin-right: 16px;
472
- color: var(--sdds-textfield-ps-color);
473
- }
474
- .sdds-textfield-slot-wrap-suffix.sdds-textfield-error sdds-icon,
475
- .sdds-textfield-slot-wrap-suffix.sdds-textfield-error .sdds-icon {
476
- color: var(--sdds-negative);
477
- }
478
-
479
- slot[name=sdds-prefix]::slotted(sdds-icon),
480
- slot[name=sdds-suffix]::slotted(sdds-icon) {
481
- font-size: 24px;
482
- line-height: 0;
483
- }
484
-
485
- slot[name=sdds-prefix]::slotted(*) {
486
- padding-left: var(--sdds-spacing-element-20);
487
- }
488
- slot[name=sdds-prefix]::slotted(*) ~ .sdds-textfield-input {
489
- padding-left: var(--sdds-spacing-element-12);
490
- }
491
-
492
- slot[name=sdds-suffix]::slotted(*) {
493
- padding-right: var(--sdds-spacing-element-20);
494
- }