@dialpad/dialtone 6.40.0 → 6.40.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/lib/build/less/components/input.less +36 -155
  2. package/lib/dist/css/dialtone.css +60 -115
  3. package/lib/dist/css/dialtone.min.css +1 -1
  4. package/package.json +1 -1
package/lib/build/less/components/input.less CHANGED
@@ -18,19 +18,12 @@
18
18
  // - Sizes
19
19
  // • INPUT ICONS
20
20
  //
21
- // ============================================================================
22
- // Inputs CSS Vars
23
- // ----------------------------------------------------------------------------
24
- @inputs-icon-spacing--xs: calc(var(--su4) + @icon12 + var(--su8));
25
- @inputs-icon-spacing--sm: calc(var(--su4) + @icon14 + var(--su8));
26
- @inputs-icon-spacing: calc(var(--su4) + @icon16 + var(--su8));
27
- @inputs-icon-spacing--lg: calc(var(--su4) + @icon20 + var(--su8));
28
- @inputs-icon-spacing--xl: calc(var(--su4) + @icon24 + var(--su8));
29
21
 
30
22
  // $ INPUTS
31
23
  // ----------------------------------------------------------------------------
32
24
  .d-input,
33
- .d-textarea {
25
+ .d-textarea,
26
+ .d-input__wrapper {
34
27
  // Component CSS Vars
35
28
  // ------------------------------------------------------------------------
36
29
  --input--focus-bc: var(--primary-color);
@@ -59,14 +52,6 @@
59
52
  transition-duration: 100ms;
60
53
  transition-property: border, box-shadow, background-color;
61
54
 
62
- &.d-input-icon--right {
63
- padding-right: @inputs-icon-spacing;
64
- }
65
-
66
- &.d-input-icon--left {
67
- padding-left: @inputs-icon-spacing;
68
- }
69
-
70
55
  // -- Placeholder copy
71
56
  &::placeholder {
72
57
  color: var(--black-300);
@@ -76,7 +61,8 @@
76
61
  display: none;
77
62
  }
78
63
  // -- FOCUS
79
- &:focus {
64
+ &:focus,
65
+ &:focus-within {
80
66
  --input--bc: var(--input--focus-bc);
81
67
 
82
68
  outline: 0;
@@ -89,7 +75,8 @@
89
75
  --input--bgc: var(--black-075);
90
76
  --input--fc: var(--black-400);
91
77
 
92
- &:focus {
78
+ &:focus,
79
+ &:focus-within {
93
80
  box-shadow: none !important;
94
81
  }
95
82
 
@@ -107,57 +94,54 @@
107
94
  // $$ INPUT WRAPPER
108
95
  // ----------------------------------------------------------------------------
109
96
  .d-input__wrapper {
110
- position: relative;
97
+ padding: 0;
98
+
99
+ .d-input-icon.d-input-icon--right {
100
+ margin-right: var(--su8);
101
+ }
102
+
103
+ .d-input-icon.d-input-icon--left {
104
+ margin-left: var(--su8);
105
+ }
106
+
107
+ .d-input,
108
+ .d-textarea {
109
+ flex: 1;
110
+ border: none;
111
+ border-radius: var(--base--corner-radius);
112
+
113
+ &:focus {
114
+ border: none;
115
+ outline: 0;
116
+ box-shadow: none !important;
117
+ }
118
+
119
+ &.d-input-icon--right {
120
+ padding-right: var(--su6);
121
+ }
122
+
123
+ &.d-input-icon--left {
124
+ padding-left: var(--su6);
125
+ }
126
+ }
111
127
  }
112
128
 
113
129
  // $$ SIZES
114
130
  // ----------------------------------------------------------------------------
115
131
  .d-input.d-input--xs {
116
132
  .input-button-xs();
117
-
118
- &.d-input-icon--right {
119
- padding-right: @inputs-icon-spacing--xs;
120
- }
121
-
122
- &.d-input-icon--left {
123
- padding-left: @inputs-icon-spacing--xs;
124
- }
125
133
  }
126
134
 
127
135
  .d-input.d-input--sm {
128
136
  .input-button-sm();
129
-
130
- &.d-input-icon--right {
131
- padding-right: @inputs-icon-spacing--sm;
132
- }
133
-
134
- &.d-input-icon--left {
135
- padding-left: @inputs-icon-spacing--sm;
136
- }
137
137
  }
138
138
 
139
139
  .d-input.d-input--lg {
140
140
  .input-button-lg();
141
-
142
- &.d-input-icon--right {
143
- padding-right: @inputs-icon-spacing--lg;
144
- }
145
-
146
- &.d-input-icon--left {
147
- padding-left: @inputs-icon-spacing--lg;
148
- }
149
141
  }
150
142
 
151
143
  .d-input.d-input--xl {
152
144
  .input-button-xl();
153
-
154
- &.d-input-icon--right {
155
- padding-right: @inputs-icon-spacing--xl;
156
- }
157
-
158
- &.d-input-icon--left {
159
- padding-left: @inputs-icon-spacing--xl;
160
- }
161
145
  }
162
146
 
163
147
 
@@ -175,56 +159,24 @@
175
159
  .input-button-xs();
176
160
 
177
161
  min-height: 4rem;
178
-
179
- &.d-input-icon--right {
180
- padding-right: @inputs-icon-spacing--xs;
181
- }
182
-
183
- &.d-input-icon--left {
184
- padding-left: @inputs-icon-spacing--xs;
185
- }
186
162
  }
187
163
 
188
164
  .d-textarea--sm {
189
165
  .input-button-sm();
190
166
 
191
167
  min-height: 4.8rem;
192
-
193
- &.d-input-icon--right {
194
- padding-right: @inputs-icon-spacing--sm;
195
- }
196
-
197
- &.d-input-icon--left {
198
- padding-left: @inputs-icon-spacing--sm;
199
- }
200
168
  }
201
169
 
202
170
  .d-textarea--lg {
203
171
  .input-button-lg();
204
172
 
205
173
  min-height: 9.2rem;
206
-
207
- &.d-input-icon--right {
208
- padding-right: @inputs-icon-spacing--lg;
209
- }
210
-
211
- &.d-input-icon--left {
212
- padding-left: @inputs-icon-spacing--lg;
213
- }
214
174
  }
215
175
 
216
176
  .d-textarea--xl {
217
177
  .input-button-xl();
218
178
 
219
179
  min-height: 10rem;
220
-
221
- &.d-input-icon--right {
222
- padding-right: @inputs-icon-spacing--xl;
223
- }
224
-
225
- &.d-input-icon--left {
226
- padding-left: @inputs-icon-spacing--xl;
227
- }
228
180
  }
229
181
 
230
182
  // $$ VALIDATION STATES
@@ -267,7 +219,6 @@
267
219
  // ------------------------------------------------------------------------
268
220
  --input-icon-size: @icon16;
269
221
 
270
- position: absolute;
271
222
  z-index: var(--zi-base1);
272
223
  display: inline-flex;
273
224
  align-items: center;
@@ -279,24 +230,6 @@
279
230
  width: var(--input-icon-size);
280
231
  height: var(--input-icon-size);
281
232
  }
282
-
283
- &.d-input-icon--left {
284
- left: var(--su8);
285
- // Update padding for d-input if d-input-icon--left is present
286
- & ~ .d-input,
287
- & ~ .d-textarea {
288
- padding-left: @inputs-icon-spacing;
289
- }
290
- }
291
-
292
- &.d-input-icon--right {
293
- right: var(--su8);
294
-
295
- // Update padding for d-input if d-input-icon--right is present
296
- & ~ .d-input {
297
- padding-right: @inputs-icon-spacing;
298
- }
299
- }
300
233
  }
301
234
 
302
235
 
@@ -309,19 +242,6 @@
309
242
 
310
243
  .d-input-icon--xs {
311
244
  --input-icon-size: @icon12;
312
-
313
- // For backwards compatibility purposes only.
314
- // Update padding for d-input, d-textarea if d-input-icon--left is present
315
- &.d-input-icon--left ~ .d-input,
316
- &.d-input-icon--left ~ .d-textarea {
317
- padding-left: @inputs-icon-spacing--xs;
318
- }
319
-
320
- // For backwards compatibility purposes only.
321
- // Update padding for d-input if d-input-icon--right is present
322
- &.d-input-icon--right ~ .d-input {
323
- padding-right: @inputs-icon-spacing--xs;
324
- }
325
245
  }
326
246
 
327
247
  .d-input-icon.d-input--sm {
@@ -330,19 +250,6 @@
330
250
 
331
251
  .d-input-icon--sm {
332
252
  --input-icon-size: @icon14;
333
-
334
- // For backwards compatibility purposes only.
335
- // Update padding for d-input, d-textarea if d-input-icon--left is present
336
- &.d-input-icon--left ~ .d-input,
337
- &.d-input-icon--left ~ .d-textarea {
338
- padding-left: @inputs-icon-spacing--sm;
339
- }
340
-
341
- // For backwards compatibility purposes only.
342
- // Update padding for d-input if d-input-icon--right is present
343
- &.d-input-icon--right ~ .d-input {
344
- padding-right: @inputs-icon-spacing--sm;
345
- }
346
253
  }
347
254
 
348
255
  .d-input-icon.d-input--lg {
@@ -351,19 +258,6 @@
351
258
 
352
259
  .d-input-icon--lg {
353
260
  --input-icon-size: @icon20;
354
-
355
- // For backwards compatibility purposes only.
356
- // Update padding for d-input, d-textarea if d-input-icon--left is present
357
- &.d-input-icon--left ~ .d-input,
358
- &.d-input-icon--left ~ .d-textarea {
359
- padding-left: @inputs-icon-spacing--lg;
360
- }
361
-
362
- // For backwards compatibility purposes only.
363
- // Update padding for d-input if d-input-icon--right is present
364
- &.d-input-icon--right ~ .d-input {
365
- padding-right: @inputs-icon-spacing--lg;
366
- }
367
261
  }
368
262
 
369
263
  .d-input-icon.d-input--xl {
@@ -372,17 +266,4 @@
372
266
 
373
267
  .d-input-icon--xl {
374
268
  --input-icon-size: @icon24;
375
-
376
- // For backwards compatibility purposes only.
377
- // Update padding for d-input, d-textarea if d-input-icon--left is present
378
- &.d-input-icon--left ~ .d-input,
379
- &.d-input-icon--left ~ .d-textarea {
380
- padding-left: @inputs-icon-spacing--xl;
381
- }
382
-
383
- // For backwards compatibility purposes only.
384
- // Update padding for d-input if d-input-icon--right is present
385
- &.d-input-icon--right ~ .d-input {
386
- padding-right: @inputs-icon-spacing--xl;
387
- }
388
269
  }
package/lib/dist/css/dialtone.css CHANGED
@@ -1449,7 +1449,8 @@ legend .d-label {
1449
1449
  background-repeat: no-repeat;
1450
1450
  }
1451
1451
  .d-input,
1452
- .d-textarea {
1452
+ .d-textarea,
1453
+ .d-input__wrapper {
1453
1454
  --input--focus-bc: var(--primary-color);
1454
1455
  --input--bc: var(--black-500);
1455
1456
  --input--bgc: var(--white);
@@ -1475,54 +1476,91 @@ legend .d-label {
1475
1476
  transition-duration: 100ms;
1476
1477
  transition-property: border, box-shadow, background-color;
1477
1478
  }
1478
- .d-input.d-input-icon--right,
1479
- .d-textarea.d-input-icon--right {
1480
- padding-right: calc(var(--su4) + 1.6rem + var(--su8));
1481
- }
1482
- .d-input.d-input-icon--left,
1483
- .d-textarea.d-input-icon--left {
1484
- padding-left: calc(var(--su4) + 1.6rem + var(--su8));
1485
- }
1486
1479
  .d-input::placeholder,
1487
- .d-textarea::placeholder {
1480
+ .d-textarea::placeholder,
1481
+ .d-input__wrapper::placeholder {
1488
1482
  color: var(--black-300);
1489
1483
  }
1490
1484
  .d-input::-ms-clear,
1491
- .d-textarea::-ms-clear {
1485
+ .d-textarea::-ms-clear,
1486
+ .d-input__wrapper::-ms-clear {
1492
1487
  display: none;
1493
1488
  }
1494
1489
  .d-input:focus,
1495
- .d-textarea:focus {
1490
+ .d-textarea:focus,
1491
+ .d-input__wrapper:focus,
1492
+ .d-input:focus-within,
1493
+ .d-textarea:focus-within,
1494
+ .d-input__wrapper:focus-within {
1496
1495
  --input--bc: var(--input--focus-bc);
1497
1496
  outline: 0;
1498
1497
  box-shadow: var(--bs-focus-ring) !important;
1499
1498
  }
1500
1499
  .d-input[disabled],
1501
1500
  .d-textarea[disabled],
1501
+ .d-input__wrapper[disabled],
1502
1502
  .d-input[read-only],
1503
- .d-textarea[read-only] {
1503
+ .d-textarea[read-only],
1504
+ .d-input__wrapper[read-only] {
1504
1505
  --input--bc: var(--black-200) !important;
1505
1506
  --input--bgc: var(--black-075);
1506
1507
  --input--fc: var(--black-400);
1507
1508
  }
1508
1509
  .d-input[disabled]:focus,
1509
1510
  .d-textarea[disabled]:focus,
1511
+ .d-input__wrapper[disabled]:focus,
1510
1512
  .d-input[read-only]:focus,
1511
- .d-textarea[read-only]:focus {
1513
+ .d-textarea[read-only]:focus,
1514
+ .d-input__wrapper[read-only]:focus,
1515
+ .d-input[disabled]:focus-within,
1516
+ .d-textarea[disabled]:focus-within,
1517
+ .d-input__wrapper[disabled]:focus-within,
1518
+ .d-input[read-only]:focus-within,
1519
+ .d-textarea[read-only]:focus-within,
1520
+ .d-input__wrapper[read-only]:focus-within {
1512
1521
  box-shadow: none !important;
1513
1522
  }
1514
1523
  .d-input[disabled]::placeholder,
1515
1524
  .d-textarea[disabled]::placeholder,
1525
+ .d-input__wrapper[disabled]::placeholder,
1516
1526
  .d-input[read-only]::placeholder,
1517
- .d-textarea[read-only]::placeholder {
1527
+ .d-textarea[read-only]::placeholder,
1528
+ .d-input__wrapper[read-only]::placeholder {
1518
1529
  color: var(--black-400);
1519
1530
  }
1520
1531
  .d-input[disabled],
1521
- .d-textarea[disabled] {
1532
+ .d-textarea[disabled],
1533
+ .d-input__wrapper[disabled] {
1522
1534
  cursor: not-allowed;
1523
1535
  }
1524
1536
  .d-input__wrapper {
1525
- position: relative;
1537
+ padding: 0;
1538
+ }
1539
+ .d-input__wrapper .d-input-icon.d-input-icon--right {
1540
+ margin-right: var(--su8);
1541
+ }
1542
+ .d-input__wrapper .d-input-icon.d-input-icon--left {
1543
+ margin-left: var(--su8);
1544
+ }
1545
+ .d-input__wrapper .d-input,
1546
+ .d-input__wrapper .d-textarea {
1547
+ flex: 1;
1548
+ border: none;
1549
+ border-radius: var(--base--corner-radius);
1550
+ }
1551
+ .d-input__wrapper .d-input:focus,
1552
+ .d-input__wrapper .d-textarea:focus {
1553
+ border: none;
1554
+ outline: 0;
1555
+ box-shadow: none !important;
1556
+ }
1557
+ .d-input__wrapper .d-input.d-input-icon--right,
1558
+ .d-input__wrapper .d-textarea.d-input-icon--right {
1559
+ padding-right: var(--su6);
1560
+ }
1561
+ .d-input__wrapper .d-input.d-input-icon--left,
1562
+ .d-input__wrapper .d-textarea.d-input-icon--left {
1563
+ padding-left: var(--su6);
1526
1564
  }
1527
1565
  .d-input.d-input--xs {
1528
1566
  padding-top: 0.5rem;
@@ -1533,12 +1571,6 @@ legend .d-label {
1533
1571
  width: 1.4rem;
1534
1572
  height: 1.4rem;
1535
1573
  }
1536
- .d-input.d-input--xs.d-input-icon--right {
1537
- padding-right: calc(var(--su4) + 1.2rem + var(--su8));
1538
- }
1539
- .d-input.d-input--xs.d-input-icon--left {
1540
- padding-left: calc(var(--su4) + 1.2rem + var(--su8));
1541
- }
1542
1574
  .d-input.d-input--sm {
1543
1575
  padding-top: var(--su6);
1544
1576
  padding-bottom: var(--su6);
@@ -1548,12 +1580,6 @@ legend .d-label {
1548
1580
  width: 1.6rem;
1549
1581
  height: 1.6rem;
1550
1582
  }
1551
- .d-input.d-input--sm.d-input-icon--right {
1552
- padding-right: calc(var(--su4) + 1.4rem + var(--su8));
1553
- }
1554
- .d-input.d-input--sm.d-input-icon--left {
1555
- padding-left: calc(var(--su4) + 1.4rem + var(--su8));
1556
- }
1557
1583
  .d-input.d-input--lg {
1558
1584
  padding-top: 1.1rem;
1559
1585
  padding-bottom: 1.1rem;
@@ -1563,12 +1589,6 @@ legend .d-label {
1563
1589
  width: 2rem;
1564
1590
  height: 2rem;
1565
1591
  }
1566
- .d-input.d-input--lg.d-input-icon--right {
1567
- padding-right: calc(var(--su4) + 2rem + var(--su8));
1568
- }
1569
- .d-input.d-input--lg.d-input-icon--left {
1570
- padding-left: calc(var(--su4) + 2rem + var(--su8));
1571
- }
1572
1592
  .d-input.d-input--xl {
1573
1593
  padding-top: 1.3rem;
1574
1594
  padding-bottom: 1.3rem;
@@ -1578,12 +1598,6 @@ legend .d-label {
1578
1598
  width: 2.4rem;
1579
1599
  height: 2.4rem;
1580
1600
  }
1581
- .d-input.d-input--xl.d-input-icon--right {
1582
- padding-right: calc(var(--su4) + 2.4rem + var(--su8));
1583
- }
1584
- .d-input.d-input--xl.d-input-icon--left {
1585
- padding-left: calc(var(--su4) + 2.4rem + var(--su8));
1586
- }
1587
1601
  .d-textarea {
1588
1602
  min-height: 8rem;
1589
1603
  vertical-align: top;
@@ -1598,12 +1612,6 @@ legend .d-label {
1598
1612
  width: 1.4rem;
1599
1613
  height: 1.4rem;
1600
1614
  }
1601
- .d-textarea--xs.d-input-icon--right {
1602
- padding-right: calc(var(--su4) + 1.2rem + var(--su8));
1603
- }
1604
- .d-textarea--xs.d-input-icon--left {
1605
- padding-left: calc(var(--su4) + 1.2rem + var(--su8));
1606
- }
1607
1615
  .d-textarea--sm {
1608
1616
  padding-top: var(--su6);
1609
1617
  padding-bottom: var(--su6);
@@ -1614,12 +1622,6 @@ legend .d-label {
1614
1622
  width: 1.6rem;
1615
1623
  height: 1.6rem;
1616
1624
  }
1617
- .d-textarea--sm.d-input-icon--right {
1618
- padding-right: calc(var(--su4) + 1.4rem + var(--su8));
1619
- }
1620
- .d-textarea--sm.d-input-icon--left {
1621
- padding-left: calc(var(--su4) + 1.4rem + var(--su8));
1622
- }
1623
1625
  .d-textarea--lg {
1624
1626
  padding-top: 1.1rem;
1625
1627
  padding-bottom: 1.1rem;
@@ -1630,12 +1632,6 @@ legend .d-label {
1630
1632
  width: 2rem;
1631
1633
  height: 2rem;
1632
1634
  }
1633
- .d-textarea--lg.d-input-icon--right {
1634
- padding-right: calc(var(--su4) + 2rem + var(--su8));
1635
- }
1636
- .d-textarea--lg.d-input-icon--left {
1637
- padding-left: calc(var(--su4) + 2rem + var(--su8));
1638
- }
1639
1635
  .d-textarea--xl {
1640
1636
  padding-top: 1.3rem;
1641
1637
  padding-bottom: 1.3rem;
@@ -1646,12 +1642,6 @@ legend .d-label {
1646
1642
  width: 2.4rem;
1647
1643
  height: 2.4rem;
1648
1644
  }
1649
- .d-textarea--xl.d-input-icon--right {
1650
- padding-right: calc(var(--su4) + 2.4rem + var(--su8));
1651
- }
1652
- .d-textarea--xl.d-input-icon--left {
1653
- padding-left: calc(var(--su4) + 2.4rem + var(--su8));
1654
- }
1655
1645
  .d-input--warning,
1656
1646
  .d-textarea--warning {
1657
1647
  --input--bc: var(--warning-color) !important;
@@ -1681,7 +1671,6 @@ legend .d-label {
1681
1671
  }
1682
1672
  .d-input-icon {
1683
1673
  --input-icon-size: 1.6rem;
1684
- position: absolute;
1685
1674
  z-index: var(--zi-base1);
1686
1675
  display: inline-flex;
1687
1676
  align-items: center;
@@ -1693,71 +1682,30 @@ legend .d-label {
1693
1682
  width: var(--input-icon-size);
1694
1683
  height: var(--input-icon-size);
1695
1684
  }
1696
- .d-input-icon.d-input-icon--left {
1697
- left: var(--su8);
1698
- }
1699
- .d-input-icon.d-input-icon--left ~ .d-input,
1700
- .d-input-icon.d-input-icon--left ~ .d-textarea {
1701
- padding-left: calc(var(--su4) + 1.6rem + var(--su8));
1702
- }
1703
- .d-input-icon.d-input-icon--right {
1704
- right: var(--su8);
1705
- }
1706
- .d-input-icon.d-input-icon--right ~ .d-input {
1707
- padding-right: calc(var(--su4) + 1.6rem + var(--su8));
1708
- }
1709
1685
  .d-input-icon.d-input--xs {
1710
1686
  height: 2.8rem;
1711
1687
  }
1712
1688
  .d-input-icon--xs {
1713
1689
  --input-icon-size: 1.2rem;
1714
1690
  }
1715
- .d-input-icon--xs.d-input-icon--left ~ .d-input,
1716
- .d-input-icon--xs.d-input-icon--left ~ .d-textarea {
1717
- padding-left: calc(var(--su4) + 1.2rem + var(--su8));
1718
- }
1719
- .d-input-icon--xs.d-input-icon--right ~ .d-input {
1720
- padding-right: calc(var(--su4) + 1.2rem + var(--su8));
1721
- }
1722
1691
  .d-input-icon.d-input--sm {
1723
1692
  height: 3.2rem;
1724
1693
  }
1725
1694
  .d-input-icon--sm {
1726
1695
  --input-icon-size: 1.4rem;
1727
1696
  }
1728
- .d-input-icon--sm.d-input-icon--left ~ .d-input,
1729
- .d-input-icon--sm.d-input-icon--left ~ .d-textarea {
1730
- padding-left: calc(var(--su4) + 1.4rem + var(--su8));
1731
- }
1732
- .d-input-icon--sm.d-input-icon--right ~ .d-input {
1733
- padding-right: calc(var(--su4) + 1.4rem + var(--su8));
1734
- }
1735
1697
  .d-input-icon.d-input--lg {
1736
1698
  height: 4.8rem;
1737
1699
  }
1738
1700
  .d-input-icon--lg {
1739
1701
  --input-icon-size: 2rem;
1740
1702
  }
1741
- .d-input-icon--lg.d-input-icon--left ~ .d-input,
1742
- .d-input-icon--lg.d-input-icon--left ~ .d-textarea {
1743
- padding-left: calc(var(--su4) + 2rem + var(--su8));
1744
- }
1745
- .d-input-icon--lg.d-input-icon--right ~ .d-input {
1746
- padding-right: calc(var(--su4) + 2rem + var(--su8));
1747
- }
1748
1703
  .d-input-icon.d-input--xl {
1749
1704
  height: 5.6rem;
1750
1705
  }
1751
1706
  .d-input-icon--xl {
1752
1707
  --input-icon-size: 2.4rem;
1753
1708
  }
1754
- .d-input-icon--xl.d-input-icon--left ~ .d-input,
1755
- .d-input-icon--xl.d-input-icon--left ~ .d-textarea {
1756
- padding-left: calc(var(--su4) + 2.4rem + var(--su8));
1757
- }
1758
- .d-input-icon--xl.d-input-icon--right ~ .d-input {
1759
- padding-right: calc(var(--su4) + 2.4rem + var(--su8));
1760
- }
1761
1709
  .d-link {
1762
1710
  position: relative;
1763
1711
  display: inline-flex;
@@ -2795,19 +2743,14 @@ legend .d-label {
2795
2743
  transition-property: border, box-shadow, background-color;
2796
2744
  --select--bc: var(--black-500);
2797
2745
  }
2798
- .d-select__input.d-input-icon--right {
2799
- padding-right: calc(var(--su4) + 1.6rem + var(--su8));
2800
- }
2801
- .d-select__input.d-input-icon--left {
2802
- padding-left: calc(var(--su4) + 1.6rem + var(--su8));
2803
- }
2804
2746
  .d-select__input::placeholder {
2805
2747
  color: var(--black-300);
2806
2748
  }
2807
2749
  .d-select__input::-ms-clear {
2808
2750
  display: none;
2809
2751
  }
2810
- .d-select__input:focus {
2752
+ .d-select__input:focus,
2753
+ .d-select__input:focus-within {
2811
2754
  --input--bc: var(--input--focus-bc);
2812
2755
  outline: 0;
2813
2756
  box-shadow: var(--bs-focus-ring) !important;
@@ -2819,7 +2762,9 @@ legend .d-label {
2819
2762
  --input--fc: var(--black-400);
2820
2763
  }
2821
2764
  .d-select__input[disabled]:focus,
2822
- .d-select__input[read-only]:focus {
2765
+ .d-select__input[read-only]:focus,
2766
+ .d-select__input[disabled]:focus-within,
2767
+ .d-select__input[read-only]:focus-within {
2823
2768
  box-shadow: none !important;
2824
2769
  }
2825
2770
  .d-select__input[disabled]::placeholder,