lightning-base-components 1.28.7-alpha → 1.28.10-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 (99) hide show
  1. package/metadata/raptor.json +2 -0
  2. package/package.json +17 -8
  3. package/src/lightning/accordionSection/button.slds.css +28 -28
  4. package/src/lightning/baseCombobox/baseCombobox.d.ts.map +1 -1
  5. package/src/lightning/baseCombobox/baseCombobox.js +5 -0
  6. package/src/lightning/baseCombobox/baseComboboxEvents.d.ts.map +1 -1
  7. package/src/lightning/baseCombobox/baseComboboxEvents.js +6 -0
  8. package/src/lightning/baseCombobox/input-text.slds.css +44 -50
  9. package/src/lightning/button/button.slds.css +28 -28
  10. package/src/lightning/buttonIcon/button-icon.slds.css +28 -28
  11. package/src/lightning/buttonIconStateful/button-icon.slds.css +28 -28
  12. package/src/lightning/buttonIconStateful/button.slds.css +28 -28
  13. package/src/lightning/buttonMenu/button-icon.slds.css +28 -28
  14. package/src/lightning/buttonMenu/button.slds.css +28 -28
  15. package/src/lightning/buttonStateful/button.slds.css +28 -28
  16. package/src/lightning/carousel/button.slds.css +28 -28
  17. package/src/lightning/checkboxGroup/checkboxGroup.d.ts +1 -0
  18. package/src/lightning/checkboxGroup/checkboxGroup.d.ts.map +1 -1
  19. package/src/lightning/checkboxGroup/checkboxGroup.html +23 -2
  20. package/src/lightning/checkboxGroup/checkboxGroup.js +5 -1
  21. package/src/lightning/colorPickerCustom/colorPickerCustom.d.ts.map +1 -1
  22. package/src/lightning/colorPickerCustom/colorPickerCustom.js +9 -0
  23. package/src/lightning/colorPickerCustom/input-text.slds.css +44 -50
  24. package/src/lightning/datatable/button-icon.slds.css +28 -28
  25. package/src/lightning/datatable/datatable.d.ts.map +1 -1
  26. package/src/lightning/datatable/datatable.js +3 -0
  27. package/src/lightning/datatable/icon.slds.css +11 -11
  28. package/src/lightning/datatable/input-checkbox.slds.css +20 -20
  29. package/src/lightning/datepicker/input-text.slds.css +44 -50
  30. package/src/lightning/datetimepicker/datetimepicker.d.ts.map +1 -1
  31. package/src/lightning/datetimepicker/datetimepicker.js +9 -0
  32. package/src/lightning/datetimepicker/input-text.slds.css +44 -50
  33. package/src/lightning/features/gates/imports.d.ts +4 -2
  34. package/src/lightning/features/gates/imports.js +4 -2
  35. package/src/lightning/formattedRichText/formattedRichText.d.ts +2 -0
  36. package/src/lightning/formattedRichText/formattedRichText.d.ts.map +1 -1
  37. package/src/lightning/formattedRichText/formattedRichText.html +13 -4
  38. package/src/lightning/formattedRichText/formattedRichText.js +15 -0
  39. package/src/lightning/groupedCombobox/input-text.slds.css +44 -50
  40. package/src/lightning/helptext/button-icon.slds.css +28 -28
  41. package/src/lightning/icon/icon.slds.css +11 -11
  42. package/src/lightning/input/input.d.ts.map +1 -1
  43. package/src/lightning/input/input.js +3 -0
  44. package/src/lightning/inputAddress/input-text.slds.css +44 -50
  45. package/src/lightning/inputLocation/input-text.slds.css +44 -50
  46. package/src/lightning/inputName/input-text.slds.css +44 -50
  47. package/src/lightning/inputName/inputName.d.ts.map +1 -1
  48. package/src/lightning/inputName/inputName.js +4 -0
  49. package/src/lightning/interactiveDialogBase/button.slds.css +28 -28
  50. package/src/lightning/modalHeader/modalHeader.css +2 -11
  51. package/src/lightning/modalHeader/modalHeader.lbc.synthetic.css +7 -0
  52. package/src/lightning/pillContainer/button.slds.css +28 -28
  53. package/src/lightning/pillContainer/standardPillContainer.css +1 -5
  54. package/src/lightning/pillContainer/standardPillContainer.lbc.native.css +5 -0
  55. package/src/lightning/positionLibrary/elementProxy.d.ts +2 -1
  56. package/src/lightning/positionLibrary/elementProxy.d.ts.map +1 -1
  57. package/src/lightning/positionLibrary/elementProxy.js +32 -3
  58. package/src/lightning/primitiveCellCheckbox/checkbox.css +0 -2
  59. package/src/lightning/primitiveCellCheckbox/checkbox.lbc.native.css +2 -0
  60. package/src/lightning/primitiveCellCheckbox/input-checkbox.slds.css +20 -20
  61. package/src/lightning/primitiveCellFactory/button-icon.slds.css +28 -28
  62. package/src/lightning/primitiveCoordinateItem/button.slds.css +28 -28
  63. package/src/lightning/primitiveDatatableStatusBar/button.slds.css +28 -28
  64. package/src/lightning/primitiveDatatableTooltip/button-icon.slds.css +28 -28
  65. package/src/lightning/primitiveDatatableTooltip/button.slds.css +28 -28
  66. package/src/lightning/primitiveFigure/primitiveFigure.css +64 -0
  67. package/src/lightning/primitiveFigure/primitiveFigure.d.ts +33 -0
  68. package/src/lightning/primitiveFigure/primitiveFigure.d.ts.map +1 -0
  69. package/src/lightning/primitiveFigure/primitiveFigure.html +5 -0
  70. package/src/lightning/primitiveFigure/primitiveFigure.js +155 -0
  71. package/src/lightning/primitiveFigure/primitiveFigure.js-meta.xml +4 -0
  72. package/src/lightning/primitiveHeaderFactory/input-checkbox.slds.css +20 -20
  73. package/src/lightning/primitiveIcon/icon.slds.css +11 -11
  74. package/src/lightning/primitiveInputCheckbox/input-checkbox.slds.css +20 -20
  75. package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.d.ts.map +1 -1
  76. package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.js +1 -11
  77. package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.css +0 -1
  78. package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.d.ts.map +1 -1
  79. package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.js +12 -0
  80. package/src/lightning/primitiveInputColor/input-text.slds.css +44 -50
  81. package/src/lightning/primitiveInputColor/primitiveInputColor.d.ts.map +1 -1
  82. package/src/lightning/primitiveInputColor/primitiveInputColor.js +12 -0
  83. package/src/lightning/primitiveInputFile/button.slds.css +28 -28
  84. package/src/lightning/primitiveInputSimple/input-text.slds.css +44 -50
  85. package/src/lightning/primitiveInputSimple/primitiveInputSimple.d.ts.map +1 -1
  86. package/src/lightning/primitiveInputSimple/primitiveInputSimple.js +8 -0
  87. package/src/lightning/primitiveInputToggle/primitiveInputToggle.d.ts.map +1 -1
  88. package/src/lightning/primitiveInputToggle/primitiveInputToggle.js +12 -0
  89. package/src/lightning/primitiveTreegridCellToggle/button-icon.slds.css +28 -28
  90. package/src/lightning/prompt/input-text.slds.css +44 -50
  91. package/src/lightning/sldsCommon/sldsCommon.css +10 -10
  92. package/src/lightning/toast/button-icon.slds.css +28 -28
  93. package/src/lightning/toast/icon.slds.css +11 -11
  94. package/src/lightning/tree/treeData.d.ts.map +1 -1
  95. package/src/lightning/tree/treeData.js +18 -0
  96. package/src/lightning/utilsPrivate/normalize.d.ts +1 -1
  97. package/src/lightning/utilsPrivate/normalize.d.ts.map +1 -1
  98. package/src/lightning/verticalNavigationOverflow/button.slds.css +28 -28
  99. package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.lbc.synthetic.css +0 -2
