@momentum-design/components 0.129.8 → 0.129.9

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 (9) hide show
  1. package/dist/browser/index.js +48 -96
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/tab/tab.component.d.ts +17 -65
  4. package/dist/components/tab/tab.component.js +17 -65
  5. package/dist/components/tab/tab.styles.js +48 -96
  6. package/dist/custom-elements.json +26 -174
  7. package/dist/react/tab/index.d.ts +17 -65
  8. package/dist/react/tab/index.js +17 -65
  9. package/package.json +1 -1
package/dist/browser/index.js CHANGED
@@ -5765,70 +5765,20 @@
5765
5765
  --mdc-tab-content-gap: 0.5rem;
5766
5766
  --mdc-tab-height: 2rem;
5767
5767
 
5768
- --mdc-tab-glass-active-background-color-disabled: var(--mds-color-theme-button-primary-disabled);
5769
- --mdc-tab-glass-active-background-color-hover: var(--mds-color-theme-button-primary-hover);
5770
- --mdc-tab-glass-active-background-color-normal: var(--mds-color-theme-button-primary-normal);
5771
- --mdc-tab-glass-active-background-color-pressed: var(--mds-color-theme-button-primary-pressed);
5772
-
5773
- --mdc-tab-glass-active-color: var(--mds-color-theme-inverted-text-primary-normal);
5774
- --mdc-tab-glass-active-color-disabled: var(--mds-color-theme-inverted-text-primary-disabled);
5775
-
5776
- --mdc-tab-glass-border-radius: 0.5rem;
5777
-
5778
- --mdc-tab-glass-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
5779
- --mdc-tab-glass-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
5780
- --mdc-tab-glass-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
5781
- --mdc-tab-glass-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
5782
-
5783
- --mdc-tab-glass-inactive-color: var(--mds-color-theme-text-secondary-normal);
5784
- --mdc-tab-glass-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
5785
-
5786
- --mdc-tab-line-active-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
5787
- --mdc-tab-line-active-background-color-hover: var(--mds-color-theme-button-secondary-hover);
5788
- --mdc-tab-line-active-background-color-normal: var(--mds-color-theme-button-secondary-normal);
5789
- --mdc-tab-line-active-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
5790
-
5791
- --mdc-tab-line-active-color: var(--mds-color-theme-text-primary-normal);
5792
- --mdc-tab-line-active-color-disabled: var(--mds-color-theme-text-primary-disabled);
5793
-
5794
- --mdc-tab-line-active-indicator-color: var(--mds-color-theme-outline-input-active);
5795
- --mdc-tab-line-active-indicator-color-disabled: var(--mds-color-theme-outline-primary-disabled);
5796
5768
  --mdc-tab-line-active-indicator-height: 0.125rem;
5797
5769
  --mdc-tab-line-active-indicator-width: 100%;
5798
5770
 
5771
+ --mdc-tab-padding-left: 0.75rem;
5772
+ --mdc-tab-padding-right: 0.75rem;
5773
+
5799
5774
  --mdc-tab-line-border-bottom-left-radius: 0;
5800
5775
  --mdc-tab-line-border-bottom-right-radius: 0;
5801
5776
  --mdc-tab-line-border-top-left-radius: 0.25rem;
5802
5777
  --mdc-tab-line-border-top-right-radius: 0.25rem;
5803
5778
 
5804
- --mdc-tab-line-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
5805
- --mdc-tab-line-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
5806
- --mdc-tab-line-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
5807
- --mdc-tab-line-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
5808
-
5809
- --mdc-tab-line-inactive-color: var(--mds-color-theme-text-secondary-normal);
5810
- --mdc-tab-line-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
5811
-
5812
- --mdc-tab-padding-left: 0.75rem;
5813
- --mdc-tab-padding-right: 0.75rem;
5814
-
5815
- --mdc-tab-pill-active-background-color-disabled: var(--mds-color-theme-button-secondary-active-normal);
5816
- --mdc-tab-pill-active-background-color-hover: var(--mds-color-theme-button-secondary-active-hover);
5817
- --mdc-tab-pill-active-background-color-normal: var(--mds-color-theme-button-secondary-active-normal);
5818
- --mdc-tab-pill-active-background-color-pressed: var(--mds-color-theme-button-secondary-active-pressed);
5819
-
5820
- --mdc-tab-pill-active-color: var(--mds-color-theme-text-primary-normal);
5821
- --mdc-tab-pill-active-color-disabled: var(--mds-color-theme-text-primary-disabled);
5822
-
5823
- --mdc-tab-pill-border-radius: 0.5rem;
5824
-
5825
- --mdc-tab-pill-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
5826
- --mdc-tab-pill-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
5827
- --mdc-tab-pill-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
5828
- --mdc-tab-pill-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
5829
-
5830
- --mdc-tab-pill-inactive-color: var(--mds-color-theme-text-secondary-normal);
5831
- --mdc-tab-pill-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
5779
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
5780
+ --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
5781
+ --mdc-tab-border-radius: 0.5rem;
5832
5782
 
5833
5783
  flex-direction: column;
