lightning-base-components 1.21.9-alpha → 1.22.2-alpha

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 (122) hide show
  1. package/metadata/raptor.json +9 -0
  2. package/package.json +3 -5
  3. package/scopedImports/@salesforce-internal-core.appVersion.js +1 -1
  4. package/src/lightning/accordionSection/button.slds.css +18 -10
  5. package/src/lightning/baseCombobox/dropdown.slds.css +7 -7
  6. package/src/lightning/baseCombobox/input-text.slds.css +7 -6
  7. package/src/lightning/baseComboboxFormattedText/baseComboboxFormattedText.js-meta.xml +1 -1
  8. package/src/lightning/button/button.slds.css +18 -10
  9. package/src/lightning/buttonIcon/button-icon.slds.css +23 -15
  10. package/src/lightning/buttonIcon/buttonIcon.js +29 -26
  11. package/src/lightning/buttonIconStateful/button-icon.slds.css +23 -15
  12. package/src/lightning/buttonIconStateful/button.slds.css +18 -10
  13. package/src/lightning/buttonMenu/button-icon.slds.css +23 -15
  14. package/src/lightning/buttonMenu/button.slds.css +18 -10
  15. package/src/lightning/buttonMenu/dropdown.slds.css +7 -7
  16. package/src/lightning/buttonStateful/button-stateful.slds.css +23 -0
  17. package/src/lightning/buttonStateful/button.slds.css +18 -10
  18. package/src/lightning/buttonStateful/buttonStateful.js-meta.xml +3 -0
  19. package/src/lightning/calendar/calendar.lbc.native.css +1 -0
  20. package/src/lightning/calendar/calendar.slds.css +13 -10
  21. package/src/lightning/calendar/dropdown.slds.css +7 -7
  22. package/src/lightning/calendar/keyboard.js +11 -3
  23. package/src/lightning/colorPickerCustom/input-text.slds.css +7 -6
  24. package/src/lightning/colorPickerPanel/colorPickerPanel.js +1 -11
  25. package/src/lightning/combobox/combobox.html +1 -1
  26. package/src/lightning/combobox/combobox.js +5 -13
  27. package/src/lightning/combobox/form-element.slds.css +1 -1
  28. package/src/lightning/datatable/__examples__/withVirtualization/withVirtualization.js +0 -1
  29. package/src/lightning/datatable/autoWidthStrategy.js +32 -44
  30. package/src/lightning/datatable/columns.js +4 -1
  31. package/src/lightning/datatable/datatable.js +15 -34
  32. package/src/lightning/datatable/keyboard.js +13 -12
  33. package/src/lightning/datatable/renderManager.js +1 -3
  34. package/src/lightning/datatable/rows.js +17 -9
  35. package/src/lightning/datatable/state.js +0 -1
  36. package/src/lightning/datatable/virtualization.js +11 -14
  37. package/src/lightning/datepicker/form-element.slds.css +1 -1
  38. package/src/lightning/datepicker/input-text.slds.css +7 -6
  39. package/src/lightning/datetimepicker/form-element.slds.css +1 -1
  40. package/src/lightning/datetimepicker/input-text.slds.css +7 -6
  41. package/src/lightning/dualListbox/form-element.slds.css +1 -1
  42. package/src/lightning/formattedAddress/formattedAddress.js +3 -2
  43. package/src/lightning/formattedDateTime/formattedDateTime.js +3 -2
  44. package/src/lightning/formattedDateTime/formattedDateTime.js-meta.xml +1 -1
  45. package/src/lightning/formattedLocation/formattedLocation.js +3 -2
  46. package/src/lightning/formattedPhone/formattedPhone.js +3 -2
  47. package/src/lightning/formattedTime/formattedTime.js +3 -2
  48. package/src/lightning/formattedUrl/formattedUrl.js +3 -2
  49. package/src/lightning/groupedCombobox/form-element.slds.css +1 -1
  50. package/src/lightning/groupedCombobox/groupedCombobox.js +21 -28
  51. package/src/lightning/groupedCombobox/input-text.slds.css +7 -6
  52. package/src/lightning/helptext/button-icon.slds.css +23 -15
  53. package/src/lightning/helptext/form-element.slds.css +1 -1
  54. package/src/lightning/helptext/helptext.html +2 -1
  55. package/src/lightning/helptext/helptext.js +0 -12
  56. package/src/lightning/helptext/helptext.js-meta.xml +3 -0
  57. package/src/lightning/input/form-element.slds.css +1 -1
  58. package/src/lightning/inputAddress/__docs__/inputAddress.md +44 -3
  59. package/src/lightning/inputAddress/form-element.slds.css +1 -1
  60. package/src/lightning/inputAddress/input-text.slds.css +7 -6
  61. package/src/lightning/inputAddress/inputAddress.js +8 -6
  62. package/src/lightning/inputLocation/form-element.slds.css +1 -1
  63. package/src/lightning/inputLocation/input-text.slds.css +7 -6
  64. package/src/lightning/inputName/form-element.slds.css +1 -1
  65. package/src/lightning/inputName/input-text.slds.css +7 -6
  66. package/src/lightning/inputName/inputName.js-meta.xml +3 -0
  67. package/src/lightning/interactiveDialogBase/button.slds.css +515 -0
  68. package/src/lightning/interactiveDialogBase/interactive-dialog-base.slds.css +45 -17
  69. package/src/lightning/interactiveDialogBase/interactiveDialogBase.lbc.native.css +6 -1
  70. package/src/lightning/interactiveDialogBase/modal-base.slds.css +242 -0
  71. package/src/lightning/interactiveDialogBase/modal-body.slds.css +60 -0
  72. package/src/lightning/interactiveDialogBase/modal-footer.slds.css +79 -0
  73. package/src/lightning/interactiveDialogBase/modal-header.slds.css +76 -0
  74. package/src/lightning/lookupAddress/form-element.slds.css +1 -1
  75. package/src/lightning/lookupAddress/lookupAddress.js-meta.xml +3 -0
  76. package/src/lightning/menuDivider/menuDivider.js-meta.xml +3 -0
  77. package/src/lightning/menuSubheader/menuSubheader.js-meta.xml +3 -0
  78. package/src/lightning/modal/modal.js-meta.xml +3 -0
  79. package/src/lightning/modalBase/modalBase.js +7 -5
  80. package/src/lightning/modalBody/modalBody.js-meta.xml +3 -0
  81. package/src/lightning/modalFooter/modalFooter.js-meta.xml +3 -0
  82. package/src/lightning/modalHeader/modalHeader.js-meta.xml +3 -0
  83. package/src/lightning/picklist/picklist.js +3 -2
  84. package/src/lightning/pill/pill.js +1 -1
  85. package/src/lightning/pillContainer/button.slds.css +18 -10
  86. package/src/lightning/primitiveBubble/primitiveBubble.js +9 -4
  87. package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css +1 -1
  88. package/src/lightning/primitiveDatatableTooltipBubble/primitiveDatatableTooltipBubble.html +1 -1
  89. package/src/lightning/primitiveFileDroppableZone/primitiveFileDroppableZone.js +3 -2
  90. package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.html +1 -0
  91. package/src/lightning/primitiveInputCheckbox/form-element.slds.css +1 -1
  92. package/src/lightning/primitiveInputCheckboxButton/form-element.slds.css +1 -1
  93. package/src/lightning/primitiveInputColor/form-element.slds.css +1 -1
  94. package/src/lightning/primitiveInputColor/input-text.slds.css +7 -6
  95. package/src/lightning/primitiveInputFile/button.slds.css +18 -10
  96. package/src/lightning/primitiveInputFile/form-element.slds.css +1 -1
  97. package/src/lightning/primitiveInputFile/input-file.slds.css +3 -2
  98. package/src/lightning/primitiveInputSimple/form-element.slds.css +1 -1
  99. package/src/lightning/primitiveInputSimple/input-text.slds.css +7 -6
  100. package/src/lightning/primitiveInputToggle/form-element.slds.css +1 -1
  101. package/src/lightning/primitiveInputToggle/input-toggle.slds.css +13 -7
  102. package/src/lightning/progressBar/progressBar.js-meta.xml +3 -0
  103. package/src/lightning/progressRing/progressRing.js-meta.xml +3 -0
  104. package/src/lightning/prompt/form-element.slds.css +319 -0
  105. package/src/lightning/prompt/input-text.slds.css +507 -0
  106. package/src/lightning/prompt/prompt.lbc.native.css +2 -0
  107. package/src/lightning/purifyLib/purify.js +838 -586
  108. package/src/lightning/radioGroup/form-element.slds.css +1 -1
  109. package/src/lightning/radioGroup/radioGroup.js-meta.xml +3 -0
  110. package/src/lightning/select/form-element.slds.css +1 -1
  111. package/src/lightning/select/select.slds.css +1 -1
  112. package/src/lightning/sldsUtilsThemes/sldsUtilsThemes.css +6 -4
  113. package/src/lightning/tabBar/tab-bar.slds.css +17 -3
  114. package/src/lightning/textarea/form-element.slds.css +1 -1
  115. package/src/lightning/textarea/textarea.js-meta.xml +3 -0
  116. package/src/lightning/timepicker/form-element.slds.css +1 -1
  117. package/src/lightning/toast/button-icon.slds.css +23 -15
  118. package/src/lightning/toast/toast.js-meta.xml +3 -0
  119. package/src/lightning/toastContainer/toastContainer.js-meta.xml +3 -0
  120. package/src/lightning/tooltipLibrary/tooltipLibrary.js +15 -4
  121. package/src/lightning/utilsPrivate/utilsPrivate.js +4 -4
  122. package/src/lightning/verticalNavigationOverflow/button.slds.css +18 -10