package/src/lightning/inputAddress/input-text.slds.css CHANGED
@@ -9,63 +9,57 @@
9
9
  :host([data-render-mode="shadow"]) [part~='input-container'] {
10
10
  display: flex;
11
11
  align-items: center;
12
- gap: var(--sds-c-inputtext-spacing-gap, var(--sds-s-input-spacing-gap));
13
- min-height: var(--sds-c-inputtext-sizing-height, var(--sds-s-input-sizing-height));
12
+ gap: var(--sds-c-inputtext-spacing-gap, var(--slds-s-input-spacing-gap));
13
+ min-height: var(--sds-c-inputtext-sizing-height, var(--slds-s-input-sizing-height));
14
14
  padding-inline-start: var(
15
15
  --sds-c-inputtext-spacing-inlinestart,
16
- var(--sds-c-inputtext-spacing-inline, var(--sds-s-input-spacing))
16
+ var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
17
17
  );
18
18
  padding-inline-end: var(
19
19
  --sds-c-inputtext-spacing-inlineend,
20
- var(--sds-c-inputtext-spacing-inline, var(--sds-s-input-spacing))
20
+ var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
21
21
  );
22
22
  padding-block-start: var(
23
23
  --sds-c-inputtext-spacing-blockstart,
24
- var(--sds-c-inputtext-spacing-block, var(--sds-s-input-spacing))
24
+ var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
25
25
  );
26
26
  padding-block-end: var(
27
27
  --sds-c-inputtext-spacing-blockend,
28
- var(--sds-c-inputtext-spacing-block, var(--sds-s-input-spacing))
28
+ var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
29
29
  );
30
- background: var(--sds-c-inputtext-color-background, var(--sds-s-input-color-background));
30
+ background: var(--sds-c-inputtext-color-background, var(--slds-s-input-color-background));
31
31
  border-block-start: var(
32
32
  --sds-c-inputtext-sizing-border-blockstart,
33
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
33
+ var(--sds-c-inputtext-sizing-border, 1px)
34
34
  )
35
35
  solid
36
36
  var(
37
37
  --sds-c-inputtext-color-border-blockstart,
38
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
38
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
39
39
  );
40
40
  border-inline-start: var(
41
41
  --sds-c-inputtext-sizing-border-inlinestart,
42
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
42
+ var(--sds-c-inputtext-sizing-border, 1px)
43
43
  )
44
44
  solid
45
45
  var(
46
46
  --sds-c-inputtext-color-border-inlinestart,
47
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
47
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
48
48
  );
49
- border-inline-end: var(
50
- --sds-c-inputtext-sizing-border-inlineend,
51
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
52
- )
49
+ border-inline-end: var(--sds-c-inputtext-sizing-border-inlineend, var(--sds-c-inputtext-sizing-border, 1px))
53
50
  solid
54
51
  var(
55
52
  --sds-c-inputtext-color-border-inlineend,
56
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
53
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
57
54
  );
58
- border-block-end: var(
59
- --sds-c-inputtext-sizing-border-blockend,
60
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
61
- )
55
+ border-block-end: var(--sds-c-inputtext-sizing-border-blockend, var(--sds-c-inputtext-sizing-border, 1px))
62
56
  solid
63
57
  var(
64
58
  --sds-c-inputtext-color-border-blockend,
65
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
59
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
66
60
  );
67
- border-radius: var(--sds-c-inputtext-radius-border, var(--sds-s-input-radius-border));
68
- box-shadow: var(--sds-c-inputtext-shadow, var(--sds-s-input-shadow));
61
+ border-radius: var(--sds-c-inputtext-radius-border, var(--slds-s-input-radius-border));
62
+ box-shadow: var(--sds-c-inputtext-shadow, var(--slds-s-input-shadow));
69
63
  }
