@koobiq/components 18.3.0 → 18.4.1

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 (162) hide show
  1. package/accordion/accordion-tokens.scss +0 -2
  2. package/alert/alert-tokens.scss +0 -2
  3. package/autocomplete/autocomplete-tokens.scss +0 -2
  4. package/badge/badge-tokens.scss +0 -2
  5. package/button/button-tokens.scss +7 -2
  6. package/button/button.scss +0 -2
  7. package/button-toggle/button-toggle-tokens.scss +0 -2
  8. package/checkbox/checkbox-tokens.scss +0 -2
  9. package/code-block/_code-block-theme.scss +1 -1
  10. package/code-block/actionbar.component.d.ts +14 -4
  11. package/code-block/code-block-tokens.scss +4 -6
  12. package/code-block/code-block.component.d.ts +12 -15
  13. package/code-block/code-block.types.d.ts +12 -0
  14. package/core/common-behaviors/color.d.ts +1 -1
  15. package/core/formatters/date/formatter.pipe.d.ts +82 -65
  16. package/core/formatters/index.d.ts +1 -1
  17. package/core/forms/forms-tokens.scss +0 -2
  18. package/core/forms/validators.d.ts +21 -0
  19. package/core/locales/en-US.d.ts +13 -0
  20. package/core/locales/es-LA.d.ts +13 -0
  21. package/core/locales/fa-IR.d.ts +13 -0
  22. package/core/locales/locale-service.d.ts +78 -0
  23. package/core/locales/pt-BR.d.ts +13 -0
  24. package/core/locales/ru-RU.d.ts +13 -0
  25. package/core/locales/zh-CN.d.ts +13 -0
  26. package/core/option/optgroup-tokens.scss +0 -2
  27. package/core/option/option-action-tokens.scss +0 -2
  28. package/core/option/option-tokens.scss +0 -2
  29. package/core/select/common.d.ts +2 -0
  30. package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss +0 -2
  31. package/core/services/theme.service.d.ts +2 -2
  32. package/core/styles/theming/_components-theming.scss +1 -1
  33. package/core/styles/theming/_theming.scss +1 -1
  34. package/core/styles/theming/scrollbar-tokens.scss +0 -2
  35. package/datepicker/_datepicker-theme.scss +1 -1
  36. package/datepicker/datepicker-tokens.scss +2 -4
  37. package/divider/divider-tokens.scss +0 -2
  38. package/dl/dl-tokens.scss +0 -2
  39. package/dropdown/_dropdown-theme.scss +1 -1
  40. package/dropdown/dropdown-tokens.scss +1 -3
  41. package/empty-state/empty-state-tokens.scss +0 -2
  42. package/esm2022/button/button.component.mjs +2 -2
  43. package/esm2022/code-block/actionbar.component.mjs +35 -8
  44. package/esm2022/code-block/code-block.component.mjs +28 -19
  45. package/esm2022/code-block/code-block.types.mjs +5 -2
  46. package/esm2022/core/common-behaviors/color.mjs +2 -2
  47. package/esm2022/core/formatters/date/formatter.pipe.mjs +280 -120
  48. package/esm2022/core/formatters/index.mjs +65 -12
  49. package/esm2022/core/forms/validators.mjs +32 -1
  50. package/esm2022/core/locales/en-US.mjs +14 -1
  51. package/esm2022/core/locales/es-LA.mjs +14 -1
  52. package/esm2022/core/locales/fa-IR.mjs +14 -1
  53. package/esm2022/core/locales/pt-BR.mjs +14 -1
  54. package/esm2022/core/locales/ru-RU.mjs +14 -1
  55. package/esm2022/core/locales/zh-CN.mjs +14 -1
  56. package/esm2022/core/select/common.mjs +7 -1
  57. package/esm2022/core/services/theme.service.mjs +3 -3
  58. package/esm2022/core/version.mjs +2 -2
  59. package/esm2022/datepicker/datepicker.component.mjs +3 -3
  60. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  61. package/esm2022/file-upload/file-upload.mjs +2 -3
  62. package/esm2022/file-upload/multiple-file-upload.component.mjs +57 -17
  63. package/esm2022/file-upload/single-file-upload.component.mjs +31 -19
  64. package/esm2022/form-field/validate.directive.mjs +21 -1
  65. package/esm2022/markdown/markdown.values.mjs +4 -2
  66. package/esm2022/modal/modal.component.mjs +2 -2
  67. package/esm2022/navbar/navbar-item.component.mjs +2 -2
  68. package/esm2022/navbar/navbar.component.mjs +2 -2
  69. package/esm2022/navbar/vertical-navbar.component.mjs +2 -2
  70. package/esm2022/popover/popover-confirm.component.mjs +3 -3
  71. package/esm2022/popover/popover.component.mjs +3 -3
  72. package/esm2022/select/select.component.mjs +1 -1
  73. package/esm2022/sidepanel/sidepanel-container.component.mjs +3 -3
  74. package/esm2022/splitter/splitter.component.mjs +2 -2
  75. package/esm2022/timezone/timezone-select.component.mjs +20 -10
  76. package/esm2022/toast/toast.component.mjs +3 -3
  77. package/esm2022/tooltip/tooltip.component.mjs +13 -1
  78. package/fesm2022/koobiq-components-button.mjs +2 -2
  79. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  80. package/fesm2022/koobiq-components-code-block.mjs +58 -24
  81. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  82. package/fesm2022/koobiq-components-core.mjs +461 -131
  83. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  84. package/fesm2022/koobiq-components-datepicker.mjs +2 -2
  85. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  86. package/fesm2022/koobiq-components-dropdown.mjs +2 -2
  87. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  88. package/fesm2022/koobiq-components-file-upload.mjs +76 -27
  89. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  90. package/fesm2022/koobiq-components-form-field.mjs +20 -0
  91. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  92. package/fesm2022/koobiq-components-markdown.mjs +3 -1
  93. package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
  94. package/fesm2022/koobiq-components-modal.mjs +2 -2
  95. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  96. package/fesm2022/koobiq-components-navbar.mjs +6 -6
  97. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  98. package/fesm2022/koobiq-components-popover.mjs +4 -4
  99. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  100. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  101. package/fesm2022/koobiq-components-sidepanel.mjs +2 -2
  102. package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
  103. package/fesm2022/koobiq-components-splitter.mjs +1 -1
  104. package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
  105. package/fesm2022/koobiq-components-timezone.mjs +18 -8
  106. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  107. package/fesm2022/koobiq-components-toast.mjs +2 -2
  108. package/fesm2022/koobiq-components-toast.mjs.map +1 -1
  109. package/fesm2022/koobiq-components-tooltip.mjs +12 -0
  110. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  111. package/file-upload/_file-upload-theme.scss +6 -10
  112. package/file-upload/file-upload-tokens.scss +0 -2
  113. package/file-upload/file-upload.d.ts +3 -0
  114. package/file-upload/file-upload.scss +6 -0
  115. package/file-upload/multiple-file-upload.component.d.ts +28 -5
  116. package/file-upload/multiple-file-upload.component.scss +0 -4
  117. package/file-upload/single-file-upload.component.d.ts +13 -4
  118. package/file-upload/single-file-upload.component.scss +0 -12
  119. package/form-field/form-field-tokens.scss +0 -2
  120. package/form-field/hint-tokens.scss +0 -2
  121. package/form-field/validate.directive.d.ts +20 -0
  122. package/icon/icon-button-tokens.scss +0 -2
  123. package/icon/icon-item-tokens.scss +0 -2
  124. package/icon/icon-tokens.scss +0 -2
  125. package/input/input-tokens.scss +0 -2
  126. package/link/link-tokens.scss +0 -2
  127. package/list/list-tokens.scss +0 -2
  128. package/loader-overlay/loader-overlay-tokens.scss +0 -2
  129. package/markdown/markdown-tokens.scss +0 -2
  130. package/markdown/markdown.values.d.ts +3 -0
  131. package/modal/_modal-theme.scss +1 -1
  132. package/modal/modal-tokens.scss +2 -4
  133. package/navbar/_navbar-theme.scss +1 -1
  134. package/navbar/navbar-tokens.scss +2 -10
  135. package/package.json +4 -4
  136. package/popover/_popover-theme.scss +2 -2
  137. package/popover/popover-tokens.scss +2 -4
  138. package/popover/popover.scss +2 -2
  139. package/progress-bar/progress-bar-tokens.scss +0 -2
  140. package/progress-spinner/progress-spinner-tokens.scss +0 -2
  141. package/radio/radio-tokens.scss +0 -2
  142. package/risk-level/risk-level-tokens.scss +0 -2
  143. package/schematics/ng-add/index.js +2 -2
  144. package/scrollbar/scrollbar-tokens.scss +0 -2
  145. package/select/select-tokens.scss +0 -2
  146. package/select/select.component.d.ts +1 -1
  147. package/sidepanel/_sidepanel-theme.scss +1 -1
  148. package/sidepanel/sidepanel-tokens.scss +2 -4
  149. package/table/table-tokens.scss +0 -2
  150. package/tabs/tabs-tokens.scss +0 -2
  151. package/tags/tag-input-tokens.scss +0 -2
  152. package/tags/tag-tokens.scss +0 -2
  153. package/textarea/textarea-tokens.scss +0 -2
  154. package/timezone/timezone-option-tokens.scss +0 -2
  155. package/timezone/timezone-select.component.d.ts +5 -6
  156. package/toast/toast-tokens.scss +4 -3
  157. package/toggle/toggle-tokens.scss +0 -2
  158. package/tooltip/tooltip-tokens.scss +0 -2
  159. package/tooltip/tooltip.component.d.ts +9 -0
  160. package/tree/tree-tokens.scss +0 -2
  161. package/tree-select/tree-select-tokens.scss +0 -2
  162. package/splitter/splitter-tokens.scss +0 -1