@@ -276,6 +276,9 @@
276
276
  {
277
277
  "name": "alternativeText"
278
278
  },
279
+ {
280
+ "name": "disableAlternativeTextTitle"
281
+ },
279
282
  {
280
283
  "name": "iconClass"
281
284
  },
@@ -291,6 +294,9 @@
291
294
  {
292
295
  "name": "tooltip"
293
296
  },
297
+ {
298
+ "name": "tooltipType"
299
+ },
294
300
  {
295
301
  "name": "type"
296
302
  },
@@ -1723,6 +1729,7 @@
1723
1729
  "industriesCibApi": {},
1724
1730
  "industriesClmApi": {},
1725
1731
  "industriesContextApi": {},
1732
+ "industriesContextRulesApi": {},
1726
1733
  "industriesCpqApi": {},
1727
1734
  "industriesCriteriaBasedSearchFilterApi": {},
1728
1735
  "industriesDataloadingApi": {},
@@ -1774,6 +1781,7 @@
1774
1781
  "industriesSchedulerApi": {},
1775
1782
  "industriesServiceExcellenceApi": {},
1776
1783
  "industriesServiceprocessApi": {},
1784
+ "industriesStagemanagementApi": {},
1777
1785
  "industriesSustainabilityBeiApi": {},
1778
1786
  "industriesSustainabilityCsvAttachApi": {},