70
64
  /**
71
65
  * Input Control
@@ -77,8 +71,8 @@
77
71
  width: 100%;
78
72
  height: 100%;
79
73
  padding: 0;
80
- font-size: var(--sds-c-inputtext-font-size, var(--sds-s-input-font-size));
81
- color: var(--sds-c-inputtext-text-color, var(--sds-s-input-text-color));
74
+ font-size: var(--sds-c-inputtext-font-size, var(--slds-s-input-font-size));
75
+ color: var(--sds-c-inputtext-text-color, var(--slds-s-input-text-color));
82
76
  line-height: 1;
83
77
  border: none;
84
78
  background: transparent;
@@ -92,20 +86,20 @@
92
86
  :host([data-render-mode="shadow"][active]) [part~='input-container'] {
93
87
  --sds-c-inputtext-color-background: var(
94
88
  --sds-c-inputtext-color-background-active,
95
- var(--sds-s-input-color-background-active)
89
+ var(--slds-s-input-color-background-active)
96
90
  );
97
91
  --sds-c-inputtext-color-border: var(
98
92
  --sds-c-inputtext-color-border-active,
99
- var(--sds-s-input-color-border-active)
93
+ var(--slds-s-input-color-border-active)
100
94
  );
101
- --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--sds-s-input-shadow-active));
95
+ --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--slds-s-input-shadow-active));
102
96
  }
103
97
  /**
104
98
  * Placeholder text
105
99
  */
106
100
  :host([data-render-mode="shadow"]) [part~='input']::placeholder {
107
- color: var(--sds-c-inputtext-text-color-placeholder, var(--sds-s-input-text-color-placeholder));
108
- font-style: var(--sds-c-inputtext-font-style-placeholder, var(--sds-s-input-font-style-placeholder));
101
+ color: var(--sds-c-inputtext-text-color-placeholder, var(--slds-s-input-text-color-placeholder));
102
+ font-style: var(--sds-c-inputtext-font-style-placeholder, var(--slds-s-input-font-style-placeholder));
109
103
  }
110
104
  /**
111
105
  * Input container when it receives focus-within
@@ -115,16 +109,16 @@
115
109
  :host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
116
110
  --sds-c-inputtext-color-border: var(
117
111
  --sds-c-inputtext-color-border-focus,
118
- var(--sds-s-input-color-border-focus, revert)
112
+ var(--slds-s-input-color-border-focus, revert)
119
113
  );
120
- --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--sds-s-input-shadow-focus));
114
+ --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--slds-s-input-shadow-focus));
121
115
  --sds-c-inputtext-color-background: var(
122
116
  --sds-c-inputtext-color-background-focus,
123
- var(--sds-s-input-color-background-focus, revert)
117
+ var(--slds-s-input-color-background-focus, revert)
124
118
  );
125
119
  --sds-c-inputtext-text-color: var(
126
120
  --sds-c-inputtext-text-color-focus,
127
- var(--sds-s-input-text-color-focus, revert)
121
+ var(--slds-s-input-text-color-focus, revert)
128
122
  );
129
123
  }
130
124
  /**
@@ -143,28 +137,28 @@
143
137
  align-items: center;
144
138
 
145
139
  /* Need to tweak stylelint to merge new shared groups into existing set, label is not available */
146
- gap: var(--sds-c-inputtext-label-spacing-gap, var(--sds-s-label-spacing-gap));
140
+ gap: var(--sds-c-inputtext-label-spacing-gap, var(--slds-s-label-spacing-gap));
147
141
  padding-inline-start: var(
148
142
  --sds-c-inputtext-label-spacing-inlinestart,
149
- var(--sds-c-inputtext-label-spacing-inline, var(--sds-s-label-spacing))
143
+ var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
150
144
  );
151
145
  padding-inline-end: var(
152
146
  --sds-c-inputtext-label-spacing-inlineend,
153
- var(--sds-c-inputtext-label-spacing-inline, var(--sds-s-label-spacing))
147
+ var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
154
148
  );
