@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.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;
@@ -1518,11 +1543,11 @@ class SelectOption extends HTMLElement {
1518
1543
  }
1519
1544
 
1520
1545
  .option-container:hover {
1521
- background-color: var(--select-option-hover-bg, #f0f0f0);
1546
+ background: var(--select-option-hover-bg, #f0f0f0);
1522
1547
  }
1523
1548
 
1524
1549
  .option-container.selected {
1525
- background-color: var(--select-option-selected-bg, #e3f2fd);
1550
+ background: var(--select-option-selected-bg, #e3f2fd);
1526
1551
  color: var(--select-option-selected-color, #1976d2);
1527
1552
  border: var(--select-option-selected-border, var(--select-option-border, none));
1528
1553
  border-bottom: var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none));
@@ -1532,7 +1557,7 @@ class SelectOption extends HTMLElement {
1532
1557
  }
1533
1558
 
1534
1559
  .option-container.selected:hover {
1535
- background-color: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
1560
+ background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
1536
1561
  color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #1976d2));
1537
1562
  border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
1538
1563
  border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
@@ -2405,12 +2430,12 @@ class EnhancedSelect extends HTMLElement {
2405
2430
  }
2406
2431
 
2407
2432
  .option:hover {
2408
- background-color: var(--select-option-hover-bg, #f3f4f6);
2433
+ background: var(--select-option-hover-bg, #f3f4f6);
2409
2434
  color: var(--select-option-hover-color, #1f2937);
2410
2435
  }
2411
2436
 
2412
2437
  .option.selected {
2413
- background-color: var(--select-option-selected-bg, #e0e7ff);
2438
+ background: var(--select-option-selected-bg, #e0e7ff);
2414
2439
  color: var(--select-option-selected-color, #4338ca);
2415
2440
  font-weight: var(--select-option-selected-weight, 500);
2416
2441
  border: var(--select-option-selected-border, var(--select-option-border, none));
@@ -2421,7 +2446,7 @@ class EnhancedSelect extends HTMLElement {
2421
2446
  }
2422
2447
 
2423
2448
  .option.selected:hover {
2424
- background-color: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff));
2449
+ background: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff));
2425
2450
  color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #4338ca));
2426
2451
  border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
2427
2452
  border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
@@ -2430,14 +2455,14 @@ class EnhancedSelect extends HTMLElement {
2430
2455
  }
2431
2456
 
2432
2457
  .option.active:not(.selected) {
2433
- background-color: var(--select-option-active-bg, #f3f4f6);
2458
+ background: var(--select-option-active-bg, #f3f4f6);
2434
2459
  color: var(--select-option-active-color, #1f2937);
2435
2460
  outline: var(--select-option-active-outline, 2px solid rgba(99, 102, 241, 0.45));
2436
2461
  outline-offset: -2px;
2437
2462
  }
2438
2463
 
2439
2464
  .option.selected.active {
2440
- background-color: var(--select-option-selected-active-bg, var(--select-option-selected-bg, #e0e7ff));
2465
+ background: var(--select-option-selected-active-bg, var(--select-option-selected-bg, #e0e7ff));
2441
2466
  color: var(--select-option-selected-active-color, var(--select-option-selected-color, #4338ca));
2442
2467
  border: var(--select-option-selected-active-border, var(--select-option-selected-border, var(--select-option-border, none)));
2443
2468
  border-bottom: var(--select-option-selected-active-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
@@ -2448,11 +2473,11 @@ class EnhancedSelect extends HTMLElement {
2448
2473
  }
2449
2474
 
2450
2475
  .option:active:not(.selected) {
2451
- background-color: var(--select-option-pressed-bg, #e5e7eb);
2476
+ background: var(--select-option-pressed-bg, #e5e7eb);
2452
2477
  }
2453
2478
 
2454
2479
  .option.selected:active {
2455
- background-color: var(--select-option-selected-pressed-bg, var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff)));
2480
+ background: var(--select-option-selected-pressed-bg, var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff)));
2456
2481
  }
2457
2482
 
2458
2483
  .load-more-container {
@@ -2592,12 +2617,12 @@ class EnhancedSelect extends HTMLElement {
2592
2617
  }
2593
2618
 
2594
2619
  .option:hover {
2595
- background-color: var(--select-dark-option-hover-bg, #374151);
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-color: var(--select-dark-option-selected-bg, #3730a3);
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-color: var(--select-dark-option-selected-hover-bg, var(--select-dark-option-selected-bg, #3730a3));
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)))));