1779
1787
  "industriesSustainabilityDgfApi": {},
@@ -4552,6 +4560,7 @@
4552
4560
  "salesEnablementMeasureApi": {},
4553
4561
  "salesEnablementProgramApi": {},
4554
4562
  "salesEngagementWorkspaceApi": {},
4563
+ "salesEvfsdkApi": {},
4555
4564
  "salesPathAssistantApi": {},
4556
4565
  "salesPeopleApi": {},
4557
4566
  "salesUserWorkingHoursApi": {},
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lightning-base-components",
3
- "version": "1.21.9-alpha",
3
+ "version": "1.22.2-alpha",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "external",
@@ -1476,8 +1476,6 @@
1476
1476
  "lightning-accordion-section",
1477
1477
  "lightning-avatar",
1478
1478
  "lightning-badge",
1479
- "lightning-avatar",
1480
- "lightning-badge",
1481
1479
  "lightning-base-combobox",
1482
1480
  "lightning-base-combobox-formatted-text",
1483
1481
  "lightning-base-combobox-item",
@@ -1528,11 +1526,11 @@
1528
1526
  "lightning-progress-ring",
1529
1527
  "lightning-primitive-bubble",
1530
1528
  "lightning-primitive-button",
1529
+ "lightning-primitive-colorpicker-button",
1531
1530
  "primitive-file-droppable-zone",
1532
1531
  "lightning-primitive-input-checkbox",
1533
1532
  "lightning-primitive-input-checkbox-button",
1534
1533
  "lightning-primitive-input-color",
1535
- "lightning-primitive-colorpicker-button",
1536
1534
  "lightning-primitive-input-file",
1537
1535
  "lightning-primitive-input-simple",
1538
1536
  "lightning-primitive-input-toggle",
@@ -1544,7 +1542,7 @@
1544
1542
  "lightning-spinner",
1545
1543
  "lightning-tab",
1546
1544
  "lightning-tab-bar",
1547
- "lightning-tab-set",
1545
+ "lightning-tabset",
1548
1546
  "lightning-textarea",
1549
1547
  "lightning-timepicker",
1550
1548
  "lightning-vertical-navigation",
@@ -1 +1 @@
1
- export default '248';
1
+ export default '250';
@@ -280,7 +280,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
280
280
 
281
281
  /* Text color */
282
282
  --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
283
- --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
283
+ --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
284
284
  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
285
285
  --sds-c-button-text-color-active: var(
286
286
  --slds-c-button-neutral-text-color-active,
@@ -296,6 +296,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
296
296
  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
297
297
  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
298
298
  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
299
+
300
+ /**
301
+ * Needed to override
302
+ * `pointer-event: none` coming from sds
303
+ * that prevent tooltip from showing
304
+ */
305
+ pointer-events: auto;
306
+ cursor: default;
299
307
  }
