@i-cell/ids-styles 0.0.60 → 0.0.62

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 (13) hide show
  1. package/dist/components.css +385 -4
  2. package/dist/components.min.css +1 -1
  3. package/dist/components.plugin.js +49 -4
  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/dist/paginator/paginator.css +29 -1
  11. package/dist/paginator/paginator.min.css +1 -1
  12. package/dist/paginator/paginator.plugin.js +29 -1
  13. package/package.json +1 -1
package/dist/components.css CHANGED
@@ -8524,14 +8524,159 @@ 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;
8530
8591
  }
8531
8592
  .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8532
8593
  color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
8533
8594
  background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
8534
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;
8619
+ }
8620
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8621
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
8622
+ background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
8623
+ }
8624
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light {
8625
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-default);
8626
+ background: var(--ids-comp-menu-item-text-color-bg-light-default);
8627
+ }
8628
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light.ids-menu-item-active {
8629
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-active);
8630
+ background: var(--ids-comp-menu-item-text-color-bg-light-active);
8631
+ }
8632
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:hover {
8633
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-hovered);
8634
+ background: var(--ids-comp-menu-item-text-color-bg-light-hovered);
8635
+ }
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 {
8637
+ color: var(--ids-comp-menu-item-text-color-fg-label-light-focused);
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;
8643
+ }
8644
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-light:active {
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
+ }
8535
8680
  .ids-menu-item.ids-menu-item-text.ids-menu-item-light {
8536
8681
  color: var(--ids-comp-menu-item-text-color-fg-label-light-default);
8537
8682
  background: var(--ids-comp-menu-item-text-color-bg-light-default);
@@ -8547,9 +8692,42 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
8547
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 {
8548
8693
  color: var(--ids-comp-menu-item-text-color-fg-label-light-focused);
8549
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;
8550
8699
  }
8551
8700
  .ids-menu-item.ids-menu-item-text.ids-menu-item-light:active {
8552
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,9 +8748,98 @@ 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;
8755
+ }
8756
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
8757
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
8758
+ outline-style: none;
8759
+ }
8760
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8761
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
8762
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
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;
8573
8811
  }
8574
8812
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
8575
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;
8576
8843
  }
8577
8844
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:is(:disabled, .ids-menu-item-disabled) {
8578
8845
  color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
@@ -8593,9 +8860,98 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
8593
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 {
8594
8861
  color: var(--ids-comp-menu-item-filled-color-fg-label-light-focused);
8595
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;
8596
8867
  }
8597
8868
  .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active {
8598
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
+ }
8876
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light {
8877
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-default);
8878
+ background: var(--ids-comp-menu-item-filled-color-bg-light-default);
8879
+ }
8880
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light.ids-menu-item-active {
8881
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-active);
8882
+ background: var(--ids-comp-menu-item-filled-color-bg-light-active);
8883
+ }
8884
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:hover {
8885
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-hovered);
8886
+ background: var(--ids-comp-menu-item-filled-color-bg-light-hovered);
8887
+ }
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 {
8889
+ color: var(--ids-comp-menu-item-filled-color-fg-label-light-focused);
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;
8895
+ }
8896
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-light:active {
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;
@@ -9586,7 +9939,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9586
9939
  justify-content: center;
9587
9940
  align-items: center;
9588
9941
  font-style: normal;
9589
- border-style: none;
9942
+ border-style: solid;
9590
9943
  }
9591
9944
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus, .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus-visible {
9592
9945
  outline-offset: 2px;
@@ -9630,6 +9983,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9630
9983
  .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button {
9631
9984
  height: var(--ids-comp-paginator-page-links-size-height-compact);
9632
9985
  min-width: var(--ids-comp-paginator-page-links-size-min-width-compact);
9986
+ border-width: var(--ids-comp-paginator-page-links-size-border-width-compact);
9633
9987
  padding: var(--ids-comp-paginator-page-links-size-padding-y-compact) var(--ids-comp-paginator-page-links-size-padding-x-compact);
9634
9988
  font-family: var(--ids-comp-paginator-page-links-label-typography-font-family-compact);
9635
9989
  font-size: var(--ids-comp-paginator-page-links-label-typography-font-size-compact);
@@ -9678,6 +10032,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9678
10032
  .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button {
9679
10033
  height: var(--ids-comp-paginator-page-links-size-height-comfortable);
9680
10034
  min-width: var(--ids-comp-paginator-page-links-size-min-width-comfortable);
10035
+ border-width: var(--ids-comp-paginator-page-links-size-border-width-comfortable);
9681
10036
  padding: var(--ids-comp-paginator-page-links-size-padding-y-comfortable) var(--ids-comp-paginator-page-links-size-padding-x-comfortable);
9682
10037
  font-family: var(--ids-comp-paginator-page-links-label-typography-font-family-comfortable);
9683
10038
  font-size: var(--ids-comp-paginator-page-links-label-typography-font-size-comfortable);
@@ -9726,6 +10081,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9726
10081
  .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button {
9727
10082
  height: var(--ids-comp-paginator-page-links-size-height-spacious);
9728
10083
  min-width: var(--ids-comp-paginator-page-links-size-min-width-spacious);
10084
+ border-width: var(--ids-comp-paginator-page-links-size-border-width-spacious);
9729
10085
  padding: var(--ids-comp-paginator-page-links-size-padding-y-spacious) var(--ids-comp-paginator-page-links-size-padding-x-spacious);
9730
10086
  font-family: var(--ids-comp-paginator-page-links-label-typography-font-family-spacious);
9731
10087
  font-size: var(--ids-comp-paginator-page-links-label-typography-font-size-spacious);
@@ -9774,6 +10130,7 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9774
10130
  .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button {
9775
10131
  height: var(--ids-comp-paginator-page-links-size-height-dense);
9776
10132
  min-width: var(--ids-comp-paginator-page-links-size-min-width-dense);
10133
+ border-width: var(--ids-comp-paginator-page-links-size-border-width-dense);
9777
10134
  padding: var(--ids-comp-paginator-page-links-size-padding-y-dense) var(--ids-comp-paginator-page-links-size-padding-x-dense);
9778
10135
  font-family: var(--ids-comp-paginator-page-links-label-typography-font-family-dense);
9779
10136
  font-size: var(--ids-comp-paginator-page-links-label-typography-font-size-dense);
@@ -9822,26 +10179,32 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9822
10179
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
9823
10180
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-default);
9824
10181
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-default);
10182
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-default);
9825
10183
  }
9826
10184
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled) {
9827
10185
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-active);
9828
10186
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-active);
10187
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-active);
9829
10188
  }
