@carbon/ibm-products 2.64.0 → 2.65.0

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 (104) hide show
  1. package/css/index-full-carbon.css +59 -143
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +8 -0
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +59 -143
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +59 -143
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Checklist/Checklist.js +8 -7
  18. package/es/components/CoachmarkStack/CoachmarkStack.d.ts +5 -0
  19. package/es/components/CoachmarkStack/CoachmarkStack.js +9 -3
  20. package/es/components/CoachmarkStack/CoachmarkStackHome.d.ts +5 -0
  21. package/es/components/CoachmarkStack/CoachmarkStackHome.js +39 -6
  22. package/es/components/CreateFullPage/CreateFullPage.d.ts +1 -1
  23. package/es/components/CreateFullPage/CreateFullPage.js +23 -18
  24. package/es/components/Datagrid/Datagrid/DraggableElement.d.ts +3 -1
  25. package/es/components/Datagrid/Datagrid/DraggableElement.js +3 -1
  26. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +3 -0
  27. package/es/components/InlineTip/InlineTip.js +3 -3
  28. package/es/components/InterstitialScreen/InterstitialScreen.d.ts +36 -59
  29. package/es/components/InterstitialScreen/InterstitialScreen.js +75 -271
  30. package/es/components/InterstitialScreen/InterstitialScreenBody.d.ts +27 -0
  31. package/es/components/InterstitialScreen/InterstitialScreenBody.js +110 -0
  32. package/es/components/InterstitialScreen/InterstitialScreenFooter.d.ts +47 -0
  33. package/es/components/InterstitialScreen/InterstitialScreenFooter.js +184 -0
  34. package/es/components/InterstitialScreen/InterstitialScreenHeader.d.ts +35 -0
  35. package/es/components/InterstitialScreen/InterstitialScreenHeader.js +90 -0
  36. package/es/components/{InterstitialScreenView → InterstitialScreen/_story-assets/InterstitialScreenView}/InterstitialScreenView.d.ts +1 -0
  37. package/{lib/components → es/components/InterstitialScreen/_story-assets}/InterstitialScreenViewModule/InterstitialScreenViewModule.d.ts +8 -0
  38. package/es/components/NotificationsPanel/NotificationsPanel.js +15 -10
  39. package/es/components/PageHeader/PageHeader.js +1 -1
  40. package/es/components/SidePanel/SidePanel.js +3 -2
  41. package/es/components/Tearsheet/Tearsheet.js +3 -2
  42. package/es/components/index.d.ts +0 -2
  43. package/es/global/js/hooks/useOverflowItems/useOverflowItems.d.ts +2 -2
  44. package/es/global/js/package-settings.d.ts +0 -2
  45. package/es/global/js/package-settings.js +0 -2
  46. package/es/index.js +0 -2
  47. package/es/settings.d.ts +0 -2
  48. package/lib/components/Checklist/Checklist.js +7 -6
  49. package/lib/components/CoachmarkStack/CoachmarkStack.d.ts +5 -0
  50. package/lib/components/CoachmarkStack/CoachmarkStack.js +9 -3
  51. package/lib/components/CoachmarkStack/CoachmarkStackHome.d.ts +5 -0
  52. package/lib/components/CoachmarkStack/CoachmarkStackHome.js +37 -4
  53. package/lib/components/CreateFullPage/CreateFullPage.d.ts +1 -1
  54. package/lib/components/CreateFullPage/CreateFullPage.js +22 -17
  55. package/lib/components/Datagrid/Datagrid/DraggableElement.d.ts +3 -1
  56. package/lib/components/Datagrid/Datagrid/DraggableElement.js +3 -1
  57. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +3 -0
  58. package/lib/components/InlineTip/InlineTip.js +2 -2
  59. package/lib/components/InterstitialScreen/InterstitialScreen.d.ts +36 -59
  60. package/lib/components/InterstitialScreen/InterstitialScreen.js +73 -267
  61. package/lib/components/InterstitialScreen/InterstitialScreenBody.d.ts +27 -0
  62. package/lib/components/InterstitialScreen/InterstitialScreenBody.js +114 -0
  63. package/lib/components/InterstitialScreen/InterstitialScreenFooter.d.ts +47 -0
  64. package/lib/components/InterstitialScreen/InterstitialScreenFooter.js +188 -0
  65. package/lib/components/InterstitialScreen/InterstitialScreenHeader.d.ts +35 -0
  66. package/lib/components/InterstitialScreen/InterstitialScreenHeader.js +94 -0
  67. package/lib/components/{InterstitialScreenView → InterstitialScreen/_story-assets/InterstitialScreenView}/InterstitialScreenView.d.ts +1 -0
  68. package/{es/components → lib/components/InterstitialScreen/_story-assets}/InterstitialScreenViewModule/InterstitialScreenViewModule.d.ts +8 -0
  69. package/lib/components/NotificationsPanel/NotificationsPanel.js +14 -9
  70. package/lib/components/PageHeader/PageHeader.js +1 -1
  71. package/lib/components/SidePanel/SidePanel.js +3 -2
  72. package/lib/components/Tearsheet/Tearsheet.js +3 -2
  73. package/lib/components/index.d.ts +0 -2
  74. package/lib/global/js/hooks/useOverflowItems/useOverflowItems.d.ts +2 -2
  75. package/lib/global/js/package-settings.d.ts +0 -2
  76. package/lib/global/js/package-settings.js +0 -2
  77. package/lib/index.js +0 -10
  78. package/lib/settings.d.ts +0 -2
  79. package/package.json +7 -7
  80. package/scss/components/Coachmark/_coachmark-overlay.scss +2 -0
  81. package/scss/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss +1 -0
  82. package/scss/components/CoachmarkStack/_coachmark-stack.scss +25 -0
  83. package/scss/components/InterstitialScreen/_interstitial-screen.scss +29 -137
  84. package/scss/components/NotificationsPanel/_notifications-panel.scss +2 -0
  85. package/scss/components/PageHeader/_page-header.scss +5 -0
  86. package/scss/components/_index-with-carbon.scss +0 -2
  87. package/scss/components/_index.scss +0 -2
  88. package/telemetry.yml +17 -8
  89. package/es/components/InterstitialScreenView/InterstitialScreenView.js +0 -78
  90. package/es/components/InterstitialScreenView/index.d.ts +0 -8
  91. package/es/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js +0 -81
  92. package/es/components/InterstitialScreenViewModule/index.d.ts +0 -8
  93. package/lib/components/InterstitialScreenView/InterstitialScreenView.js +0 -78
  94. package/lib/components/InterstitialScreenView/index.d.ts +0 -8
  95. package/lib/components/InterstitialScreenViewModule/InterstitialScreenViewModule.js +0 -81
  96. package/lib/components/InterstitialScreenViewModule/index.d.ts +0 -8
  97. package/scss/components/InterstitialScreenView/_carbon-imports.scss +0 -9
  98. package/scss/components/InterstitialScreenView/_index-with-carbon.scss +0 -9
  99. package/scss/components/InterstitialScreenView/_index.scss +0 -8
  100. package/scss/components/InterstitialScreenView/_interstitial-screen-view.scss +0 -25
  101. package/scss/components/InterstitialScreenViewModule/_carbon-imports.scss +0 -9
  102. package/scss/components/InterstitialScreenViewModule/_index-with-carbon.scss +0 -9
  103. package/scss/components/InterstitialScreenViewModule/_index.scss +0 -8
  104. package/scss/components/InterstitialScreenViewModule/_interstitial-screen-view-module.scss +0 -59