@@ -73,6 +73,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
73
73
  };
74
74
  };
75
75
  };
76
+ codeBlock: {
77
+ softWrapOnTooltip: string;
78
+ softWrapOffTooltip: string;
79
+ downloadTooltip: string;
80
+ copiedTooltip: string;
81
+ copyTooltip: string;
82
+ viewAllText: string;
83
+ viewLessText: string;
84
+ openExternalSystemTooltip: string;
85
+ };
86
+ timezone: {
87
+ searchPlaceholder: string;
88
+ };
76
89
  };
77
90
  'zh-CN': {
78
91
  formatters: {
@@ -137,6 +150,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
137
150
  };
138
151
  };
139
152
  };
153
+ codeBlock: {
154
+ softWrapOnTooltip: string;
155
+ softWrapOffTooltip: string;
156
+ downloadTooltip: string;
157
+ copiedTooltip: string;
158
+ copyTooltip: string;
159
+ viewAllText: string;
160
+ viewLessText: string;
161
+ openExternalSystemTooltip: string;
162
+ };
163
+ timezone: {
164
+ searchPlaceholder: string;
165
+ };
140
166
  };
141
167
  'es-LA': {
142
168
  formatters: {
@@ -202,6 +228,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
202
228
  };
203
229
  };
204
230
  };