155
149
  padding-block-start: var(
156
150
  --sds-c-inputtext-label-spacing-blockstart,
157
- var(--sds-c-inputtext-label-spacing-block, var(--sds-s-label-spacing))
151
+ var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
158
152
  );
159
153
  padding-block-end: var(
160
154
  --sds-c-inputtext-label-spacing-blockend,
161
- var(--sds-c-inputtext-label-spacing-block, var(--sds-s-label-spacing))
155
+ var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
162
156
  );
163
- color: var(--sds-c-inputtext-label-color, var(--sds-s-label-color));
157
+ color: var(--sds-c-inputtext-label-color, var(--slds-s-label-color));
164
158
  }
165
159
  :host([data-render-mode="shadow"]) [part='label'] {
166
- font-size: var(--sds-c-inputtext-label-font-size, var(--sds-s-label-font-size));
167
- font-weight: var(--sds-c-inputtext-label-font-weight, var(--sds-s-label-font-weight));
160
+ font-size: var(--sds-c-inputtext-label-font-size, var(--slds-s-label-font-size));
161
+ font-weight: var(--sds-c-inputtext-label-font-weight, var(--slds-s-label-font-weight));
168
162
  }
169
163
  /**
170
164
  * Help text
@@ -174,23 +168,23 @@
174
168
  */
175
169
  :host([data-render-mode="shadow"]) [part='help-text visible'] {
176
170
  /* Need to tweak stylelint to merge new shared groups into existing set, helptext is not available */
177
- font-size: var(--sds-c-inputtext-helptext-font-size, var(--sds-s-helptext-font-size));
178
- color: var(--sds-c-inputtext-helptext-text-color, var(--sds-s-helptext-text-color));
171
+ font-size: var(--sds-c-inputtext-helptext-font-size, var(--slds-s-helptext-font-size));
172
+ color: var(--sds-c-inputtext-helptext-text-color, var(--slds-s-helptext-text-color));
179
173
  padding-inline-start: var(
180
174
  --sds-c-inputtext-helptext-spacing-inlinestart,
181
- var(--sds-c-inputtext-helptext-spacing-inline, var(--sds-s-helptext-spacing))
175
+ var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
182
176
  );
183
177
  padding-inline-end: var(
184
178
  --sds-c-inputtext-helptext-spacing-inlineend,
185
- var(--sds-c-inputtext-helptext-spacing-inline, var(--sds-s-helptext-spacing))
179
+ var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
186
180
  );
187
181
  padding-block-start: var(
188
182
  --sds-c-inputtext-helptext-spacing-blockstart,
189
- var(--sds-c-inputtext-helptext-spacing-block, var(--sds-s-helptext-spacing))
183
+ var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
190
184
  );
191
185
  padding-block-end: var(
192
186
  --sds-c-inputtext-helptext-spacing-blockend,
193
- var(--sds-c-inputtext-helptext-spacing-block, var(--sds-s-helptext-spacing))
187
+ var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
194
188
  );
195
189
  }