300
308
  /**
301
309
  * A note about fallbacks on the default variant:
@@ -315,36 +323,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
315
323
  :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
316
324
  --slds-c-button-neutral-color-background: var(
317
325
  --slds-c-button-brand-color-background,
318
- var(--slds-g-color-accent-container-2)
326
+ var(--slds-g-color-accent-container-1)
319
327
  );
320
328
  --slds-c-button-neutral-color-background-hover: var(
321
329
  --slds-c-button-brand-color-background-hover,
322
- var(--slds-g-color-accent-container-3)
330
+ var(--slds-g-color-accent-container-2)
323
331
  );
324
332
  --slds-c-button-neutral-color-background-focus: var(
325
333
  --slds-c-button-brand-color-background-focus,
326
- var(--slds-g-color-accent-container-3)
334
+ var(--slds-g-color-accent-container-2)
327
335
  );
328
336
  --slds-c-button-neutral-color-background-active: var(
329
337
  --slds-c-button-brand-color-background-active,
330
- var(--slds-g-color-accent-container-3)
338
+ var(--slds-g-color-accent-container-2)
331
339
  );
332
340
 
333
341
  --slds-c-button-neutral-color-border: var(
334
342
  --slds-c-button-brand-color-border,
335
- var(--slds-g-color-border-accent-2)
343
+ var(--slds-g-color-border-accent-1)
336
344
  );
337
345
  --slds-c-button-neutral-color-border-hover: var(
338
346
  --slds-c-button-brand-color-border-hover,
339
- var(--slds-g-color-border-accent-3)
347
+ var(--slds-g-color-border-accent-2)
340
348
  );
341
349
  --slds-c-button-neutral-color-border-focus: var(
342
350
  --slds-c-button-brand-color-border-focus,
343
- var(--slds-g-color-border-accent-3)
351
+ var(--slds-g-color-border-accent-2)
344
352
  );
345
353
  --slds-c-button-neutral-color-border-active: var(
346
354
  --slds-c-button-brand-color-border-active,
347
- var(--slds-g-color-border-accent-3)
355
+ var(--slds-g-color-border-accent-2)
348
356
  );
349
357
 
350
358
  /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -396,7 +404,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
396
404
  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
397
405
  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
398
406
  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
399
- --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
407
+ --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
400
408
  --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
401
409
  --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
402
410
  --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
@@ -353,8 +353,8 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
353
353
  /* stylelint-disable */
354
354
  max-width: var(--_dropdown-size-medium);
355
355
  /* stylelint-enable */
356
- margin-block-start: calc(var(--slds-g-spacing-1)) / 2;
357
- margin-block-end: calc(var(--slds-g-spacing-1)) / 2;
356
+ margin-block-start: calc(var(--slds-g-spacing-1) / 2);
357
+ margin-block-end: calc(var(--slds-g-spacing-1) / 2);
358
358
  font-size: var(--slds-g-font-scale-neg-1);
359
359
  border-style: solid;
360
360
  transform: translateX(-50%);
@@ -393,11 +393,11 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
393
393
  /* Deal with positioning when target is just an icon */
394
394
  :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'],:host([data-render-mode="shadow"])
395
395
  .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_left[class*='slds-nubbin'] {
396
- left: (var(--slds-g-spacing-2) * -1);
396
+ left: calc(var(--slds-g-spacing-2) * -1);
397
397
  }
398
398
  :host([data-render-mode="shadow"].slds-dropdown-trigger) > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'],:host([data-render-mode="shadow"])
399
399
  .slds-dropdown-trigger > [class*='slds-button_icon'] ~ .slds-dropdown_right[class*='slds-nubbin'] {
400
- right: (var(--slds-g-spacing-2) * -1);
400
+ right: calc(var(--slds-g-spacing-2) * -1);
401
401
  }
402
402
  :host([data-render-mode="shadow"].slds-dropdown-trigger_hover) .slds-dropdown,:host([data-render-mode="shadow"])
403
403
  .slds-dropdown-trigger_hover .slds-dropdown {
@@ -489,15 +489,15 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
489
489
  width: 100%;
490
490
  }
491
491
  :host([data-render-mode="shadow"]) .slds-dropdown_length-5 {
492
- max-height: calc((var(--slds-g-font-scale-neg-3)) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4) * 5;
492
+ max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 5);
493
493
  overflow-y: auto;
494
494
  }
495
495
  :host([data-render-mode="shadow"]) .slds-dropdown_length-7 {
496
- max-height: calc((var(--slds-g-font-scale-neg-3)) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4) * 7;
496
+ max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 7);
497
497
  overflow-y: auto;
498
498
  }
499
499
  :host([data-render-mode="shadow"]) .slds-dropdown_length-10 {
500
- max-height: calc((var(--slds-g-font-scale-neg-3)) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4) * 10;
500
+ max-height: calc(((var(--slds-g-font-scale-neg-3) * var(--slds-g-font-lineheight)) + var(--slds-g-spacing-4)) * 10);
501
501
  overflow-y: auto;
502
502
  }
