@i-cell/ids-styles 0.0.60 → 0.0.61

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 (10) hide show
  1. package/dist/components.css +356 -3
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +20 -3
  4. package/dist/menu-item/menu-item.css +356 -0
  5. package/dist/menu-item/menu-item.min.css +1 -1
  6. package/dist/menu-item/menu-item.plugin.js +20 -0
  7. package/dist/overlay-panel/overlay-panel.css +0 -3
  8. package/dist/overlay-panel/overlay-panel.min.css +1 -1
  9. package/dist/overlay-panel/overlay-panel.plugin.js +0 -3
  10. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -8524,9 +8524,98 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
8524
8524
  .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible {
8525
8525
  color: var(--ids-comp-menu-item-text-color-fg-label-surface-focused);
8526
8526
  background: var(--ids-comp-menu-item-text-color-bg-surface-focused);
8527
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
8528
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-compact);
8529
+ outline-offset: 2px;
8530
+ outline-style: solid;
8531
+ }
8532
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active {
8533
+ background: var(--ids-comp-menu-item-text-color-bg-surface-pressed);
8534
+ outline-style: none;
8535
+ }
8536
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8537
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
8538
+ background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
8539
+ }
8540
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface {
8541
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-default);
8542
+ background: var(--ids-comp-menu-item-text-color-bg-surface-default);
8543
+ }
8544
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active {
8545
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-active);
8546
+ background: var(--ids-comp-menu-item-text-color-bg-surface-active);
8547
+ }
8548
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover {
8549
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);
8550
+ background: var(--ids-comp-menu-item-text-color-bg-surface-hovered);
8551
+ }
8552
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible {
8553
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-focused);
8554
+ background: var(--ids-comp-menu-item-text-color-bg-surface-focused);
8555
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
8556
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-comfortable);
8557
+ outline-offset: 2px;
8558
+ outline-style: solid;
8559
+ }
8560
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active {
8561
+ background: var(--ids-comp-menu-item-text-color-bg-surface-pressed);
8562
+ outline-style: none;
8563
+ }
8564
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8565
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
8566
+ background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
8567
+ }
8568
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface {
8569
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-default);
8570
+ background: var(--ids-comp-menu-item-text-color-bg-surface-default);
8571
+ }
8572
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active {
8573
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-active);
8574
+ background: var(--ids-comp-menu-item-text-color-bg-surface-active);
8575
+ }
8576
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover {
8577
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);
8578
+ background: var(--ids-comp-menu-item-text-color-bg-surface-hovered);
8579
+ }
8580
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible {
8581
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-focused);
8582
+ background: var(--ids-comp-menu-item-text-color-bg-surface-focused);
8583
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
8584
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-spacious);
8585
+ outline-offset: 2px;
8586
+ outline-style: solid;
8527
8587
  }
8528
8588
  .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active {
8529
8589
  background: var(--ids-comp-menu-item-text-color-bg-surface-pressed);
8590
+ outline-style: none;
8591
+ }
8592
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8593
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
8594
+ background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
8595
+ }
8596
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface {
8597
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-default);
8598
+ background: var(--ids-comp-menu-item-text-color-bg-surface-default);
8599
+ }
8600
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active {
8601
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-active);
8602
+ background: var(--ids-comp-menu-item-text-color-bg-surface-active);
8603
+ }
8604
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover {
8605
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);
8606
+ background: var(--ids-comp-menu-item-text-color-bg-surface-hovered);
8607
+ }
8608
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible {
8609
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-focused);
8610
+ background: var(--ids-comp-menu-item-text-color-bg-surface-focused);
8611
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
8612
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-dense);
8613
+ outline-offset: 2px;
8614
+ outline-style: solid;
8615
+ }
8616
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active {
8617
+ background: var(--ids-comp-menu-item-text-color-bg-surface-pressed);
8618
+ outline-style: none;
8530
8619
  }
8531
8620
  .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8532
8621
  color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
@@ -8547,9 +8636,98 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
8547
8636
  .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible {
8548
8637
  color: var(--ids-comp-menu-item-text-color-fg-label-light-focused);
8549
8638
  background: var(--ids-comp-menu-item-text-color-bg-light-focused);
8639
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
8640
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-compact);
8641
+ outline-offset: 2px;
8642
+ outline-style: solid;
8550
8643
  }