5834
5784
  flex-shrink: 0;
@@ -5837,6 +5787,9 @@
5837
5787
  padding-right: var(--mdc-tab-padding-right);
5838
5788
  position: relative;
5839
5789
  border: none;
5790
+ background-color: var(--mdc-tab-background-color);
5791
+ color: var(--mdc-tab-color);
5792
+ border-radius: var(--mdc-tab-border-radius);
5840
5793
  }
5841
5794
 
5842
5795
  :host::part(container) {
@@ -5871,6 +5824,7 @@
5871
5824
  :host::part(indicator) {
5872
5825
  width: var(--mdc-tab-line-active-indicator-width);
5873
5826
  height: var(--mdc-tab-line-active-indicator-height);
5827
+ background-color: var(--mdc-tab-background-color);
5874
5828
  bottom: 0;
5875
5829
  position: absolute;
5876
5830
  visibility: hidden;
@@ -5882,133 +5836,131 @@
5882
5836
  }
5883
5837
 
5884
5838
  :host([variant='glass']) {
5885
- background-color: var(--mdc-tab-glass-inactive-background-color-normal);
5886
- border-radius: var(--mdc-tab-glass-border-radius);
5887
- color: var(--mdc-tab-glass-inactive-color);
5839
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
5840
+ --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
5888
5841
  }
5889
5842
 
5890
5843
  :host([variant='glass']:hover) {
5891
- background-color: var(--mdc-tab-glass-inactive-background-color-hover);
5844
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
5892
5845
  }
5893
5846
 
5894
5847
  :host([variant='glass']:active) {
5895
- background-color: var(--mdc-tab-glass-inactive-background-color-pressed);
5848
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
5896
5849
  }
5897
5850
 
5898
5851
  :host([variant='glass'][disabled]),
5899
5852
  :host([variant='glass'][soft-disabled]) {
5900
- background-color: var(--mdc-tab-glass-inactive-background-color-disabled);
5901
- color: var(--mdc-tab-glass-inactive-color-disabled);
5853
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
5854
+ --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
5902
5855
  }
5903
5856
 
5904
5857
  :host([variant='glass'][active]) {
5905
- background-color: var(--mdc-tab-glass-active-background-color-normal);
5906
- color: var(--mdc-tab-glass-active-color);
5858
+ --mdc-tab-background-color: var(--mds-color-theme-button-primary-normal);
5859
+ --mdc-tab-color: var(--mds-color-theme-inverted-text-primary-normal);
5907
5860
  }
5908
5861
 
5909
5862
  :host([variant='glass'][active]:hover) {
5910
- background-color: var(--mdc-tab-glass-active-background-color-hover);
5863
+ --mdc-tab-background-color: var(--mds-color-theme-button-primary-hover);
5911
5864
  }
5912
5865
 
5913
5866
  :host([variant='glass'][active]:active) {
5914
- background-color: var(--mdc-tab-glass-active-background-color-pressed);
5867
+ --mdc-tab-background-color: var(--mds-color-theme-button-primary-pressed);
5915
5868
  }
5916
5869
 
5917
5870
  :host([variant='glass'][active][disabled]),
5918
5871
  :host([variant='glass'][active][soft-disabled]) {
5919
- background-color: var(--mdc-tab-glass-active-background-color-disabled);
5920
- color: var(--mdc-tab-glass-active-color-disabled);
5872
+ --mdc-tab-background-color: var(--mds-color-theme-button-primary-disabled);
5873
+ --mdc-tab-color: var(--mds-color-theme-inverted-text-primary-disabled);
5921
5874
  }
5922
5875
 
5923
5876
  :host([variant='line']) {
5924
- background-color: var(--mdc-tab-line-inactive-background-color-normal);
5877
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
5925
5878
  border-top-left-radius: var(--mdc-tab-line-border-top-left-radius);
5926
5879
  border-top-right-radius: var(--mdc-tab-line-border-top-right-radius);
5927
5880
  border-bottom-left-radius: var(--mdc-tab-line-border-bottom-left-radius);
5928
5881
  border-bottom-right-radius: var(--mdc-tab-line-border-bottom-right-radius);
5929
- color: var(--mdc-tab-line-inactive-color);
5882
+ --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
5930
5883
  }
5931
5884
 
5932
5885
  :host([variant='line']:hover) {
5933
- background-color: var(--mdc-tab-line-inactive-background-color-hover);
5886
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
5934
5887
  }
5935
5888
 
5936
5889
  :host([variant='line']:active) {
5937
- background-color: var(--mdc-tab-line-inactive-background-color-pressed);
5890
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
5938
5891
  }
5939
5892
 
5940
5893
  :host([variant='line'][disabled]),
5941
5894
  :host([variant='line'][soft-disabled]) {
5942
- background-color: var(--mdc-tab-line-inactive-background-color-disabled);
5943
- color: var(--mdc-tab-line-inactive-color-disabled);
5895
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
5896
+ --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
5944
5897
  }
5945
5898
 
5946
5899
  :host([variant='line'][active]) {
5947
- background-color: var(--mdc-tab-line-active-background-color-normal);
5948
- color: var(--mdc-tab-line-active-color);
5900
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
5901
+ --mdc-tab-color: var(--mds-color-theme-text-primary-normal);
5949
5902
  }
5950
5903
 
5951
5904
  :host([variant='line'][active])::part(indicator) {
5952
- background-color: var(--mdc-tab-line-active-indicator-color);
5905
+ --mdc-tab-background-color: var(--mds-color-theme-outline-input-active);
5953
5906
  visibility: visible;
5954
5907
  }
5955
5908
 
5956
5909
  :host([variant='line'][active]:hover) {
5957
- background-color: var(--mdc-tab-line-active-background-color-hover);
5910
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
5958
5911
  }
5959
5912
 
5960
5913
  :host([variant='line'][active]:active) {
5961
- background-color: var(--mdc-tab-line-active-background-color-pressed);
5914
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
5962
5915
  }
5963
5916
 
5964
5917
  :host([variant='line'][active][disabled]),
5965
5918
  :host([variant='line'][active][soft-disabled]) {
5966
- background-color: var(--mdc-tab-line-active-background-color-disabled);
5967
- color: var(--mdc-tab-line-active-color-disabled);
5919
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
5920
+ --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
5968
5921
  }
5969
5922
 
5970
5923
  :host([variant='line'][active][disabled])::part(indicator),
5971
5924
  :host([variant='line'][active][soft-disabled])::part(indicator) {
5972
- background-color: var(--mdc-tab-line-active-indicator-color-disabled);
5925
+ --mdc-tab-background-color: var(--mds-color-theme-outline-primary-disabled);
5973
5926
  }
5974
5927
 
5975
5928
  :host([variant='pill']) {
5976
- background-color: var(--mdc-tab-pill-inactive-background-color-normal);
5977
- border-radius: var(--mdc-tab-pill-border-radius);
5978
- color: var(--mdc-tab-pill-inactive-color);
5929
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
5930
+ --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
5979
5931
  }
5980
5932
 
5981
5933
  :host([variant='pill']:hover) {
5982
- background-color: var(--mdc-tab-pill-inactive-background-color-hover);
5934
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
5983
5935
  }
5984
5936
 
5985
5937
  :host([variant='pill']:active) {
5986
- background-color: var(--mdc-tab-pill-inactive-background-color-pressed);
5938
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
5987
5939
  }
5988
5940
 
5989
5941
  :host([variant='pill'][disabled]),
5990
5942
  :host([variant='pill'][soft-disabled]) {
5991
- background-color: var(--mdc-tab-pill-inactive-background-color-disabled);
5992
- color: var(--mdc-tab-pill-inactive-color-disabled);
5943
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
5944
+ --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
5993
5945
  }
5994
5946
 
5995
5947
  :host([variant='pill'][active]) {
5996
- background-color: var(--mdc-tab-pill-active-background-color-normal);
5997
- color: var(--mdc-tab-pill-active-color);
5948
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-normal);
5949
+ --mdc-tab-color: var(--mds-color-theme-text-primary-normal);
5998
5950
  }