503
503
  :host([data-render-mode="shadow"]) .slds-dropdown_length-with-icon-5 {
@@ -246,7 +246,7 @@
246
246
  --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
247
247
  --sds-c-inputtext-font-size: var(
248
248
  --slds-c-inputtext-font-size,
249
- var(--slds-g-font-scale-neg-2)
249
+ var(--slds-g-font-size-base)
250
250
  );
251
251
  --sds-c-inputtext-text-color-placeholder: var(
252
252
  --slds-c-inputtext-text-color-placeholder,
@@ -264,7 +264,7 @@
264
264
 
265
265
  display: flex;
266
266
  flex-wrap: wrap;
267
- align-items: center;
267
+ flex-direction: column;
268
268
  }
269
269
  /**
270
270
  * Input Container
@@ -371,6 +371,10 @@
371
371
  --sds-c-inputtext-color-border: var(--slds-g-color-border-disabled-1);
372
372
  --sds-c-inputtext-text-color: var(--slds-g-color-on-disabled-2);
373
373
  }
374
+ :host([data-render-mode="shadow"][disabled]) [part='input-text'] {
375
+ --sds-c-inputtext-text-color-placeholder:
376
+ var(--slds-g-color-on-disabled-2);
377
+ }
374
378
  /**
375
379
  * Label
376
380
  *
@@ -384,10 +388,7 @@
384
388
  --slds-c-inputtext-label-color,
385
389
  var(--slds-g-color-on-surface-2)
386
390
  );
387
- font-size: var(
388
- --slds-c-inputtext-label-font-size,
389
- var(--slds-g-font-scale-neg-3)
390
- );
391
+ font-size: var(--slds-s-label-font-size, var(--slds-g-font-scale-neg-2));
391
392
  margin-block-end: var(--slds-g-sizing-1);
392
393
 
393
394
  /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
@@ -1,6 +1,6 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
2
  <LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
3
3
  <capabilities>
4
- <capability>lightning__ServerRenderable</capability>
4
+ <capability>lightning__ServerRenderableWithHydration</capability>
5
5
  </capabilities>
6
6
  </LightningComponentBundle>
@@ -280,7 +280,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
280
280
 
281
281
  /* Text color */
282
282
  --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
283
- --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
283
+ --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
284
284
  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
285
285
  --sds-c-button-text-color-active: var(
286
286
  --slds-c-button-neutral-text-color-active,
@@ -296,6 +296,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
296
296
  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
297
297
  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
298
298
  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
299
+
300
+ /**
301
+ * Needed to override
302
+ * `pointer-event: none` coming from sds
303
+ * that prevent tooltip from showing
304
+ */
305
+ pointer-events: auto;
306
+ cursor: default;
299
307
  }
300
308
  /**
301
309
  * A note about fallbacks on the default variant:
@@ -315,36 +323,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
315
323
  :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
316
324
  --slds-c-button-neutral-color-background: var(
317
325
  --slds-c-button-brand-color-background,
318
- var(--slds-g-color-accent-container-2)
326
+ var(--slds-g-color-accent-container-1)
319
327
  );
320
328
  --slds-c-button-neutral-color-background-hover: var(
321
329
  --slds-c-button-brand-color-background-hover,
322
- var(--slds-g-color-accent-container-3)
330
+ var(--slds-g-color-accent-container-2)
323
331
  );
324
332
  --slds-c-button-neutral-color-background-focus: var(
325
333
  --slds-c-button-brand-color-background-focus,
326
- var(--slds-g-color-accent-container-3)
334
+ var(--slds-g-color-accent-container-2)
327
335
  );
328
336
  --slds-c-button-neutral-color-background-active: var(
329
337
  --slds-c-button-brand-color-background-active,
330
- var(--slds-g-color-accent-container-3)
338
+ var(--slds-g-color-accent-container-2)
331
339
  );
332
340
 
333
341
  --slds-c-button-neutral-color-border: var(
334
342
  --slds-c-button-brand-color-border,
335
- var(--slds-g-color-border-accent-2)
343
+ var(--slds-g-color-border-accent-1)
336
344
  );
337
345
  --slds-c-button-neutral-color-border-hover: var(
338
346
  --slds-c-button-brand-color-border-hover,
339
- var(--slds-g-color-border-accent-3)
347
+ var(--slds-g-color-border-accent-2)
340
348
  );
341
349
  --slds-c-button-neutral-color-border-focus: var(
342
350
  --slds-c-button-brand-color-border-focus,
343
- var(--slds-g-color-border-accent-3)
351
+ var(--slds-g-color-border-accent-2)
344
352
  );
345
353
  --slds-c-button-neutral-color-border-active: var(
346
354
  --slds-c-button-brand-color-border-active,
347
- var(--slds-g-color-border-accent-3)
355
+ var(--slds-g-color-border-accent-2)
348
356
  );
349
357
 
350
358
  /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -396,7 +404,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
396
404
  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
397
405
  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
398
406
  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
399
- --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
407
+ --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
400
408
  --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
401
409
  --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
402
410
  --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
@@ -283,7 +283,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
283
283
 
284
284
  /* Text color */
285
285
  --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
286
- --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
286
+ --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
287
287
  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
288
288
  --sds-c-button-text-color-active: var(
289
289
  --slds-c-button-neutral-text-color-active,
@@ -299,6 +299,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
299
299
  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
300
300
  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
301
301
  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
302
+
303
+ /**
304
+ * Needed to override
305
+ * `pointer-event: none` coming from sds
306
+ * that prevent tooltip from showing
307
+ */
308
+ pointer-events: auto;
309
+ cursor: default;
302
310
  }
303
311
  /**
304
312
  * A note about fallbacks on the default variant:
@@ -318,36 +326,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
318
326
  :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
319
327
  --slds-c-button-neutral-color-background: var(
320
328
  --slds-c-button-brand-color-background,
321
- var(--slds-g-color-accent-container-2)
329
+ var(--slds-g-color-accent-container-1)
322
330
  );
323
331
  --slds-c-button-neutral-color-background-hover: var(
324
332
  --slds-c-button-brand-color-background-hover,
325
- var(--slds-g-color-accent-container-3)
333
+ var(--slds-g-color-accent-container-2)
326
334
  );
327
335
  --slds-c-button-neutral-color-background-focus: var(
328
336
  --slds-c-button-brand-color-background-focus,
329
- var(--slds-g-color-accent-container-3)
337
+ var(--slds-g-color-accent-container-2)
330
338
  );
331
339
  --slds-c-button-neutral-color-background-active: var(
332
340
  --slds-c-button-brand-color-background-active,
333
- var(--slds-g-color-accent-container-3)
341
+ var(--slds-g-color-accent-container-2)
334
342
  );
335
343
 
336
344
  --slds-c-button-neutral-color-border: var(
337
345
  --slds-c-button-brand-color-border,
338
- var(--slds-g-color-border-accent-2)
346
+ var(--slds-g-color-border-accent-1)
339
347
  );
340
348
  --slds-c-button-neutral-color-border-hover: var(
341
349
  --slds-c-button-brand-color-border-hover,
342
- var(--slds-g-color-border-accent-3)
350
+ var(--slds-g-color-border-accent-2)
343
351
  );
344
352
  --slds-c-button-neutral-color-border-focus: var(
345
353
  --slds-c-button-brand-color-border-focus,
346
- var(--slds-g-color-border-accent-3)
354
+ var(--slds-g-color-border-accent-2)
347
355
  );
348
356
  --slds-c-button-neutral-color-border-active: var(
349
357
  --slds-c-button-brand-color-border-active,
350
- var(--slds-g-color-border-accent-3)
358
+ var(--slds-g-color-border-accent-2)
351
359
  );
352
360
 
353
361
  /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -399,7 +407,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
399
407
  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
400
408
  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
401
409
  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
402
- --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
410
+ --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
403
411
  --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
404
412
  --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
405
413
  --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
@@ -545,19 +553,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
545
553
  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
546
554
  }
547
555
  /* slds-icon interaction states */
548
- :host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
556
+ :host([data-render-mode="shadow"]) [part~='button-icon']:hover {
549
557
  --slds-c-icon-color-foreground: var(
550
- --slds-c-buttonicon-color-foreground-hover,
558
+ --slds-c-buttonicon-color-foreground-hover,
551
559
  var(--slds-g-color-accent-3)
552
560
  );
553
561
  }
554
- :host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
562
+ :host([data-render-mode="shadow"]) [part~='button-icon']:focus {
555
563
  --slds-c-icon-color-foreground: var(
556
564
  --slds-c-buttonicon-color-foreground-focus,
557
565
  var(--slds-g-color-accent-3)
558
566
  );
559
567
  }
560
- :host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
568
+ :host([data-render-mode="shadow"]) [part~='button-icon']:active {
561
569
  --slds-c-icon-color-foreground: var(
562
570
  --slds-c-buttonicon-color-foreground-active,
563
571
  var(--slds-g-color-accent-3)
@@ -635,7 +643,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
635
643
 
636
644
  /* Icon */
637
645
  --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
638
- --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
646
+ --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
639
647
  --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
640
648
  --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
641
649
 
@@ -1,6 +1,6 @@
1
1
  import { api } from 'lwc';
2
2
  import { classSet } from 'lightning/utils';
3
- import { normalizeString as normalize, isCSR } from 'lightning/utilsPrivate';
3
+ import { normalizeString as normalize } from 'lightning/utilsPrivate';
4
4
  // remove-next-line-for-c-namespace
5
5
  import { Tooltip, TooltipType } from 'lightning/tooltipLibrary';
6
6
  import LightningPrimitiveButton from 'lightning/primitiveButton';
@@ -120,6 +120,24 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
120
120
  */
121
121
  @api alternativeText;
122
122
 
123
+ /**
124
+ * Reserved for internal use only.
125
+ * Specifies the type of tooltip to be used.
126
+ * Use info in cases where target already has click handlers.
127
+ * Use toggle in cases where target only shows a tooltip, such as helptext.
128
+ * @type {string}
129
+ * @default info
130
+ */
131
+ @api tooltipType = TooltipType.Info;
132
+
133
+ /**
134
+ * Reserved for internal use only.
135
+ * Disables the alternative text being used for the button title when the title has not been provided.
136
+ * @type {boolean}
137
+ * @default false
138
+ */
139
+ @api disableAlternativeTextTitle = false;
140
+
123
141
  // remove-next-line-for-c-namespace
124
142
  /**
125
143
  * Text to display when the user mouses over or focuses on the button.
@@ -145,9 +163,7 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
145
163
  // remove-next-line-for-c-namespace
146
164
  _tooltip = null;
147
165
  tooltipValue = null;
148
- tooltipType = TooltipType.Info;
149
166
  rendered = false;
150
- showTitle = true;
151
167
 
152
168
  /**
153
169
  * Generate a tooltip with the specified value and current tooltip type
@@ -169,10 +185,16 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
169
185
  }
170
186
 
171
187
  get computedTitle() {
172
- // Assign after renderedCallback (this.rendered) to nullify hydration mismatch.
173
- return this.rendered && this.showTitle
174
- ? this.title || this.alternativeText || ''
175
- : null;
188
+ // Assign after renderedCallback to avoid hydration mismatch.
189
+ if (this.rendered) {
190
+ if (this.title) {
191
+ return this.title;
192
+ }
193
+ if (!this.disableAlternativeTextTitle) {
194
+ return this.alternativeText;
195
+ }
196
+ }
197
+ return null;
176
198
  }
177
199
 
178
200
  normalizeVariant(variant) {
@@ -333,24 +355,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
333
355
  connectedCallback() {
334
356
  super.connectedCallback();
335
357
  this._connected = true;
336
- if (isCSR) {
337
- this.dispatchEvent(
338
- new CustomEvent('privatebuttoniconregister', {
339
- cancelable: true,
340
- bubbles: true,
341
- detail: {
342
- // Tooltip type should be toggle for some consumers like helptext
343
- setTooltipType: (tooltipType) => {
344
- this.tooltipType = tooltipType;
345
- },
346
- // Title should not be set for some consumers like helptext (see W-12496300)
347
- showTitle: (showTitle) => {
348
- this.showTitle = showTitle;
349
- },
350
- },
351
- })
352
- );
353
- }
354
358
  }
355
359
 
356
360
  renderedCallback() {
@@ -372,7 +376,6 @@ export default class LightningButtonIcon extends LightningPrimitiveButton {
372
376
  super.disconnectedCallback();
373
377
  this._connected = false;
374
378
  this.rendered = false;
375
- this.showTitle = true;
376
379
  if (this._tooltip) {
377
380
  this._tooltip.disconnect();
378
381
  }
@@ -283,7 +283,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
283
283
 
284
284
  /* Text color */
285
285
  --sds-c-button-text-color: var(--slds-c-button-neutral-text-color, var(--slds-g-color-accent-2));
286
- --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-g-color-accent-3));
286
+ --sds-c-button-text-color-hover: var(--slds-c-button-neutral-text-color-hover, var(--slds-s-button-color-hover, var(--slds-g-color-accent-3)));
287
287
  --sds-c-button-text-color-focus: var(--slds-c-button-neutral-text-color-focus, var(--slds-g-color-accent-3));
288
288
  --sds-c-button-text-color-active: var(
289
289
  --slds-c-button-neutral-text-color-active,
@@ -299,6 +299,14 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
299
299
  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
300
300
  --sds-c-button-text-color-disabled: var(--slds-g-color-on-disabled-1);
301
301
  --sds-c-button-color-background-disabled: var(--slds-g-color-disabled-container-1);
302
+
303
+ /**
304
+ * Needed to override
305
+ * `pointer-event: none` coming from sds
306
+ * that prevent tooltip from showing
307
+ */
308
+ pointer-events: auto;
309
+ cursor: default;
302
310
  }
303
311
  /**
304
312
  * A note about fallbacks on the default variant:
@@ -318,36 +326,36 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
318
326
  :host([data-render-mode="shadow"][variant='brand']) [part~='button'] {
319
327
  --slds-c-button-neutral-color-background: var(
320
328
  --slds-c-button-brand-color-background,
321
- var(--slds-g-color-accent-container-2)
329
+ var(--slds-g-color-accent-container-1)
322
330
  );
323
331
  --slds-c-button-neutral-color-background-hover: var(
324
332
  --slds-c-button-brand-color-background-hover,
325
- var(--slds-g-color-accent-container-3)
333
+ var(--slds-g-color-accent-container-2)
326
334
  );
327
335
  --slds-c-button-neutral-color-background-focus: var(
328
336
  --slds-c-button-brand-color-background-focus,
329
- var(--slds-g-color-accent-container-3)
337
+ var(--slds-g-color-accent-container-2)
330
338
  );
331
339
  --slds-c-button-neutral-color-background-active: var(
332
340
  --slds-c-button-brand-color-background-active,
333
- var(--slds-g-color-accent-container-3)
341
+ var(--slds-g-color-accent-container-2)
334
342
  );
335
343
 
336
344
  --slds-c-button-neutral-color-border: var(
337
345
  --slds-c-button-brand-color-border,
338
- var(--slds-g-color-border-accent-2)
346
+ var(--slds-g-color-border-accent-1)
339
347
  );
340
348
  --slds-c-button-neutral-color-border-hover: var(
341
349
  --slds-c-button-brand-color-border-hover,
342
- var(--slds-g-color-border-accent-3)
350
+ var(--slds-g-color-border-accent-2)
343
351
  );
344
352
  --slds-c-button-neutral-color-border-focus: var(
345
353
  --slds-c-button-brand-color-border-focus,
346
- var(--slds-g-color-border-accent-3)
354
+ var(--slds-g-color-border-accent-2)
347
355
  );
348
356
  --slds-c-button-neutral-color-border-active: var(
349
357
  --slds-c-button-brand-color-border-active,
350
- var(--slds-g-color-border-accent-3)
358
+ var(--slds-g-color-border-accent-2)
351
359
  );
352
360
 
353
361
  /* Since the text color is white for all states, bypassing inheritence and setting the color value from SDS */
@@ -399,7 +407,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
399
407
  --slds-c-button-neutral-color-border-hover: var(--slds-g-color-border-success-2);
400
408
  --slds-c-button-neutral-color-border-focus: var(--slds-g-color-border-success-2);
401
409
  --slds-c-button-neutral-color-border-active: var(--slds-g-color-border-success-2);
402
- --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-2);
410
+ --slds-c-button-neutral-text-color: var(--slds-g-color-on-success-1);
403
411
  --slds-c-button-neutral-text-color-hover: var(--slds-g-color-on-success-1);