196
190
  /**
@@ -199,11 +193,11 @@
199
193
  :host([data-render-mode="shadow"][disabled]) {
200
194
  --sds-c-inputtext-color-background: var(
201
195
  --sds-c-inputtext-color-background-disabled,
202
- var(--sds-s-input-color-background-disabled)
196
+ var(--slds-s-input-color-background-disabled)
203
197
  );
204
198
  --sds-c-inputtext-color-border: var(
205
199
  --sds-c-inputtext-color-border-disabled,
206
- var(--sds-s-input-color-border-disabled)
200
+ var(--slds-s-input-color-border-disabled)
207
201
  );
208
202
  }
209
203
  /**
package/src/lightning/inputLocation/input-text.slds.css CHANGED
@@ -9,63 +9,57 @@
9
9
  :host([data-render-mode="shadow"]) [part~='input-container'] {
10
10
  display: flex;
11
11
  align-items: center;
12
- gap: var(--sds-c-inputtext-spacing-gap, var(--sds-s-input-spacing-gap));
13
- min-height: var(--sds-c-inputtext-sizing-height, var(--sds-s-input-sizing-height));
12
+ gap: var(--sds-c-inputtext-spacing-gap, var(--slds-s-input-spacing-gap));
13
+ min-height: var(--sds-c-inputtext-sizing-height, var(--slds-s-input-sizing-height));
14
14
  padding-inline-start: var(
15
15
  --sds-c-inputtext-spacing-inlinestart,
16
- var(--sds-c-inputtext-spacing-inline, var(--sds-s-input-spacing))
16
+ var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
17
17
  );
18
18
  padding-inline-end: var(
19
19
  --sds-c-inputtext-spacing-inlineend,
20
- var(--sds-c-inputtext-spacing-inline, var(--sds-s-input-spacing))
20
+ var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
21
21
  );
22
22
  padding-block-start: var(
23
23
  --sds-c-inputtext-spacing-blockstart,
24
- var(--sds-c-inputtext-spacing-block, var(--sds-s-input-spacing))
24
+ var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
25
25
  );
26
26
  padding-block-end: var(
27
27
  --sds-c-inputtext-spacing-blockend,
28
- var(--sds-c-inputtext-spacing-block, var(--sds-s-input-spacing))
28
+ var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
29
29
  );
30
- background: var(--sds-c-inputtext-color-background, var(--sds-s-input-color-background));
30
+ background: var(--sds-c-inputtext-color-background, var(--slds-s-input-color-background));
31
31
  border-block-start: var(
32
32
  --sds-c-inputtext-sizing-border-blockstart,
33
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
33
+ var(--sds-c-inputtext-sizing-border, 1px)
34
34
  )
35
35
  solid
36
36
  var(
37
37
  --sds-c-inputtext-color-border-blockstart,
38
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
38
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
39
39
  );
40
40
  border-inline-start: var(
41
41
  --sds-c-inputtext-sizing-border-inlinestart,
42
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
42
+ var(--sds-c-inputtext-sizing-border, 1px)
43
43
  )
44
44
  solid
45
45
  var(
46
46
  --sds-c-inputtext-color-border-inlinestart,
47
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
47
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
48
48
  );
49
- border-inline-end: var(
50
- --sds-c-inputtext-sizing-border-inlineend,
51
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
52
- )
49
+ border-inline-end: var(--sds-c-inputtext-sizing-border-inlineend, var(--sds-c-inputtext-sizing-border, 1px))
53
50
  solid
54
51
  var(
55
52
  --sds-c-inputtext-color-border-inlineend,
56
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
53
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
57
54
  );
58
- border-block-end: var(
59
- --sds-c-inputtext-sizing-border-blockend,
60
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
61
- )
55
+ border-block-end: var(--sds-c-inputtext-sizing-border-blockend, var(--sds-c-inputtext-sizing-border, 1px))
62
56
  solid
63
57
  var(
64
58
  --sds-c-inputtext-color-border-blockend,
65
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
59
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
66
60
  );
67
- border-radius: var(--sds-c-inputtext-radius-border, var(--sds-s-input-radius-border));
68
- box-shadow: var(--sds-c-inputtext-shadow, var(--sds-s-input-shadow));
61
+ border-radius: var(--sds-c-inputtext-radius-border, var(--slds-s-input-radius-border));
62
+ box-shadow: var(--sds-c-inputtext-shadow, var(--slds-s-input-shadow));
69
63
  }
70
64
  /**
71
65
  * Input Control
@@ -77,8 +71,8 @@
77
71
  width: 100%;
78
72
  height: 100%;
79
73
  padding: 0;
80
- font-size: var(--sds-c-inputtext-font-size, var(--sds-s-input-font-size));
81
- color: var(--sds-c-inputtext-text-color, var(--sds-s-input-text-color));
74
+ font-size: var(--sds-c-inputtext-font-size, var(--slds-s-input-font-size));
75
+ color: var(--sds-c-inputtext-text-color, var(--slds-s-input-text-color));
82
76
  line-height: 1;
83
77
  border: none;
84
78
  background: transparent;
@@ -92,20 +86,20 @@
92
86
  :host([data-render-mode="shadow"][active]) [part~='input-container'] {
93
87
  --sds-c-inputtext-color-background: var(
94
88
  --sds-c-inputtext-color-background-active,
95
- var(--sds-s-input-color-background-active)
89
+ var(--slds-s-input-color-background-active)
96
90
  );
97
91
  --sds-c-inputtext-color-border: var(
98
92
  --sds-c-inputtext-color-border-active,
99
- var(--sds-s-input-color-border-active)
93
+ var(--slds-s-input-color-border-active)
100
94
  );
101
- --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--sds-s-input-shadow-active));
95
+ --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--slds-s-input-shadow-active));
102
96
  }
103
97
  /**
104
98
  * Placeholder text
105
99
  */
106
100
  :host([data-render-mode="shadow"]) [part~='input']::placeholder {
107
- color: var(--sds-c-inputtext-text-color-placeholder, var(--sds-s-input-text-color-placeholder));
108
- font-style: var(--sds-c-inputtext-font-style-placeholder, var(--sds-s-input-font-style-placeholder));
101
+ color: var(--sds-c-inputtext-text-color-placeholder, var(--slds-s-input-text-color-placeholder));
102
+ font-style: var(--sds-c-inputtext-font-style-placeholder, var(--slds-s-input-font-style-placeholder));
109
103
  }
110
104
  /**
111
105
  * Input container when it receives focus-within
@@ -115,16 +109,16 @@
115
109
  :host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
116
110
  --sds-c-inputtext-color-border: var(
117
111
  --sds-c-inputtext-color-border-focus,
118
- var(--sds-s-input-color-border-focus, revert)
112
+ var(--slds-s-input-color-border-focus, revert)
119
113
  );
120
- --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--sds-s-input-shadow-focus));
114
+ --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--slds-s-input-shadow-focus));
121
115
  --sds-c-inputtext-color-background: var(
122
116
  --sds-c-inputtext-color-background-focus,
123
- var(--sds-s-input-color-background-focus, revert)
117
+ var(--slds-s-input-color-background-focus, revert)
124
118
  );
125
119
  --sds-c-inputtext-text-color: var(
126
120
  --sds-c-inputtext-text-color-focus,
127
- var(--sds-s-input-text-color-focus, revert)
121
+ var(--slds-s-input-text-color-focus, revert)
128
122
  );
129
123
  }
130
124
  /**
@@ -143,28 +137,28 @@
143
137
  align-items: center;
144
138
 
145
139
  /* Need to tweak stylelint to merge new shared groups into existing set, label is not available */