231
+ codeBlock: {
232
+ softWrapOnTooltip: string;
233
+ softWrapOffTooltip: string;
234
+ downloadTooltip: string;
235
+ copiedTooltip: string;
236
+ copyTooltip: string;
237
+ viewAllText: string;
238
+ viewLessText: string;
239
+ openExternalSystemTooltip: string;
240
+ };
241
+ timezone: {
242
+ searchPlaceholder: string;
243
+ };
205
244
  };
206
245
  'pt-BR': {
207
246
  formatters: {
@@ -267,6 +306,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
267
306
  };
268
307
  };
269
308
  };
309
+ codeBlock: {
310
+ softWrapOnTooltip: string;
311
+ softWrapOffTooltip: string;
312
+ downloadTooltip: string;
313
+ copiedTooltip: string;
314
+ copyTooltip: string;
315
+ viewAllText: string;
316
+ viewLessText: string;
317
+ openExternalSystemTooltip: string;
318
+ };
319
+ timezone: {
320
+ searchPlaceholder: string;
321
+ };
270
322
  };
271
323
  'ru-RU': {
272
324
  formatters: {
@@ -334,6 +386,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
334
386
  };
335
387
  };
336
388
  };
389
+ codeBlock: {
390
+ softWrapOnTooltip: string;
391
+ softWrapOffTooltip: string;
392
+ downloadTooltip: string;
393
+ copiedTooltip: string;
394
+ copyTooltip: string;
395
+ viewAllText: string;
396
+ viewLessText: string;
397
+ openExternalSystemTooltip: string;
398
+ };
399
+ timezone: {
400
+ searchPlaceholder: string;
401
+ };
337
402
  };
