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