146
- gap: var(--sds-c-inputtext-label-spacing-gap, var(--sds-s-label-spacing-gap));
140
+ gap: var(--sds-c-inputtext-label-spacing-gap, var(--slds-s-label-spacing-gap));
147
141
  padding-inline-start: var(
148
142
  --sds-c-inputtext-label-spacing-inlinestart,
149
- var(--sds-c-inputtext-label-spacing-inline, var(--sds-s-label-spacing))
143
+ var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
150
144
  );
151
145
  padding-inline-end: var(
152
146
  --sds-c-inputtext-label-spacing-inlineend,
153
- var(--sds-c-inputtext-label-spacing-inline, var(--sds-s-label-spacing))
147
+ var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
154
148
  );
155
149
  padding-block-start: var(
156
150
  --sds-c-inputtext-label-spacing-blockstart,
157
- var(--sds-c-inputtext-label-spacing-block, var(--sds-s-label-spacing))
151
+ var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
158
152
  );
159
153
  padding-block-end: var(
160
154
  --sds-c-inputtext-label-spacing-blockend,
161
- var(--sds-c-inputtext-label-spacing-block, var(--sds-s-label-spacing))
155
+ var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
162
156
  );
163
- color: var(--sds-c-inputtext-label-color, var(--sds-s-label-color));
157
+ color: var(--sds-c-inputtext-label-color, var(--slds-s-label-color));
164
158
  }
165
159
  :host([data-render-mode="shadow"]) [part='label'] {
166
- font-size: var(--sds-c-inputtext-label-font-size, var(--sds-s-label-font-size));
167
- font-weight: var(--sds-c-inputtext-label-font-weight, var(--sds-s-label-font-weight));
160
+ font-size: var(--sds-c-inputtext-label-font-size, var(--slds-s-label-font-size));
161
+ font-weight: var(--sds-c-inputtext-label-font-weight, var(--slds-s-label-font-weight));
168
162
  }
169
163
  /**
170
164
  * Help text
@@ -174,23 +168,23 @@
174
168
  */
175
169
  :host([data-render-mode="shadow"]) [part='help-text visible'] {
176
170
  /* Need to tweak stylelint to merge new shared groups into existing set, helptext is not available */
177
- font-size: var(--sds-c-inputtext-helptext-font-size, var(--sds-s-helptext-font-size));
178
- color: var(--sds-c-inputtext-helptext-text-color, var(--sds-s-helptext-text-color));
171
+ font-size: var(--sds-c-inputtext-helptext-font-size, var(--slds-s-helptext-font-size));
172
+ color: var(--sds-c-inputtext-helptext-text-color, var(--slds-s-helptext-text-color));
179
173
  padding-inline-start: var(
180
174
  --sds-c-inputtext-helptext-spacing-inlinestart,
181
- var(--sds-c-inputtext-helptext-spacing-inline, var(--sds-s-helptext-spacing))
175
+ var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
182
176
  );
183
177
  padding-inline-end: var(
184
178
  --sds-c-inputtext-helptext-spacing-inlineend,
185
- var(--sds-c-inputtext-helptext-spacing-inline, var(--sds-s-helptext-spacing))
179
+ var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
186
180
  );
187
181
  padding-block-start: var(
188
182
  --sds-c-inputtext-helptext-spacing-blockstart,
189
- var(--sds-c-inputtext-helptext-spacing-block, var(--sds-s-helptext-spacing))
183
+ var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
190
184
  );
191
185
  padding-block-end: var(
192
186
  --sds-c-inputtext-helptext-spacing-blockend,
193
- var(--sds-c-inputtext-helptext-spacing-block, var(--sds-s-helptext-spacing))
187
+ var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
194
188
  );
195
189
  }