338
403
  'fa-IR': {
339
404
  formatters: {
@@ -400,6 +465,19 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
400
465
  };
401
466
  };
402
467
  };
468
+ codeBlock: {
469
+ softWrapOnTooltip: string;
470
+ softWrapOffTooltip: string;
471
+ downloadTooltip: string;
472
+ copiedTooltip: string;
473
+ copyTooltip: string;
474
+ viewAllText: string;
475
+ viewLessText: string;
476
+ openExternalSystemTooltip: string;
477
+ };
478
+ timezone: {
479
+ searchPlaceholder: string;
480
+ };
403
481
  };
404
482
  };
405
483
  export declare const KBQ_LOCALE_DATA: InjectionToken<any>;
@@ -28,4 +28,17 @@ export declare const ptBRLocaleData: {
28
28
  };
29
29
  };
30
30
  };
31
+ codeBlock: {
32
+ softWrapOnTooltip: string;
33
+ softWrapOffTooltip: string;
34
+ downloadTooltip: string;
35
+ copiedTooltip: string;
36
+ copyTooltip: string;
37
+ viewAllText: string;
38
+ viewLessText: string;
39
+ openExternalSystemTooltip: string;
40
+ };
41
+ timezone: {
42
+ searchPlaceholder: string;
43
+ };
31
44
  };
@@ -29,4 +29,17 @@ export declare const ruRULocaleData: {
29
29
  };
30
30
  };
31
31
  };
32
+ codeBlock: {
33
+ softWrapOnTooltip: string;
34
+ softWrapOffTooltip: string;
35
+ downloadTooltip: string;
36
+ copiedTooltip: string;
37
+ copyTooltip: string;
38
+ viewAllText: string;
39
+ viewLessText: string;
40
+ openExternalSystemTooltip: string;
41
+ };
42
+ timezone: {
43
+ searchPlaceholder: string;
44
+ };
32
45
  };
@@ -28,4 +28,17 @@ export declare const zhCNLocaleData: {
28
28
  };
29
29
  };
30
30
  };
31
+ codeBlock: {
32
+ softWrapOnTooltip: string;
33
+ softWrapOffTooltip: string;
34
+ downloadTooltip: string;
35
+ copiedTooltip: string;
36
+ copyTooltip: string;
37
+ viewAllText: string;
38
+ viewLessText: string;
39
+ openExternalSystemTooltip: string;
40
+ };
41
+ timezone: {
42
+ searchPlaceholder: string;
43
+ };
31
44
  };