5999
5951
 
6000
5952
  :host([variant='pill'][active]:hover) {
6001
- background-color: var(--mdc-tab-pill-active-background-color-hover);
5953
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-hover);
6002
5954
  }
6003
5955
 
6004
5956
  :host([variant='pill'][active]:active) {
6005
- background-color: var(--mdc-tab-pill-active-background-color-pressed);
5957
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-pressed);
6006
5958
  }
6007
5959
 
6008
5960
  :host([variant='pill'][active][disabled]),
6009
5961
  :host([variant='pill'][active][soft-disabled]) {
6010
- background-color: var(--mdc-tab-pill-active-background-color-disabled);
6011
- color: var(--mdc-tab-pill-active-color-disabled);
5962
+ --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-normal);
5963
+ --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
6012
5964
  }
6013
5965
  `,...At()],$g=_A;var io=class extends Xt(se){constructor(){super(...arguments);this.active=Ad.ACTIVE;this.variant=Ad.VARIANT;this.handleTabActiveChange=t=>{let r=new CustomEvent("activechange",{detail:{tabId:this.tabId,active:t},bubbles:!0});this.dispatchEvent(r)}}connectedCallback(){super.connectedCallback(),this.role=rt.TAB,this.size=void 0,this.type=void 0,this.ariaStateKey="aria-selected",!this.tabId&&this.onerror&&this.onerror("tab id is required")}modifyIconName(t){this.iconName&&(t?(this.prevIconName=this.iconName,this.iconName=`${Eo(this.iconName)}-filled`):this.prevIconName&&(this.iconName=this.prevIconName))}setVariant(t){this.setAttribute("variant",Object.values(ep).includes(t)?t:Ad.VARIANT)}setActive(t,r){super.setActive(t,r),this.modifyIconName(r)}executeAction(){this.handleTabActiveChange(this.active)}update(t){super.update(t),t.has("variant")&&this.setVariant(this.variant)}render(){return _`
6014
5966
  <div part="container">