196
190
  /**
@@ -199,11 +193,11 @@
199
193
  :host([data-render-mode="shadow"][disabled]) {
200
194
  --sds-c-inputtext-color-background: var(
201
195
  --sds-c-inputtext-color-background-disabled,
202
- var(--sds-s-input-color-background-disabled)
196
+ var(--slds-s-input-color-background-disabled)
203
197
  );
204
198
  --sds-c-inputtext-color-border: var(
205
199
  --sds-c-inputtext-color-border-disabled,
206
- var(--sds-s-input-color-border-disabled)
200
+ var(--slds-s-input-color-border-disabled)
207
201
  );
208
202
  }
209
203
  /**
package/src/lightning/inputName/input-text.slds.css CHANGED
@@ -9,63 +9,57 @@
9
9
  :host([data-render-mode="shadow"]) [part~='input-container'] {
10
10
  display: flex;
11
11
  align-items: center;
12
- gap: var(--sds-c-inputtext-spacing-gap, var(--sds-s-input-spacing-gap));
13
- min-height: var(--sds-c-inputtext-sizing-height, var(--sds-s-input-sizing-height));
12
+ gap: var(--sds-c-inputtext-spacing-gap, var(--slds-s-input-spacing-gap));
13
+ min-height: var(--sds-c-inputtext-sizing-height, var(--slds-s-input-sizing-height));
14
14
  padding-inline-start: var(
15
15
  --sds-c-inputtext-spacing-inlinestart,
16
- var(--sds-c-inputtext-spacing-inline, var(--sds-s-input-spacing))
16
+ var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
17
17
  );
18
18
  padding-inline-end: var(
19
19
  --sds-c-inputtext-spacing-inlineend,
20
- var(--sds-c-inputtext-spacing-inline, var(--sds-s-input-spacing))
20
+ var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
21
21
  );
22
22
  padding-block-start: var(
23
23
  --sds-c-inputtext-spacing-blockstart,
24
- var(--sds-c-inputtext-spacing-block, var(--sds-s-input-spacing))
24
+ var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
25
25
  );
26
26
  padding-block-end: var(
27
27
  --sds-c-inputtext-spacing-blockend,
28
- var(--sds-c-inputtext-spacing-block, var(--sds-s-input-spacing))
28
+ var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
29
29
  );
30
- background: var(--sds-c-inputtext-color-background, var(--sds-s-input-color-background));
30
+ background: var(--sds-c-inputtext-color-background, var(--slds-s-input-color-background));
31
31
  border-block-start: var(
32
32
  --sds-c-inputtext-sizing-border-blockstart,
33
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
33
+ var(--sds-c-inputtext-sizing-border, 1px)
34
34
  )
35
35
  solid
36
36
  var(
37
37
  --sds-c-inputtext-color-border-blockstart,
38
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
38
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
39
39
  );
40
40
  border-inline-start: var(
41
41
  --sds-c-inputtext-sizing-border-inlinestart,
42
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
42
+ var(--sds-c-inputtext-sizing-border, 1px)
43
43
  )
44
44
  solid
45
45
  var(
46
46
  --sds-c-inputtext-color-border-inlinestart,
47
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
47
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
48
48
  );
49
- border-inline-end: var(
50
- --sds-c-inputtext-sizing-border-inlineend,
51
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
52
- )
49
+ border-inline-end: var(--sds-c-inputtext-sizing-border-inlineend, var(--sds-c-inputtext-sizing-border, 1px))
53
50
  solid
54
51
  var(
55
52
  --sds-c-inputtext-color-border-inlineend,
56
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
53
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
57
54
  );
58
- border-block-end: var(
59
- --sds-c-inputtext-sizing-border-blockend,
60
- var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
61
- )
55
+ border-block-end: var(--sds-c-inputtext-sizing-border-blockend, var(--sds-c-inputtext-sizing-border, 1px))
62
56
  solid
63
57
  var(
64
58
  --sds-c-inputtext-color-border-blockend,
65
- var(--sds-c-inputtext-color-border, var(--sds-s-input-color-border, currentColor))
59
+ var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
66
60
  );
67
- border-radius: var(--sds-c-inputtext-radius-border, var(--sds-s-input-radius-border));
68
- box-shadow: var(--sds-c-inputtext-shadow, var(--sds-s-input-shadow));
61
+ border-radius: var(--sds-c-inputtext-radius-border, var(--slds-s-input-radius-border));
62
+ box-shadow: var(--sds-c-inputtext-shadow, var(--slds-s-input-shadow));
69
63
  }
70
64
  /**
71
65
  * Input Control
@@ -77,8 +71,8 @@
77
71
  width: 100%;
78
72
  height: 100%;
79
73
  padding: 0;
80
- font-size: var(--sds-c-inputtext-font-size, var(--sds-s-input-font-size));
81
- color: var(--sds-c-inputtext-text-color, var(--sds-s-input-text-color));
74
+ font-size: var(--sds-c-inputtext-font-size, var(--slds-s-input-font-size));
75
+ color: var(--sds-c-inputtext-text-color, var(--slds-s-input-text-color));
82
76
  line-height: 1;
83
77
  border: none;
84
78
  background: transparent;
@@ -92,20 +86,20 @@
92
86
  :host([data-render-mode="shadow"][active]) [part~='input-container'] {
93
87
  --sds-c-inputtext-color-background: var(
94
88
  --sds-c-inputtext-color-background-active,
95
- var(--sds-s-input-color-background-active)
89
+ var(--slds-s-input-color-background-active)
96
90
  );
97
91
  --sds-c-inputtext-color-border: var(
98
92
  --sds-c-inputtext-color-border-active,
99
- var(--sds-s-input-color-border-active)
93
+ var(--slds-s-input-color-border-active)
100
94
  );
101
- --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--sds-s-input-shadow-active));
95
+ --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--slds-s-input-shadow-active));
102
96
  }
103
97
  /**
104
98
  * Placeholder text
105
99
  */
106
100
  :host([data-render-mode="shadow"]) [part~='input']::placeholder {
107
- color: var(--sds-c-inputtext-text-color-placeholder, var(--sds-s-input-text-color-placeholder));
108
- font-style: var(--sds-c-inputtext-font-style-placeholder, var(--sds-s-input-font-style-placeholder));
101
+ color: var(--sds-c-inputtext-text-color-placeholder, var(--slds-s-input-text-color-placeholder));
102
+ font-style: var(--sds-c-inputtext-font-style-placeholder, var(--slds-s-input-font-style-placeholder));
109
103
  }
