@momentum-design/components 0.53.5 → 0.53.7

package/dist/browser/index.js

@@ -974,7 +974,7 @@
     --mdc-button-primary-pressed-background-color: var(--mds-color-theme-button-primary-pressed);
     --mdc-button-primary-disabled-background-color: var(--mds-color-theme-button-primary-disabled);
     --mdc-button-primary-disabled-color: var(--mds-color-theme-text-primary-disabled);
-    
+
     --mdc-button-secondary-color: var(--mds-color-theme-text-primary-normal);
     --mdc-button-secondary-border-color: var(--mds-color-theme-outline-button-normal);
     --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
@@ -989,6 +989,11 @@
     --mdc-button-tertiary-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
     --mdc-button-tertiary-disabled-color: var(--mds-color-theme-text-primary-disabled);
 
+    --mdc-button-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
+    --mdc-button-active-hover-background-color: var(--mds-color-theme-button-secondary-active-hover);
+    --mdc-button-active-pressed-background-color: var(--mds-color-theme-button-secondary-active-pressed);
+    --mdc-button-active-disabled-background-color: var(--mds-color-theme-button-secondary-active-disabled);
+
     --mdc-button-line-height-size-40: var(--mds-font-lineheight-body-large);
     --mdc-button-line-height-size-32: var(--mds-font-lineheight-body-large);
     --mdc-button-line-height-size-28: var(--mds-font-lineheight-body-midsize);
@@ -998,17 +1003,17 @@
     --mdc-button-postfix-icon-size: 1rem;
   }
 