404
412
  --slds-c-button-neutral-text-color-focus: var(--slds-g-color-on-success-1);
405
413
  --slds-c-button-neutral-text-color-active: var(--slds-g-color-on-success-1);
@@ -545,19 +553,19 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
545
553
  --sds-c-button-color-border-disabled: var(--slds-g-color-border-disabled-1);
546
554
  }
547
555
  /* slds-icon interaction states */
548
- :host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):hover {
556
+ :host([data-render-mode="shadow"]) [part~='button-icon']:hover {
549
557
  --slds-c-icon-color-foreground: var(
550
- --slds-c-buttonicon-color-foreground-hover,
558
+ --slds-c-buttonicon-color-foreground-hover,
551
559
  var(--slds-g-color-accent-3)
552
560
  );
553
561
  }
554
- :host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):focus {
562
+ :host([data-render-mode="shadow"]) [part~='button-icon']:focus {
555
563
  --slds-c-icon-color-foreground: var(
556
564
  --slds-c-buttonicon-color-foreground-focus,
557
565
  var(--slds-g-color-accent-3)
558
566
  );
559
567
  }
560
- :host([data-render-mode="shadow"]) [part~='button-icon']:not(.slds-is-selected):active {
568
+ :host([data-render-mode="shadow"]) [part~='button-icon']:active {
561
569
  --slds-c-icon-color-foreground: var(
562
570
  --slds-c-buttonicon-color-foreground-active,
563
571
  var(--slds-g-color-accent-3)
@@ -635,7 +643,7 @@ Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
635
643
 
636
644
  /* Icon */
637
645
  --slds-c-buttonicon-color-foreground: var(--slds-g-color-neutral-base-100);
638
- --slds-c-buttonicon-color-foreground-hover: var(--slds-g-color-neutral-base-95);
646
+ --slds-c-buttonicon-color-foreground-hover: color-mix(in oklab, var(--slds-g-color-on-surface-inverse-1), transparent 25%);
639
647
  --slds-c-buttonicon-color-foreground-focus: var(--slds-g-color-neutral-base-95);
640
648
  --slds-c-buttonicon-color-foreground-active: var(--slds-g-color-neutral-base-90);
641
649