@@ -1950,6 +1950,8 @@ p.c4p--about-modal__copyright-text:first-child {
1950
1950
  display: flex;
1951
1951
  align-items: center;
1952
1952
  justify-content: flex-end;
1953
+ margin-block-start: 1rem;
1954
+ padding-block-end: 1rem;
1953
1955
  }
1954
1956
  .c4p--coachmark-overlay__light .c4p--coachmark-overlay__body .cds--link {
1955
1957
  color: var(--cds-link-inverse, #78a9ff);
@@ -2352,6 +2354,7 @@ p.c4p--about-modal__copyright-text:first-child {
2352
2354
  }
2353
2355
 
2354
2356
  .c4p--coachmark-overlay-elements__element-stepped-media {
2357
+ padding: 0 1rem;
2355
2358
  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
2356
2359
  block-size: 8rem;
2357
2360
  margin-block-end: 1rem;
@@ -2423,6 +2426,26 @@ p.c4p--about-modal__copyright-text:first-child {
2423
2426
  .c4p--coachmark-stacked-home__icon-idea {
2424
2427
  margin-block-end: 0.5rem;
2425
2428
  }
2429
+ .c4p--coachmark-stacked-home li {
2430
+ display: block;
2431
+ max-inline-size: 100%;
2432
+ white-space: nowrap;
2433
+ }
2434
+ .c4p--coachmark-stacked-home button, .c4p--coachmark-stacked-home__navLinkLabels-tooltip {
2435
+ max-inline-size: 100%;
2436
+ }
2437
+ .c4p--coachmark-stacked-home button .cds--tooltip-content, .c4p--coachmark-stacked-home__navLinkLabels-tooltip .cds--tooltip-content {
2438
+ color: var(--cds-text-primary, #161616);
2439
+ margin-inline-start: 0.375rem;
2440
+ max-inline-size: 100%;
2441
+ }
2442
+ .c4p--coachmark-stacked-home__navLinkLabels-text {
2443
+ display: inline-block;
2444
+ overflow: hidden;
2445
+ max-inline-size: 100%;
2446
+ text-overflow: ellipsis;
2447
+ white-space: nowrap;
2448
+ }
2426
2449
 
2427
2450
  .c4p--combo-button {
2428
2451
  position: relative;
@@ -5231,6 +5254,10 @@ button.c4p--add-select__global-filter-toggle--open {
5231
5254
  transition: background-color 240ms cubic-bezier(0.2, 0, 0.38, 0.9);
5232
5255
  }
5233
5256
  .c4p--notifications-panel__container .c4p--notifications-panel__notification .c4p--notifications-panel__notification-title {
5257
+ font-size: var(--cds-heading-01-font-size, 0.875rem);
5258
+ font-weight: var(--cds-heading-01-font-weight, 600);
5259
+ line-height: var(--cds-heading-01-line-height, 1.42857);
5260
+ letter-spacing: var(--cds-heading-01-letter-spacing, 0.16px);
5234
5261
  color: var(--cds-text-secondary, #525252);
5235
5262
  margin-block-end: 0.25rem;
5236
5263
  font-weight: 400;
@@ -7131,6 +7158,7 @@ button.c4p--add-select__global-filter-toggle--open {
7131
7158
  z-index: 7999;
7132
7159
  display: inline-block; /* cause top/bottom margin to reserve space */
7133
7160
  background-color: var(--cds-background, #ffffff);
7161
+ border-block-end: 1px solid var(--cds-border-subtle-00, #e0e0e0);
7134
7162
  color: var(--cds-text-primary, #161616);
7135
7163
  inline-size: 100%;
7136
7164
  /* stylelint-disable-next-line carbon/layout-use */
@@ -7144,6 +7172,9 @@ button.c4p--add-select__global-filter-toggle--open {
7144
7172
  --c4p--page-header--button-set-in-breadcrumb-width-px: initial;
7145
7173
  --c4p--page-header--navigation-buffer-top: $spacing-06;
7146
7174
  }
7175
+ .c4p--page-header.c4p--page-header--without-background {
7176
+ border-block-end: none;
7177
+ }
7147
7178
  .c4p--page-header.c4p--page-header--has-navigation-tags-only {
7148
7179
  --c4p--page-header--navigation-buffer-top: $spacing-04;
7149
7180
  }
@@ -14158,28 +14189,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
14158
14189
 
14159
14190
  /* stylelint-disable max-nesting-depth */
14160
14191
  /* stylelint-disable declaration-no-important */
14161
- .c4p--interstitial-screen {
14162
- position: fixed;
14163
- z-index: 6001;
14164
- inset-block-start: 0;
14165
- inset-inline: 0;
14166
- }
14167
- .c4p--interstitial-screen .c4p--carousel {
14168
- display: flex;
14169
- flex-direction: column;
14170
- min-block-size: 100%;
14171
- }
14172
- .c4p--interstitial-screen .c4p--carousel__elements-container {
14173
- display: flex;
14174
- flex: 1;
14175
- flex-direction: column;
14176
- }
14177
- .c4p--interstitial-screen .c4p--carousel__elements {
14178
- flex: 1;
14179
- }
14180
- .c4p--interstitial-screen .c4p--interstitial-screen--auto-height-container {
14181
- flex: 1;
14182
- }
14183
14192
  .c4p--interstitial-screen--body {
14184
14193
  overflow: hidden auto;
14185
14194
  flex-grow: 1;
@@ -14187,15 +14196,8 @@ th.c4p--datagrid__select-all-toggle-on.button {
14187
14196
  margin: 0;
14188
14197
  background-color: var(--cds-background, #ffffff);
14189
14198
  }
14190
- .c4p--interstitial-screen--body-grid {
14191
- padding: 0 !important;
14192
- block-size: 100%;
14193
- }
14194
- .c4p--interstitial-screen--body-row {
14195
- block-size: 100%;
14196
- }
14197
14199
  .c4p--interstitial-screen--progress {
14198
- margin: 2rem 1rem 0.75rem;
14200
+ margin-block-end: 0.75rem;
14199
14201
  }
14200
14202
  .c4p--interstitial-screen__carousel {
14201
14203
  block-size: 100%;
@@ -14204,29 +14206,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
14204
14206
  flex: 0 0 100% !important;
14205
14207
  scroll-snap-align: start;
14206
14208
  }
14207
- .c4p--interstitial-screen--container {
14208
- margin: 8rem auto;
14209
- background-color: var(--cds-background, #ffffff);
14210
- max-inline-size: 82rem;
14211
- min-inline-size: 47rem;
14212
- }
14213
- .c4p--interstitial-screen--media-container {
14214
- overflow: hidden;
14215
- }
14216
- .c4p--interstitial-screen--media {
14217
- block-size: 100%;
14218
- inline-size: 100%;
14219
- margin-inline-end: -2.5rem;
14220
- }
14221
- @media (max-width: 81.98rem) {
14222
- .c4p--interstitial-screen--media {
14223
- margin-inline-end: -2rem;
14224
- }
14225
- }
14226
- .c4p--interstitial-screen--stepped-animated-media {
14227
- overflow: hidden;
14228
- block-size: 100%;
14229
- }
14230
14209
  .c4p--interstitial-screen--internal-body {
14231
14210
  padding: 0 !important;
14232
14211
  margin: 0 !important;
@@ -14236,18 +14215,32 @@ th.c4p--datagrid__select-all-toggle-on.button {
14236
14215
  background-color: var(--cds-background, #ffffff);
14237
14216
  margin-block-end: 0 !important;
14238
14217
  min-block-size: 3rem;
14218
+ padding-block-start: 1.5rem;
14219
+ padding-inline-start: 2rem !important;
14239
14220
  }
14240
14221
  .c4p--interstitial-screen--internal-header:empty {
14241
14222
  min-block-size: 0;
14242
14223
  }
14243
- .c4p--interstitial-screen--internal-header h2 {
14224
+ .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer {
14225
+ margin-block-end: 1rem;
14226
+ }
14227
+ .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h2 {
14244
14228
  font-size: var(--cds-productive-heading-04-font-size, 1.75rem);
14245
14229
  font-weight: var(--cds-productive-heading-04-font-weight, 400);
14246
14230
  line-height: var(--cds-productive-heading-04-line-height, 1.28572);
14247
14231
  letter-spacing: var(--cds-productive-heading-04-letter-spacing, 0);
14248
- padding: 0 1rem 1.5rem;
14232
+ margin-block-end: 0.5rem;
14249
14233
  }
14250
- .c4p--interstitial-screen--internal-header h2:empty {
14234
+ .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h2:empty {
14235
+ padding: 0;
14236
+ }
14237
+ .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h3 {
14238
+ font-size: var(--cds-productive-heading-03-font-size, 1.25rem);
14239
+ font-weight: var(--cds-productive-heading-03-font-weight, 400);
14240
+ line-height: var(--cds-productive-heading-03-line-height, 1.4);
14241
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing, 0);
14242
+ }
14243
+ .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--titleContainer h3:empty {
14251
14244
  padding: 0;
14252
14245
  }
14253
14246
  .c4p--interstitial-screen--internal-header--has-title {
@@ -14257,13 +14250,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
14257
14250
  .c4p--interstitial-screen--internal-header--has-title .c4p--interstitial-screen--progress {
14258
14251
  margin-block-start: 0;
14259
14252
  }
14260
- .c4p--interstitial-screen--internal-header > .c4p--interstitial-screen--close-icon {
14261
- position: absolute !important;
14262
- z-index: 1;
14263
- inline-size: 3rem;
14264
- inset-block-start: 0;
14265
- inset-inline-end: 0;
14266
- }
14267
14253
  .c4p--interstitial-screen--footer {
14268
14254
  display: flex;
14269
14255
  flex-direction: row;
@@ -14284,19 +14270,21 @@ th.c4p--datagrid__select-all-toggle-on.button {
14284
14270
  max-inline-size: none;
14285
14271
  padding-inline-start: 2rem !important;
14286
14272
  }
14273
+ .c4p--interstitial-screen--footer .cds--inline-loading {
14274
+ position: absolute;
14275
+ inline-size: 2rem;
14276
+ inset-block-start: 0;
14277
+ inset-inline-end: 0;
14278
+ }
14287
14279
  .c4p--interstitial-screen--footer-controls {
14288
14280
  display: flex;
14289
14281
  flex-direction: row;
14290
14282
  margin-inline-start: auto;
14291
14283
  }
14292
- .c4p--interstitial-screen--modal .c4p--interstitial-screen--content {
14293
- margin-block-start: 0;
14294
- }
14295
- .c4p--interstitial-screen--modal .c4p--interstitial-screen--internal-header:has(> :nth-child(2)) {
14296
- min-block-size: initial;
14297
- }
14298
- .c4p--interstitial-screen--modal:has(> :nth-child(1)) {
14299
- min-block-size: initial;
14284
+ .c4p--interstitial-screen--full-screen {
14285
+ position: fixed;
14286
+ inset-block-start: 0;
14287
+ inset-inline: 0;
14300
14288
  }
14301
14289
  .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--container {
14302
14290
  display: flex;
@@ -14306,44 +14294,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
14306
14294
  block-size: 100vh;
14307
14295
  max-inline-size: 100vw;
14308
14296
  }
14309
- .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--header {
14310
- font-size: var(--cds-body-long-01-font-size, 0.875rem);
14311
- font-weight: var(--cds-body-long-01-font-weight, 400);
14312
- line-height: var(--cds-body-long-01-line-height, 1.42857);
14313
- letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
14314
- /* stylelint-disable-next-line carbon/theme-use */
14315
- background-color: #161616;
14316
- block-size: 3rem;
14317
- border-block-end: 1px solid var(--cds-border-subtle-01, #c6c6c6);
14318
- /* stylelint-disable-next-line carbon/theme-use */
14319
- color: #f4f4f4;
14320
- /* stylelint-disable-next-line carbon/type-use */
14321
- font-weight: normal !important;
14322
- /* stylelint-disable-next-line carbon/type-use */
14323
- line-height: 3rem !important;
14324
- padding-inline-start: 1rem;
14325
- }
14326
- .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--header b {
14327
- /* stylelint-disable-next-line carbon/type-use */
14328
- font-weight: 600;
14329
- }
14330
- .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header > h2 {
14331
- padding: 1rem 2.5rem 0;
14332
- }
14333
- .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--progress {
14334
- margin: 4rem 2.5rem 0.75rem;
14335
- }
14336
- @media (max-width: 81.98rem) {
14337
- .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header .c4p--interstitial-screen--progress {
14338
- margin-inline-start: 2rem;
14339
- }
14340
- }
14341
- .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header--has-title .c4p--interstitial-screen--progress {
14342
- margin-block-start: 1.5rem;
14343
- }
14344
- .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--internal-header:has(> :nth-child(1)) {
14345
- min-block-size: initial;
14346
- }
14347
14297
  .c4p--interstitial-screen--full-screen .c4p--interstitial-screen--footer .c4p--interstitial-screen--skip-btn {
14348
14298
  padding-inline-start: 2.5rem !important;
14349
14299
  }
@@ -14353,40 +14303,6 @@ th.c4p--datagrid__select-all-toggle-on.button {
14353
14303
  }
14354
14304
  }
14355
14305
 
14356
- .c4p--interstitial-screen-view {
14357
- block-size: 100%;
14358
- }
14359
-
14360
- /* stylelint-disable max-nesting-depth */
14361
- .c4p--interstitial-screen-view-module {
14362
- margin: 2rem;
14363
- }
14364
- .c4p--interstitial-screen-view-module--heading {
14365
- font-size: var(--cds-heading-05-font-size, 2rem);
14366
- font-weight: var(--cds-heading-05-font-weight, 400);
14367
- line-height: var(--cds-heading-05-line-height, 1.25);
14368
- letter-spacing: var(--cds-heading-05-letter-spacing, 0);
14369
- margin-block-end: 2rem;
14370
- }
14371
- .c4p--interstitial-screen-view-module--body {
14372
- font-size: var(--cds-body-01-font-size, 0.875rem);
14373
- font-weight: var(--cds-body-01-font-weight, 400);
14374
- line-height: var(--cds-body-01-line-height, 1.42857);
14375
- letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
14376
- }
14377
-
14378
- .c4p--interstitial-screen--modal .c4p--interstitial-screen-view-module {
14379
- margin: 5rem 2rem;
14380
- }
14381
- .c4p--interstitial-screen--full-screen .c4p--interstitial-screen-view-module {
14382
- margin: 6rem 2.5rem;
14383
- }
14384
- @media (max-width: 81.98rem) {
14385
- .c4p--interstitial-screen--full-screen .c4p--interstitial-screen-view-module {
14386
- margin: 6rem 2rem;
14387
- }
14388
- }
14389
-
14390
14306
  .c4p--delimited-list-truncate {
14391
14307
  overflow: hidden;
14392
14308
  text-overflow: ellipsis;