-  :host([size="64"]) {
+  :host([size='64']) {
     --mdc-button-prefix-icon-size: 2rem;
     --mdc-button-postfix-icon-size: 2rem;
   }
 
-  :host([size="52"]) {
+  :host([size='52']) {
     --mdc-button-prefix-icon-size: 1.75rem;
     --mdc-button-postfix-icon-size: 1.75rem;
   }
 
-  :host([size="40"]) {
+  :host([size='40']) {
     --mdc-button-prefix-icon-size: 1.25rem;
     --mdc-button-postfix-icon-size: 1.25rem;
   }
@@ -1022,101 +1027,124 @@
     --mdc-icon-size: var(--mdc-button-postfix-icon-size);
   }
 
-  :host([active]){
+  :host([active]) {
     font-weight: var(--mds-font-apps-body-large-bold-font-weight);
   }
 
-  :host([variant="primary"]){
+  :host([active][color='default']:not([variant='primary'])) {
+    font-weight: var(--mds-font-apps-body-large-bold-font-weight);
+    background: var(--mdc-button-active-background-color);
+  }
+  :host([active][color='default']:not([variant='primary']):hover) {
+    font-weight: var(--mds-font-apps-body-large-bold-font-weight);
+    background: var(--mdc-button-active-hover-background-color);
+  }
+  :host([active][color='default']:not([variant='primary']):active),
+  :host([active][color='default']:not([variant='primary']).pressed) {
+    font-weight: var(--mds-font-apps-body-large-bold-font-weight);
+    background: var(--mdc-button-active-pressed-background-color);
+  }
+  :host([active][color='default']:not([variant='primary'])[disabled]),
+  :host([active][color='default']:not([variant='primary'])[soft-disabled]) {
+    font-weight: var(--mds-font-apps-body-large-bold-font-weight);
+    background: var(--mdc-button-active-disabled-background-color);
+  }
+
+  :host([variant='primary']) {
     background: var(--mdc-button-primary-background-color);
     color: var(--mdc-button-primary-color);
   }
-  :host([variant="primary"]:hover){
+  :host([variant='primary']:hover) {
     background: var(--mdc-button-primary-hover-background-color);
   }
-  :host([variant="primary"]:active), :host([variant="primary"].pressed){
+  :host([variant='primary']:active),
+  :host([variant='primary'].pressed) {
     background: var(--mdc-button-primary-pressed-background-color);
   }
-  :host([variant="primary"][disabled]), :host([variant="primary"][soft-disabled]){
+  :host([variant='primary'][disabled]),
+  :host([variant='primary'][soft-disabled]) {
     background: var(--mdc-button-primary-disabled-background-color);
     color: var(--mdc-button-primary-disabled-color);
     cursor: auto;
   }
 
-  :host([variant="secondary"]){
+  :host([variant='secondary']) {
     color: var(--mdc-button-secondary-color);
     border-color: var(--mdc-button-secondary-border-color);
   }
-  :host([variant="secondary"]:hover){
+  :host([variant='secondary']:hover) {
     background: var(--mdc-button-secondary-hover-background-color);
   }
-  :host([variant="secondary"]:active), :host([variant="secondary"].pressed){
+  :host([variant='secondary']:active),
+  :host([variant='secondary'].pressed) {
     background: var(--mdc-button-secondary-pressed-background-color);
   }
-  :host([variant="secondary"][disabled]),
-   :host([variant="secondary"][soft-disabled]){
+  :host([variant='secondary'][disabled]),
+  :host([variant='secondary'][soft-disabled]) {
     color: var(--mdc-button-primary-disabled-color);
     border-color: var(--mdc-button-secondary-disabled-border-color);
     background: var(--mdc-button-secondary-disabled-background-color);
     cursor: auto;
   }
 
-  :host([variant="tertiary"]){
+  :host([variant='tertiary']) {
     border-color: transparent;
     color: var(--mdc-button-tertiary-color);
   }
-  :host([variant="tertiary"]:hover){
+  :host([variant='tertiary']:hover) {
     background: var(--mdc-button-tertiary-hover-background-color);
   }
-  :host([variant="tertiary"]:active), :host([variant="tertiary"].pressed){
+  :host([variant='tertiary']:active),
+  :host([variant='tertiary'].pressed) {
     background: var(--mdc-button-tertiary-pressed-background-color);
   }
-  :host([variant="tertiary"][disabled]), 
-  :host([variant="tertiary"][soft-disabled]){
+  :host([variant='tertiary'][disabled]),
+  :host([variant='tertiary'][soft-disabled]) {
     color: var(--mdc-button-tertiary-disabled-color);
     background: var(--mdc-button-tertiary-disabled-background-color);
     cursor: auto;
   }
 
-  :host([size="64"][data-btn-type='icon']), 
-  :host([size="52"][data-btn-type='icon']), 
-  :host([size="40"][data-btn-type='icon']), 
-  :host([size="32"][data-btn-type='icon']),
-  :host([size="28"][data-btn-type='icon']),
-  :host([size="24"][data-btn-type='icon']){
+  :host([size='64'][data-btn-type='icon']),
+  :host([size='52'][data-btn-type='icon']),
+  :host([size='40'][data-btn-type='icon']),
+  :host([size='32'][data-btn-type='icon']),
+  :host([size='28'][data-btn-type='icon']),
+  :host([size='24'][data-btn-type='icon']) {
     border-radius: 6.25rem;
     aspect-ratio: 1;
     padding: unset;
   }
-  :host([size="40"]){
+  :host([size='40']) {
     font-size: var(--mds-font-size-body-large);
     line-height: var(--mdc-button-line-height-size-40);
     padding: 0 1rem;
     gap: 0.5rem;
   }
-  :host([size="32"]){
+  :host([size='32']) {
     font-size: var(--mds-font-size-body-large);
     line-height: var(--mdc-button-line-height-size-32);
     padding: 0 0.75rem;
     gap: 0.375rem;
   }
-  :host([size="28"]){
+  :host([size='28']) {
     font-size: var(--mds-font-size-body-midsize);
     line-height: var(--mdc-button-line-height-size-28);
     padding: 0 0.75rem;
     gap: 0.375rem;
   }
-  :host([size="24"]){
+  :host([size='24']) {
     font-size: var(--mds-font-size-body-small);
     line-height: var(--mdc-button-line-height-size-24);
     padding: 0 0.625rem;
     gap: 0.25rem;
   }
-  :host([size="20"]){
+  :host([size='20']) {
     padding: 0.0625rem;
     aspect-ratio: 1;
   }
 
-  :host([color="accent"]){
+  :host([color='accent']) {
     --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-primary-background-color: var(--mds-color-theme-button-accent-normal);
     --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-accent-hover);
@@ -1127,7 +1155,7 @@
     --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
     --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
   }
-  :host([color="positive"]){
+  :host([color='positive']) {
     --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-primary-background-color: var(--mds-color-theme-button-join-normal);
     --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-join-hover);
@@ -1138,7 +1166,7 @@
     --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
     --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
   }
-  :host([color="negative"]){
+  :host([color='negative']) {
     --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-primary-background-color: var(--mds-color-theme-button-cancel-normal);
     --mdc-button-primary-hover-background-color: var(--mds-color-theme-button-cancel-hover);
@@ -1149,7 +1177,7 @@
     --mdc-button-secondary-hover-background-color: var(--mds-color-theme-button-secondary-hover);
     --mdc-button-secondary-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
   }
-  :host([color="promotional"]){
+  :host([color='promotional']) {
     --mdc-button-primary-color: var(--mds-color-theme-common-text-primary-normal);
     --mdc-button-primary-background-color: var(--mds-color-theme-common-button-promotion-normal);
     --mdc-button-primary-hover-background-color: var(--mds-color-theme-common-button-promotion-hover);