9830
10189
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
9831
10190
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-focused);
9832
10191
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-focused);
10192
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-focused);
9833
10193
  }
9834
10194
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover {
9835
10195
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-hovered);
9836
10196
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-hovered);
10197
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-hovered);
9837
10198
  }
9838
10199
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active {
9839
10200
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-pressed);
9840
10201
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-pressed);
10202
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-pressed);
9841
10203
  }
9842
10204
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled {
9843
10205
  background: var(--ids-comp-paginator-page-links-plain-color-bg-primary-disabled);
9844
10206
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-disabled);
10207
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-primary-disabled);
9845
10208
  }
9846
10209
  .ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
9847
10210
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default);
@@ -9873,26 +10236,32 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9873
10236
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
9874
10237
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-default);
9875
10238
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-default);
10239
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-default);
9876
10240
  }
9877
10241
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled) {
9878
10242
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-active);
9879
10243
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-active);
10244
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-active);
9880
10245
  }
9881
10246
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
9882
10247
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-focused);
9883
10248
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-focused);
10249
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-focused);
9884
10250
  }
9885
10251
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover {
9886
10252
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-hovered);
9887
10253
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-hovered);
10254
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-hovered);
9888
10255
  }
9889
10256
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active {
9890
10257
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-pressed);
9891
10258
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-pressed);
10259
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-pressed);
9892
10260
  }
9893
10261
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled {
9894
10262
  background: var(--ids-comp-paginator-page-links-plain-color-bg-secondary-disabled);
9895
10263
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-disabled);
10264
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-secondary-disabled);
9896
10265
  }
9897
10266
  .ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
9898
10267
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default);
@@ -9924,26 +10293,32 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9924
10293
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
9925
10294
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-default);
9926
10295
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-default);
10296
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-default);
9927
10297
  }
9928
10298
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled) {
9929
10299
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-active);
9930
10300
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-active);
10301
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-active);
9931
10302
  }
9932
10303
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
9933
10304
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-focused);
9934
10305
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-focused);
10306
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-focused);
9935
10307
  }
9936
10308
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover {
9937
10309
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-hovered);
9938
10310
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-hovered);
10311
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-hovered);
9939
10312
  }
9940
10313
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active {
9941
10314
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-pressed);
9942
10315
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-pressed);
10316
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-pressed);
9943
10317
  }
9944
10318
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled {
9945
10319
  background: var(--ids-comp-paginator-page-links-plain-color-bg-light-disabled);
9946
10320
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-light-disabled);
10321
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-light-disabled);
9947
10322
  }
9948
10323
  .ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
9949
10324
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default);
@@ -9975,26 +10350,32 @@ a.ids-menu-item:link, a.ids-menu-item:visited {
9975
10350
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain {
9976
10351
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-default);
9977
10352
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-default);
10353
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-default);
9978
10354
  }
9979
10355
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled) {
9980
10356
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-active);
9981
10357
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-active);
10358
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-active);
9982
10359
  }
9983
10360
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus, .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus-visible {
9984
10361
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-focused);
9985
10362
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-focused);
10363
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-focused);
9986
10364
  }
9987
10365
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover {
9988
10366
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-hovered);
9989
10367
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-hovered);
10368
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-hovered);
9990
10369
  }
9991
10370
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active {
9992
10371
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-pressed);
9993
10372
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-pressed);
10373
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-pressed);
9994
10374
  }
9995
10375
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled {
9996
10376
  background: var(--ids-comp-paginator-page-links-plain-color-bg-surface-disabled);
9997
10377
  color: var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-disabled);
10378
+ border-color: var(--ids-comp-paginator-page-links-plain-color-border-surface-disabled);
9998
10379
  }
9999
10380
  .ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow {
10000
10381
  color: var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default);