8551
8644
  .ids-menu-item.ids-menu-item-text.ids-menu-item-light:active {
8552
8645
  background: var(--ids-comp-menu-item-text-color-bg-light-pressed);
8646
+ outline-style: none;
8647
+ }
8648
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
8649
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-disabled);
8650
+ background: var(--ids-comp-menu-item-text-color-bg-light-disabled);
8651
+ }
8652
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light {
8653
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-default);
8654
+ background: var(--ids-comp-menu-item-text-color-bg-light-default);
8655
+ }
8656
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active {
8657
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-active);
8658
+ background: var(--ids-comp-menu-item-text-color-bg-light-active);
8659
+ }
8660
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover {
8661
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-hovered);
8662
+ background: var(--ids-comp-menu-item-text-color-bg-light-hovered);
8663
+ }
8664
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible {
8665
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-focused);
8666
+ background: var(--ids-comp-menu-item-text-color-bg-light-focused);
8667
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
8668
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-comfortable);
8669
+ outline-offset: 2px;
8670
+ outline-style: solid;
8671
+ }
8672
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:active {
8673
+ background: var(--ids-comp-menu-item-text-color-bg-light-pressed);
8674
+ outline-style: none;
8675
+ }
8676
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
8677
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-disabled);
8678
+ background: var(--ids-comp-menu-item-text-color-bg-light-disabled);
8679
+ }
8680
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light {
8681
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-default);
8682
+ background: var(--ids-comp-menu-item-text-color-bg-light-default);
8683
+ }
8684
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active {
8685
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-active);
8686
+ background: var(--ids-comp-menu-item-text-color-bg-light-active);
8687
+ }
8688
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover {
8689
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-hovered);
8690
+ background: var(--ids-comp-menu-item-text-color-bg-light-hovered);
8691
+ }
8692
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible {
8693
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-focused);
8694
+ background: var(--ids-comp-menu-item-text-color-bg-light-focused);
8695
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
8696
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-spacious);
8697
+ outline-offset: 2px;
8698
+ outline-style: solid;
8699
+ }
8700
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:active {
8701
+ background: var(--ids-comp-menu-item-text-color-bg-light-pressed);
8702
+ outline-style: none;
8703
+ }
8704
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
8705
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-disabled);
8706
+ background: var(--ids-comp-menu-item-text-color-bg-light-disabled);
8707
+ }
8708
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light {
8709
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-default);
8710
+ background: var(--ids-comp-menu-item-text-color-bg-light-default);
8711
+ }
8712
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active {
8713
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-active);
8714
+ background: var(--ids-comp-menu-item-text-color-bg-light-active);
8715
+ }
8716
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover {
8717
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-hovered);
8718
+ background: var(--ids-comp-menu-item-text-color-bg-light-hovered);
8719
+ }
8720
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-light:focus-visible {
8721
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-focused);
8722
+ background: var(--ids-comp-menu-item-text-color-bg-light-focused);
8723
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
8724
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-dense);
8725
+ outline-offset: 2px;
8726
+ outline-style: solid;
8727
+ }
8728
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:active {
8729
+ background: var(--ids-comp-menu-item-text-color-bg-light-pressed);
8730
+ outline-style: none;
8553
8731
  }
8554
8732
  .ids-menu-item.ids-menu-item-text.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
8555
8733
  color: var(--ids-comp-menu-item-text-color-fg-label-light-disabled);
@@ -8570,14 +8748,131 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
8570
8748
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible {
8571
8749
  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);
8572
8750
  background: var(--ids-comp-menu-item-filled-color-bg-surface-focused);
8751
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
8752
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-compact);
8753
+ outline-offset: 2px;
8754
+ outline-style: solid;
8573
8755
  }
8574
8756
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
8575
8757
  background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
8758
+ outline-style: none;
8576
8759
  }
8577
8760
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8578
8761
  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
8579
8762
  background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
8580
8763
  }