110
104
  /**
111
105
  * Input container when it receives focus-within
@@ -115,16 +109,16 @@
115
109
  :host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
116
110
  --sds-c-inputtext-color-border: var(
117
111
  --sds-c-inputtext-color-border-focus,
118
- var(--sds-s-input-color-border-focus, revert)
112
+ var(--slds-s-input-color-border-focus, revert)
119
113
  );
120
- --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--sds-s-input-shadow-focus));
114
+ --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--slds-s-input-shadow-focus));
121
115
  --sds-c-inputtext-color-background: var(
122
116
  --sds-c-inputtext-color-background-focus,
123
- var(--sds-s-input-color-background-focus, revert)
117
+ var(--slds-s-input-color-background-focus, revert)
124
118
  );
125
119
  --sds-c-inputtext-text-color: var(
126
120
  --sds-c-inputtext-text-color-focus,
127
- var(--sds-s-input-text-color-focus, revert)
121
+ var(--slds-s-input-text-color-focus, revert)
128
122
  );
129
123
  }
130
124
  /**
@@ -143,28 +137,28 @@
143
137
  align-items: center;
144
138
 
145
139
  /* Need to tweak stylelint to merge new shared groups into existing set, label is not available */
146
- gap: var(--sds-c-inputtext-label-spacing-gap, var(--sds-s-label-spacing-gap));
140
+ gap: var(--sds-c-inputtext-label-spacing-gap, var(--slds-s-label-spacing-gap));
147
141
  padding-inline-start: var(
148
142
  --sds-c-inputtext-label-spacing-inlinestart,
149
- var(--sds-c-inputtext-label-spacing-inline, var(--sds-s-label-spacing))
143
+ var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
150
144
  );
151
145
  padding-inline-end: var(
152
146
  --sds-c-inputtext-label-spacing-inlineend,
153
- var(--sds-c-inputtext-label-spacing-inline, var(--sds-s-label-spacing))
147
+ var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
154
148
  );
155
149
  padding-block-start: var(
156
150
  --sds-c-inputtext-label-spacing-blockstart,
157
- var(--sds-c-inputtext-label-spacing-block, var(--sds-s-label-spacing))
151
+ var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
158
152
  );
159
153
  padding-block-end: var(
160
154
  --sds-c-inputtext-label-spacing-blockend,
161
- var(--sds-c-inputtext-label-spacing-block, var(--sds-s-label-spacing))
155
+ var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
162
156
  );
163
- color: var(--sds-c-inputtext-label-color, var(--sds-s-label-color));
157
+ color: var(--sds-c-inputtext-label-color, var(--slds-s-label-color));
164
158
  }
165
159
  :host([data-render-mode="shadow"]) [part='label'] {
166
- font-size: var(--sds-c-inputtext-label-font-size, var(--sds-s-label-font-size));
167
- font-weight: var(--sds-c-inputtext-label-font-weight, var(--sds-s-label-font-weight));
160
+ font-size: var(--sds-c-inputtext-label-font-size, var(--slds-s-label-font-size));
161
+ font-weight: var(--sds-c-inputtext-label-font-weight, var(--slds-s-label-font-weight));
168
162
  }
169
163
  /**
170
164
  * Help text
@@ -174,23 +168,23 @@
174
168
  */
175
169
  :host([data-render-mode="shadow"]) [part='help-text visible'] {
176
170
  /* Need to tweak stylelint to merge new shared groups into existing set, helptext is not available */
177
- font-size: var(--sds-c-inputtext-helptext-font-size, var(--sds-s-helptext-font-size));
178
- color: var(--sds-c-inputtext-helptext-text-color, var(--sds-s-helptext-text-color));
171
+ font-size: var(--sds-c-inputtext-helptext-font-size, var(--slds-s-helptext-font-size));
172
+ color: var(--sds-c-inputtext-helptext-text-color, var(--slds-s-helptext-text-color));
179
173
  padding-inline-start: var(
180
174
  --sds-c-inputtext-helptext-spacing-inlinestart,
181
- var(--sds-c-inputtext-helptext-spacing-inline, var(--sds-s-helptext-spacing))
175
+ var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
182
176
  );
183
177
  padding-inline-end: var(
184
178
  --sds-c-inputtext-helptext-spacing-inlineend,
185
- var(--sds-c-inputtext-helptext-spacing-inline, var(--sds-s-helptext-spacing))
179
+ var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
186
180
  );
187
181
  padding-block-start: var(
188
182
  --sds-c-inputtext-helptext-spacing-blockstart,
189
- var(--sds-c-inputtext-helptext-spacing-block, var(--sds-s-helptext-spacing))
183
+ var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
190
184
  );
191
185
  padding-block-end: var(
192
186
  --sds-c-inputtext-helptext-spacing-blockend,
193
- var(--sds-c-inputtext-helptext-spacing-block, var(--sds-s-helptext-spacing))
187
+ var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
194
188
  );
195
189
  }
196
190
  /**
@@ -199,11 +193,11 @@
199
193
  :host([data-render-mode="shadow"][disabled]) {
200
194
  --sds-c-inputtext-color-background: var(
201
195
  --sds-c-inputtext-color-background-disabled,
202
- var(--sds-s-input-color-background-disabled)
196
+ var(--slds-s-input-color-background-disabled)
203
197
  );
204
198
  --sds-c-inputtext-color-border: var(
205
199
  --sds-c-inputtext-color-border-disabled,
206
- var(--sds-s-input-color-border-disabled)
200
+ var(--slds-s-input-color-border-disabled)
207
201
  );
208
202
  }
209
203
  /**