@@ -1,5 +1,3 @@
1
- /* stylelint-disable no-unknown-custom-properties */
2
-
3
1
  .kbq-optgroup {
4
2
  --kbq-optgroup-size-padding-left: 17px;
5
3
  --kbq-optgroup-font-default-font-size: var(--kbq-typography-subheading-font-size);
@@ -1,5 +1,3 @@
1
- /* stylelint-disable no-unknown-custom-properties */
2
-
3
1
  .kbq-option-action {
4
2
  --kbq-list-font-text-line-height: var(--kbq-typography-text-normal-line-height);
5
3
  }
@@ -1,5 +1,3 @@
1
- /* stylelint-disable no-unknown-custom-properties */
2
-
3
1
  .kbq-option {
4
2
  --kbq-list-size-container-padding-left: var(--kbq-size-m);
5
3
  --kbq-list-size-container-padding-right: var(--kbq-size-m);
@@ -20,6 +20,8 @@ export declare class KbqSelectSearch implements AfterContentInit, OnDestroy {
20
20
  isSearchChanged: boolean;
21
21
  get ngControl(): any;
22
22
  constructor(formField: KbqFormFieldRef);
23
+ setPlaceholder(value: string): void;
24
+ hasPlaceholder(): boolean;
23
25
  focus(): void;
24
26
  reset(): void;
25
27
  value(): any;
@@ -1,5 +1,3 @@
1
- /* stylelint-disable no-unknown-custom-properties */
2
-
3
1
  .kbq-pseudo-checkbox {
4
2
  --kbq-checkbox-size-normal-width: var(--kbq-size-l);
5
3
  --kbq-checkbox-size-normal-border-width: var(--kbq-size-border-width);
@@ -16,11 +16,11 @@ export declare enum KbqThemeSelector {
16
16
  * This is the standard theme that is applied
17
17
  * when the application is first loaded if nothing else provided
18
18
  */
19
- Default = "kbq-theme-light",
19
+ Default = "kbq-light",
20
20
  /**
21
21
  * This theme is used to provide a darker visual experience, often preferred in low-light environments.
22
22
  */
23
- Dark = "kbq-theme-dark"
23
+ Dark = "kbq-dark"
24
24
  }
25
25
  export declare const KbqDefaultThemes: KbqTheme[];
26
26
  export declare class ThemeService<T extends KbqTheme | null = KbqTheme> implements OnDestroy {
@@ -969,7 +969,7 @@
969
969
 
970
970
  $modal: (
971
971
  container-background: map.get($tokens, 'modal-#{$scheme}-container-background'),
972
- container-box-shadow: map.get($tokens, 'modal-#{$scheme}-container-box-shadow'),
972
+ container-box-shadow: map.get($tokens, 'modal-#{$scheme}-container-shadow'),
973
973
  close-button: map.get($tokens, 'modal-#{$scheme}-close-button-color'),
974
974
  header: map.get($tokens, 'modal-#{$scheme}-header-text-color'),
975
975
  content: map.get($tokens, 'modal-#{$scheme}-content-text-color'),
@@ -42,7 +42,7 @@
42
42
  }
43
43
 
44
44
  // Mixin that renders all of the core styles that depend on the theme.
45
- /* stylelint-disable no-unknown-custom-properties */
45
+
46
46
  @mixin kbq-core-theme($theme: null) {
47
47
  .kbq-app-background {
48
48
  background: var(--kbq-background-bg);
@@ -1,5 +1,3 @@
1
- /* stylelint-disable no-unknown-custom-properties */
2
-
3
1
  .kbq-scrollbar {
4
2
  --kbq-scrollbar-size-track-dimension: var(--kbq-size-l);
5
3
  --kbq-scrollbar-size-track-padding-vertical: var(--kbq-size-3xs);
@@ -8,7 +8,7 @@
8
8
  @mixin kbq-datepicker-theme() {
9
9
  .kbq-datepicker__content {
10
10
  background: var(--kbq-datepicker-container-background);
11
- box-shadow: var(--kbq-datepicker-container-box-shadow);
11
+ box-shadow: var(--kbq-datepicker-container-shadow);
12
12
  }
13
13
 
14
14
  .kbq-calendar__table-header {
@@ -1,5 +1,3 @@
1
- /* stylelint-disable no-unknown-custom-properties */
2
-
3
1
  .kbq-datepicker__content {
4
2
  --kbq-datepicker-size-container-padding-vertical: var(--kbq-size-m);
5
3
  --kbq-datepicker-size-container-border-radius: var(--kbq-size-s);
@@ -22,7 +20,7 @@
22
20
 
23
21
  :where(.kbq-light, .theme-light, .kbq-theme-light) {
24
22
  --kbq-datepicker-container-background: var(--kbq-background-card);
25
- --kbq-datepicker-container-box-shadow: var(--kbq-shadow-popup);
23
+ --kbq-datepicker-container-shadow: var(--kbq-shadow-popup);
26
24
  --kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);
27
25
  --kbq-datepicker-header-divider: var(--kbq-line-contrast-less);
28
26
  --kbq-datepicker-grid-cell-default-background: transparent;
@@ -40,7 +38,7 @@
40
38
 
41
39
  :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
42
40
  --kbq-datepicker-container-background: var(--kbq-background-card);
43
- --kbq-datepicker-container-box-shadow: var(--kbq-shadow-popup);
41
+ --kbq-datepicker-container-shadow: var(--kbq-shadow-popup);
44
42
  --kbq-datepicker-header-text: var(--kbq-foreground-contrast-tertiary);
45
43
  --kbq-datepicker-header-divider: var(--kbq-line-contrast-less);
46
44
  --kbq-datepicker-grid-cell-default-background: transparent;
@@ -1,5 +1,3 @@
1
- /* stylelint-disable no-unknown-custom-properties */
2
-
3
1
  .kbq-divider {
4
2
  --kbq-divider-size-horizontal-width: 1px;
5
3
  --kbq-divider-size-horizontal-margin-vertical: var(--kbq-size-xxs);
package/dl/dl-tokens.scss CHANGED
@@ -1,5 +1,3 @@
1
- /* stylelint-disable no-unknown-custom-properties */
2
-
3
1
  .kbq-dl {
4
2
  --kbq-description-list-size-horizontal-content-gap-horizontal: var(--kbq-size-l);
5
3
  --kbq-description-list-size-horizontal-gap-vertical: var(--kbq-size-l);
@@ -16,7 +16,7 @@
16
16
 
17
17
  @mixin kbq-dropdown-theme() {
18
18
  .kbq-dropdown__panel {
19
- box-shadow: var(--kbq-dropdown-container-box-shadow);
19
+ box-shadow: var(--kbq-dropdown-container-shadow);
20
20
  background: var(--kbq-dropdown-container-background);
21
21
  }
22
22
 
@@ -1,5 +1,3 @@
1
- /* stylelint-disable no-unknown-custom-properties */
2
-
3
1
  .kbq-dropdown__panel {
4
2
  --kbq-dropdown-size-container-width-min: var(--kbq-size-7xl);
5
3
  --kbq-dropdown-size-container-width-max: 640px;
@@ -50,7 +48,7 @@
50
48
 
51
49
  :where(.kbq-light, .theme-light, .kbq-theme-light) {
52
50
  --kbq-dropdown-container-background: var(--kbq-background-card);
53
- --kbq-dropdown-container-box-shadow: var(--kbq-shadow-popup);
51
+ --kbq-dropdown-container-shadow: var(--kbq-shadow-popup);
54
52
  --kbq-list-default-container-background: transparent;
55
53
  --kbq-list-default-text-color: var(--kbq-foreground-contrast);
56
54
  --kbq-list-default-icon-color: var(--kbq-icon-contrast);
@@ -1,5 +1,3 @@
1
- /* stylelint-disable no-unknown-custom-properties */
2
-
3
1
  .kbq-empty-state {
4
2
  --kbq-empty-state-size-big-max-width: 480px;
5
3
  --kbq-empty-state-size-big-padding-horizontal: var(--kbq-size-6xl);