8764
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface {
8765
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-default);
8766
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-default);
8767
+ }
8768
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active {
8769
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-active);
8770
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-active);
8771
+ }
8772
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover {
8773
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);
8774
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-hovered);
8775
+ }
8776
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible {
8777
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);
8778
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-focused);
8779
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
8780
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-comfortable);
8781
+ outline-offset: 2px;
8782
+ outline-style: solid;
8783
+ }
8784
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
8785
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
8786
+ outline-style: none;
8787
+ }
8788
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8789
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
8790
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
8791
+ }
8792
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface {
8793
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-default);
8794
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-default);
8795
+ }
8796
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active {
8797
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-active);
8798
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-active);
8799
+ }
8800
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover {
8801
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);
8802
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-hovered);
8803
+ }
8804
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible {
8805
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);
8806
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-focused);
8807
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
8808
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-spacious);
8809
+ outline-offset: 2px;
8810
+ outline-style: solid;
8811
+ }
8812
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
8813
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
8814
+ outline-style: none;
8815
+ }
8816
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8817
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
8818
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
8819
+ }
8820
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface {
8821
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-default);
8822
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-default);
8823
+ }
8824
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active {
8825
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-active);
8826
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-active);
8827
+ }
8828
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover {
8829
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);
8830
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-hovered);
8831
+ }
8832
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible {
8833
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);
8834
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-focused);
8835
+ outline-color: var(--ids-comp-button-focused-outline-color-dark-focused);
8836
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-dense);
8837
+ outline-offset: 2px;
8838
+ outline-style: solid;
8839
+ }
8840
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
8841
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
8842
+ outline-style: none;
8843
+ }
8844
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8845
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
8846
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
8847
+ }
8848
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light {
8849
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-default);
8850
+ background: var(--ids-comp-menu-item-filled-color-bg-light-default);
8851
+ }
8852
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active {
8853
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-active);
8854
+ background: var(--ids-comp-menu-item-filled-color-bg-light-active);
8855
+ }
8856
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover {
8857
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);
8858
+ background: var(--ids-comp-menu-item-filled-color-bg-light-hovered);
8859
+ }
8860
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible {
8861
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-focused);
8862
+ background: var(--ids-comp-menu-item-filled-color-bg-light-focused);
8863
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
8864
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-compact);
8865
+ outline-offset: 2px;
8866
+ outline-style: solid;
8867
+ }
8868
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active {
8869
+ background: var(--ids-comp-menu-item-filled-color-bg-light-pressed);
8870
+ outline-style: none;
8871
+ }
8872
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
8873
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);
8874
+ background: var(--ids-comp-menu-item-filled-color-bg-light-disabled);
8875
+ }
8581
8876
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-light {
8582
8877
  color: var(--ids-comp-menu-item-filled-color-fg-label-light-default);
8583
8878
  background: var(--ids-comp-menu-item-filled-color-bg-light-default);
@@ -8593,9 +8888,70 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
8593
8888
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible {
8594
8889
  color: var(--ids-comp-menu-item-filled-color-fg-label-light-focused);
8595
8890
  background: var(--ids-comp-menu-item-filled-color-bg-light-focused);
8891
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
8892
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-comfortable);
8893
+ outline-offset: 2px;
8894
+ outline-style: solid;
8596
8895
  }
8597
8896
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active {
8598
8897
  background: var(--ids-comp-menu-item-filled-color-bg-light-pressed);
8898
+ outline-style: none;
8899
+ }
8900
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
8901
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);
8902
+ background: var(--ids-comp-menu-item-filled-color-bg-light-disabled);
8903
+ }
8904
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light {
8905
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-default);
8906
+ background: var(--ids-comp-menu-item-filled-color-bg-light-default);
8907
+ }
8908
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active {
8909
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-active);
8910
+ background: var(--ids-comp-menu-item-filled-color-bg-light-active);
8911
+ }
8912
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover {
8913
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);
8914
+ background: var(--ids-comp-menu-item-filled-color-bg-light-hovered);
8915
+ }
8916
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible {
8917
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-focused);
8918
+ background: var(--ids-comp-menu-item-filled-color-bg-light-focused);
8919
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
8920
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-spacious);
8921
+ outline-offset: 2px;
8922
+ outline-style: solid;
8923
+ }
8924
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active {
8925
+ background: var(--ids-comp-menu-item-filled-color-bg-light-pressed);
8926
+ outline-style: none;
8927
+ }
8928
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
8929
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);
8930
+ background: var(--ids-comp-menu-item-filled-color-bg-light-disabled);
8931
+ }
8932
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light {
8933
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-default);
8934
+ background: var(--ids-comp-menu-item-filled-color-bg-light-default);
8935
+ }
8936
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active {
8937
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-active);
8938
+ background: var(--ids-comp-menu-item-filled-color-bg-light-active);
8939
+ }
8940
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover {
8941
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);
8942
+ background: var(--ids-comp-menu-item-filled-color-bg-light-hovered);
8943
+ }
8944
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:focus-visible {
8945
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-focused);
8946
+ background: var(--ids-comp-menu-item-filled-color-bg-light-focused);
8947
+ outline-color: var(--ids-comp-button-focused-outline-color-light-focused);
8948
+ outline-width: var(--ids-comp-button-focused-outline-size-outline-dense);
8949
+ outline-offset: 2px;
8950
+ outline-style: solid;
8951
+ }
8952
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active {
8953
+ background: var(--ids-comp-menu-item-filled-color-bg-light-pressed);
8954
+ outline-style: none;
8599
8955
  }
8600
8956
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:is(:disabled, .ids-menu-item-disabled) {
8601
8957
  color: var(--ids-comp-menu-item-filled-color-fg-label-light-disabled);
@@ -9543,9 +9899,6 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9543
9899
  .ids-overlay-panel.ids-overlay-panel-has-menu button:hover {
9544
9900
  border-color: transparent;
9545
9901
  }
9546
- .ids-overlay-panel.ids-overlay-panel-has-menu button:focus, .ids-overlay-panel.ids-overlay-panel-has-menu button:focus-visible {
9547
- outline-style: none !important;
9548
- }
9549
9902
 
9550
9903
  .ids-paginator {
9551
9904
  box-sizing: border-box;