@smilodon/core 1.4.5 → 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.
Files changed (11) hide show
  1. package/dist/index.cjs +38 -13
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +38 -13
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.min.js +1 -1
  6. package/dist/index.min.js.map +1 -1
  7. package/dist/index.umd.js +38 -13
  8. package/dist/index.umd.js.map +1 -1
  9. package/dist/index.umd.min.js +1 -1
  10. package/dist/index.umd.min.js.map +1 -1
  11. package/package.json +1 -1
package/dist/index.umd.js CHANGED
@@ -1506,6 +1506,31 @@
1506
1506
  position: relative;
1507
1507
  }
1508
1508
 
1509
+ /* Allow authors to style selected state from outside the shadow root
1510
+ by setting attributes/classes on the host element. This mirrors the
1511
+ internal .option-container.selected rules but reads the same CSS
1512
+ custom properties so themes can fully control selected appearance. */
1513
+ :host([aria-selected="true"]) .option-container,
1514
+ :host(.smilodon-option--selected) .option-container {
1515
+ background: var(--select-option-selected-bg, #e3f2fd);
1516
+ color: var(--select-option-selected-color, #1976d2);
1517
+ border: var(--select-option-selected-border, var(--select-option-border, none));
1518
+ border-bottom: var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none));
1519
+ border-radius: var(--select-option-selected-border-radius, var(--select-option-border-radius, 0));
1520
+ box-shadow: var(--select-option-selected-shadow, var(--select-option-shadow, none));
1521
+ transform: var(--select-option-selected-transform, var(--select-option-transform, none));
1522
+ }
1523
+
1524
+ :host([aria-selected="true"]) .option-container:hover,
1525
+ :host(.smilodon-option--selected) .option-container:hover {
1526
+ background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
1527
+ color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #1976d2));
1528
+ border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
1529
+ border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
1530
+ box-shadow: var(--select-option-selected-hover-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
1531
+ transform: var(--select-option-selected-hover-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
1532
+ }
1533
+
1509
1534
  .option-container {
1510
1535
  display: flex;
1511
1536
  align-items: center;
@@ -1522,11 +1547,11 @@
1522
1547
  }
1523
1548
 
1524
1549
  .option-container:hover {
1525
- background-color: var(--select-option-hover-bg, #f0f0f0);
1550
+ background: var(--select-option-hover-bg, #f0f0f0);
1526
1551
  }
1527
1552
 
1528
1553
  .option-container.selected {
1529
- background-color: var(--select-option-selected-bg, #e3f2fd);
1554
+ background: var(--select-option-selected-bg, #e3f2fd);
1530
1555
  color: var(--select-option-selected-color, #1976d2);
1531
1556
  border: var(--select-option-selected-border, var(--select-option-border, none));
1532
1557
  border-bottom: var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none));
@@ -1536,7 +1561,7 @@
1536
1561
  }
1537
1562
 
1538
1563
  .option-container.selected:hover {
1539
- background-color: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
1564
+ background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
1540
1565
  color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #1976d2));
1541
1566
  border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
1542
1567
  border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
@@ -2409,12 +2434,12 @@
2409
2434
  }
2410
2435
 
2411
2436
  .option:hover {
2412
- background-color: var(--select-option-hover-bg, #f3f4f6);
2437
+ background: var(--select-option-hover-bg, #f3f4f6);
2413
2438
  color: var(--select-option-hover-color, #1f2937);
2414
2439
  }
2415
2440
 
2416
2441
  .option.selected {
2417
- background-color: var(--select-option-selected-bg, #e0e7ff);
2442
+ background: var(--select-option-selected-bg, #e0e7ff);
2418
2443
  color: var(--select-option-selected-color, #4338ca);
2419
2444
  font-weight: var(--select-option-selected-weight, 500);
2420
2445
  border: var(--select-option-selected-border, var(--select-option-border, none));
@@ -2425,7 +2450,7 @@
2425
2450
  }
2426
2451
 
2427
2452
  .option.selected:hover {
2428
- background-color: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff));
2453
+ background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff));
2429
2454
  color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #4338ca));
2430
2455
  border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
2431
2456
  border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
@@ -2434,14 +2459,14 @@
2434
2459
  }
2435
2460
 
2436
2461
  .option.active:not(.selected) {
2437
- background-color: var(--select-option-active-bg, #f3f4f6);
2462
+ background: var(--select-option-active-bg, #f3f4f6);
2438
2463
  color: var(--select-option-active-color, #1f2937);
2439
2464
  outline: var(--select-option-active-outline, 2px solid rgba(99, 102, 241, 0.45));
2440
2465
  outline-offset: -2px;
2441
2466
  }
2442
2467
 
2443
2468
  .option.selected.active {
2444
- background-color: var(--select-option-selected-active-bg, var(--select-option-selected-bg, #e0e7ff));
2469
+ background: var(--select-option-selected-active-bg, var(--select-option-selected-bg, #e0e7ff));
2445
2470
  color: var(--select-option-selected-active-color, var(--select-option-selected-color, #4338ca));
2446
2471
  border: var(--select-option-selected-active-border, var(--select-option-selected-border, var(--select-option-border, none)));
2447
2472
  border-bottom: var(--select-option-selected-active-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
@@ -2452,11 +2477,11 @@
2452
2477
  }
2453
2478
 
2454
2479
  .option:active:not(.selected) {
2455
- background-color: var(--select-option-pressed-bg, #e5e7eb);
2480
+ background: var(--select-option-pressed-bg, #e5e7eb);
2456
2481
  }
2457
2482
 
2458
2483
  .option.selected:active {
2459
- background-color: var(--select-option-selected-pressed-bg, var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff)));
2484
+ background: var(--select-option-selected-pressed-bg, var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff)));
2460
2485
  }
2461
2486
 
2462
2487
  .load-more-container {
@@ -2596,12 +2621,12 @@
2596
2621
  }
2597
2622
 
2598
2623
  .option:hover {
2599
- background-color: var(--select-dark-option-hover-bg, #374151);
2624
+ background: var(--select-dark-option-hover-bg, #374151);
2600
2625
  color: var(--select-dark-option-hover-color, #f9fafb);
2601
2626
  }
2602
2627
 
2603
2628
  .option.selected {
2604
- background-color: var(--select-dark-option-selected-bg, #3730a3);
2629
+ background: var(--select-dark-option-selected-bg, #3730a3);
2605
2630
  color: var(--select-dark-option-selected-text, #e0e7ff);
2606
2631
  border: var(--select-dark-option-selected-border, var(--select-option-selected-border, var(--select-option-border, none)));
2607
2632
  border-bottom: var(--select-dark-option-selected-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
@@ -2610,7 +2635,7 @@
2610
2635
  }
2611
2636
 
2612
2637
  .option.selected:hover {
2613
- background-color: var(--select-dark-option-selected-hover-bg, var(--select-dark-option-selected-bg, #3730a3));
2638
+ background: var(--select-dark-option-selected-hover-bg, var(--select-dark-option-selected-bg, #3730a3));
2614
2639
  color: var(--select-dark-option-selected-hover-color, var(--select-dark-option-selected-text, #e0e7ff));
2615
2640
  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)))));
2616
2641
  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)))));