@smilodon/core 1.4.6 → 1.4.7
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.
- package/dist/index.cjs +28 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +28 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/index.umd.js +28 -3
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/index.umd.min.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1500,6 +1500,31 @@ class SelectOption extends HTMLElement {
|
|
|
1500
1500
|
position: relative;
|
|
1501
1501
|
}
|
|
1502
1502
|
|
|
1503
|
+
/* Allow authors to style selected state from outside the shadow root
|
|
1504
|
+
by setting attributes/classes on the host element. This mirrors the
|
|
1505
|
+
internal .option-container.selected rules but reads the same CSS
|
|
1506
|
+
custom properties so themes can fully control selected appearance. */
|
|
1507
|
+
:host([aria-selected="true"]) .option-container,
|
|
1508
|
+
:host(.smilodon-option--selected) .option-container {
|
|
1509
|
+
background: var(--select-option-selected-bg, #e3f2fd);
|
|
1510
|
+
color: var(--select-option-selected-color, #1976d2);
|
|
1511
|
+
border: var(--select-option-selected-border, var(--select-option-border, none));
|
|
1512
|
+
border-bottom: var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none));
|
|
1513
|
+
border-radius: var(--select-option-selected-border-radius, var(--select-option-border-radius, 0));
|
|
1514
|
+
box-shadow: var(--select-option-selected-shadow, var(--select-option-shadow, none));
|
|
1515
|
+
transform: var(--select-option-selected-transform, var(--select-option-transform, none));
|
|
1516
|
+
}
|
|
1517
|
+
|
|
1518
|
+
:host([aria-selected="true"]) .option-container:hover,
|
|
1519
|
+
:host(.smilodon-option--selected) .option-container:hover {
|
|
1520
|
+
background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
|
|
1521
|
+
color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #1976d2));
|
|
1522
|
+
border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
|
|
1523
|
+
border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
|
|
1524
|
+
box-shadow: var(--select-option-selected-hover-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
|
|
1525
|
+
transform: var(--select-option-selected-hover-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
|
|
1526
|
+
}
|
|
1527
|
+
|
|
1503
1528
|
.option-container {
|
|
1504
1529
|
display: flex;
|
|
1505
1530
|
align-items: center;
|
|
@@ -2590,12 +2615,12 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2590
2615
|
}
|
|
2591
2616
|
|
|
2592
2617
|
.option:hover {
|
|
2593
|
-
background
|
|
2618
|
+
background: var(--select-dark-option-hover-bg, #374151);
|
|
2594
2619
|
color: var(--select-dark-option-hover-color, #f9fafb);
|
|
2595
2620
|
}
|
|
2596
2621
|
|
|
2597
2622
|
.option.selected {
|
|
2598
|
-
background
|
|
2623
|
+
background: var(--select-dark-option-selected-bg, #3730a3);
|
|
2599
2624
|
color: var(--select-dark-option-selected-text, #e0e7ff);
|
|
2600
2625
|
border: var(--select-dark-option-selected-border, var(--select-option-selected-border, var(--select-option-border, none)));
|
|
2601
2626
|
border-bottom: var(--select-dark-option-selected-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
|
|
@@ -2604,7 +2629,7 @@ class EnhancedSelect extends HTMLElement {
|
|
|
2604
2629
|
}
|
|
2605
2630
|
|
|
2606
2631
|
.option.selected:hover {
|
|
2607
|
-
background
|
|
2632
|
+
background: var(--select-dark-option-selected-hover-bg, var(--select-dark-option-selected-bg, #3730a3));
|
|
2608
2633
|
color: var(--select-dark-option-selected-hover-color, var(--select-dark-option-selected-text, #e0e7ff));
|
|
2609
2634
|
border: var(--select-dark-option-selected-hover-border, var(--select-dark-option-selected-border, var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)))));
|
|
2610
2635
|
border-bottom: var(--select-dark-option-selected-hover-border-bottom, var(--select-dark-option-selected-border-bottom, var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)))));
|