@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.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;
@@ -1516,11 +1541,11 @@ class SelectOption extends HTMLElement {
1516
1541
  }
1517
1542
 
1518
1543
  .option-container:hover {
1519
- background-color: var(--select-option-hover-bg, #f0f0f0);
1544
+ background: var(--select-option-hover-bg, #f0f0f0);
1520
1545
  }
1521
1546
 
1522
1547
  .option-container.selected {
1523
- background-color: var(--select-option-selected-bg, #e3f2fd);
1548
+ background: var(--select-option-selected-bg, #e3f2fd);
1524
1549
  color: var(--select-option-selected-color, #1976d2);
1525
1550
  border: var(--select-option-selected-border, var(--select-option-border, none));
1526
1551
  border-bottom: var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none));
@@ -1530,7 +1555,7 @@ class SelectOption extends HTMLElement {
1530
1555
  }
1531
1556
 
1532
1557
  .option-container.selected:hover {
1533
- background-color: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
1558
+ background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
1534
1559
  color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #1976d2));
1535
1560
  border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
1536
1561
  border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
@@ -2403,12 +2428,12 @@ class EnhancedSelect extends HTMLElement {
2403
2428
  }
2404
2429
 
2405
2430
  .option:hover {
2406
- background-color: var(--select-option-hover-bg, #f3f4f6);
2431
+ background: var(--select-option-hover-bg, #f3f4f6);
2407
2432
  color: var(--select-option-hover-color, #1f2937);
2408
2433
  }
2409
2434
 
2410
2435
  .option.selected {
2411
- background-color: var(--select-option-selected-bg, #e0e7ff);
2436
+ background: var(--select-option-selected-bg, #e0e7ff);
2412
2437
  color: var(--select-option-selected-color, #4338ca);
2413
2438
  font-weight: var(--select-option-selected-weight, 500);
2414
2439
  border: var(--select-option-selected-border, var(--select-option-border, none));
@@ -2419,7 +2444,7 @@ class EnhancedSelect extends HTMLElement {
2419
2444
  }
2420
2445
 
2421
2446
  .option.selected:hover {
2422
- background-color: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff));
2447
+ background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff));
2423
2448
  color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #4338ca));
2424
2449
  border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
2425
2450
  border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
@@ -2428,14 +2453,14 @@ class EnhancedSelect extends HTMLElement {
2428
2453
  }
2429
2454
 
2430
2455
  .option.active:not(.selected) {
2431
- background-color: var(--select-option-active-bg, #f3f4f6);
2456
+ background: var(--select-option-active-bg, #f3f4f6);
2432
2457
  color: var(--select-option-active-color, #1f2937);
2433
2458
  outline: var(--select-option-active-outline, 2px solid rgba(99, 102, 241, 0.45));
2434
2459
  outline-offset: -2px;
2435
2460
  }
2436
2461
 
2437
2462
  .option.selected.active {
2438
- background-color: var(--select-option-selected-active-bg, var(--select-option-selected-bg, #e0e7ff));
2463
+ background: var(--select-option-selected-active-bg, var(--select-option-selected-bg, #e0e7ff));
2439
2464
  color: var(--select-option-selected-active-color, var(--select-option-selected-color, #4338ca));
2440
2465
  border: var(--select-option-selected-active-border, var(--select-option-selected-border, var(--select-option-border, none)));
2441
2466
  border-bottom: var(--select-option-selected-active-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
@@ -2446,11 +2471,11 @@ class EnhancedSelect extends HTMLElement {
2446
2471
  }
2447
2472
 
2448
2473
  .option:active:not(.selected) {
2449
- background-color: var(--select-option-pressed-bg, #e5e7eb);
2474
+ background: var(--select-option-pressed-bg, #e5e7eb);
2450
2475
  }
2451
2476
 
2452
2477
  .option.selected:active {
2453
- background-color: var(--select-option-selected-pressed-bg, var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff)));
2478
+ background: var(--select-option-selected-pressed-bg, var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff)));
2454
2479
  }
2455
2480
 
2456
2481
  .load-more-container {
@@ -2590,12 +2615,12 @@ class EnhancedSelect extends HTMLElement {
2590
2615
  }
2591
2616
 
2592
2617
  .option:hover {
2593
- background-color: var(--select-dark-option-hover-bg, #374151);
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-color: var(--select-dark-option-selected-bg, #3730a3);
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-color: var(--select-dark-option-selected-hover-bg, var(--select-dark-option-selected-bg, #3730a3));
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)))));