@momentum-design/components 0.129.8 → 0.129.10

package/dist/browser/index.js

@@ -883,7 +883,7 @@
       </div>
     `}};Di.styles=[...cs.styles,...nu],p([Pt({slot:"leading-controls"})],Di.prototype,"leadingControlsSlot",2),p([Pt({slot:"trailing-controls"})],Di.prototype,"trailingControlsSlot",2),p([u({type:String,attribute:"open-button-aria-label",reflect:!0})],Di.prototype,"openButtonAriaLabel",2),p([u({type:String,attribute:"close-button-aria-label",reflect:!0})],Di.prototype,"closeButtonAriaLabel",2);var uc=Di;var ol=z.constructTagName("accordion");uc.register(ol);var nE=uc;var lE=U`
   :host {
-    --mdc-accordiongroup-border-color: var(--mds-color-theme-outline-secondary-normal);
+    --mdc-accordiongroup-items-border-color: var(--mds-color-theme-outline-secondary-normal);
 
     display: flex;
     flex-direction: column;
@@ -893,7 +893,7 @@
   }
   :host([variant='stacked']) ::slotted(mdc-accordion),
   :host([variant='stacked']) ::slotted(mdc-accordionbutton) {
-    border: 1px solid var(--mdc-accordiongroup-border-color);
+    border: 1px solid var(--mdc-accordiongroup-items-border-color);
     border-radius: 0.5rem;
   }
   :host([variant='stacked']) ::slotted(mdc-accordion:not[expanded]),
@@ -901,12 +901,12 @@
     border-bottom: none;
   }
   :host([variant='contained']) {
-    border: 1px solid var(--mdc-accordiongroup-border-color);
+    border: 1px solid var(--mdc-accordiongroup-items-border-color);
     border-radius: 0.5rem;
   }
   :host([variant='contained']) ::slotted(mdc-accordion),
   :host([variant='contained']) ::slotted(mdc-accordionbutton) {
-    border-bottom: 1px solid var(--mdc-accordiongroup-border-color);
+    border-bottom: 1px solid var(--mdc-accordiongroup-items-border-color);
   }
   :host([variant='contained']) ::slotted(mdc-accordion:first-child),
   :host([variant='contained']) ::slotted(mdc-accordionbutton:first-child) {
@@ -923,7 +923,7 @@
   }
   :host([variant='borderless']) ::slotted(mdc-accordion[expanded]),
   :host([variant='borderless']) ::slotted(mdc-accordionbutton[expanded]) {
-    border-bottom: 1px solid var(--mdc-accordiongroup-border-color);
+    border-bottom: 1px solid var(--mdc-accordiongroup-items-border-color);
   }
 `,lu=[lE,...At()];var ai=class extends q{constructor(){super();this.size=Sa.SIZE;this.variant=Sa.VARIANT;this.allowMultiple=!1;this.addEventListener("shown",this.handleAccordionExpanded)}handleAccordionExpanded(t){this.allowMultiple||[...this.accordionItems,...this.accordionButtonItems].forEach(r=>{r!==t.target&&r.hasAttribute("expanded")&&r.toggleAttribute("expanded")})}setChildrenAccordionAttributes(t,r){[...this.accordionItems].forEach(s=>{s.setAttribute(t,r)}),[...this.accordionButtonItems].forEach(s=>{s.setAttribute(t,r)})}updated(t){super.updated(t),t.has("size")&&(this.size||(this.size=Sa.SIZE),this.setChildrenAccordionAttributes("size",this.size)),t.has("variant")&&(this.variant||(this.variant=Sa.VARIANT),this.setChildrenAccordionAttributes("variant",this.variant))}render(){return _` <slot></slot> `}};ai.styles=[...q.styles,...lu],p([u({type:String,reflect:!0})],ai.prototype,"size",2),p([u({type:String,reflect:!0})],ai.prototype,"variant",2),p([u({type:Boolean,reflect:!0,attribute:"allow-multiple"})],ai.prototype,"allowMultiple",2),p([Pt({selector:ol})],ai.prototype,"accordionItems",2),p([Pt({selector:il})],ai.prototype,"accordionButtonItems",2);var fc=ai;fc.register(su);var dE=fc;cs.register(il);var cE=cs;var Xt=n=>{class o extends n{}return p([u({type:String,attribute:"icon-name"})],o.prototype,"iconName",2),o};var hE=U`
   :host {
@@ -5765,70 +5765,20 @@
       --mdc-tab-content-gap: 0.5rem;
       --mdc-tab-height: 2rem;
 
-      --mdc-tab-glass-active-background-color-disabled: var(--mds-color-theme-button-primary-disabled);
-      --mdc-tab-glass-active-background-color-hover: var(--mds-color-theme-button-primary-hover);
-      --mdc-tab-glass-active-background-color-normal: var(--mds-color-theme-button-primary-normal);
-      --mdc-tab-glass-active-background-color-pressed: var(--mds-color-theme-button-primary-pressed);
-
-      --mdc-tab-glass-active-color: var(--mds-color-theme-inverted-text-primary-normal);
-      --mdc-tab-glass-active-color-disabled: var(--mds-color-theme-inverted-text-primary-disabled);
-
-      --mdc-tab-glass-border-radius: 0.5rem;
-
-      --mdc-tab-glass-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
-      --mdc-tab-glass-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
-      --mdc-tab-glass-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
-      --mdc-tab-glass-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
-
-      --mdc-tab-glass-inactive-color: var(--mds-color-theme-text-secondary-normal);
-      --mdc-tab-glass-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
-
-      --mdc-tab-line-active-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
-      --mdc-tab-line-active-background-color-hover: var(--mds-color-theme-button-secondary-hover);
-      --mdc-tab-line-active-background-color-normal: var(--mds-color-theme-button-secondary-normal);
-      --mdc-tab-line-active-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
-
-      --mdc-tab-line-active-color: var(--mds-color-theme-text-primary-normal);
-      --mdc-tab-line-active-color-disabled: var(--mds-color-theme-text-primary-disabled);
-
-      --mdc-tab-line-active-indicator-color: var(--mds-color-theme-outline-input-active);
-      --mdc-tab-line-active-indicator-color-disabled: var(--mds-color-theme-outline-primary-disabled);
       --mdc-tab-line-active-indicator-height: 0.125rem;
       --mdc-tab-line-active-indicator-width: 100%;
 
+      --mdc-tab-padding-left: 0.75rem;
+      --mdc-tab-padding-right: 0.75rem;
+
       --mdc-tab-line-border-bottom-left-radius: 0;
       --mdc-tab-line-border-bottom-right-radius: 0;
       --mdc-tab-line-border-top-left-radius: 0.25rem;
       --mdc-tab-line-border-top-right-radius: 0.25rem;
 
-      --mdc-tab-line-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
-      --mdc-tab-line-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
-      --mdc-tab-line-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
-      --mdc-tab-line-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
-
-      --mdc-tab-line-inactive-color: var(--mds-color-theme-text-secondary-normal);
-      --mdc-tab-line-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
-
-      --mdc-tab-padding-left: 0.75rem;
-      --mdc-tab-padding-right: 0.75rem;
-
-      --mdc-tab-pill-active-background-color-disabled: var(--mds-color-theme-button-secondary-active-normal);
-      --mdc-tab-pill-active-background-color-hover: var(--mds-color-theme-button-secondary-active-hover);
-      --mdc-tab-pill-active-background-color-normal: var(--mds-color-theme-button-secondary-active-normal);
-      --mdc-tab-pill-active-background-color-pressed: var(--mds-color-theme-button-secondary-active-pressed);
-
-      --mdc-tab-pill-active-color: var(--mds-color-theme-text-primary-normal);
-      --mdc-tab-pill-active-color-disabled: var(--mds-color-theme-text-primary-disabled);
-
-      --mdc-tab-pill-border-radius: 0.5rem;
-
-      --mdc-tab-pill-inactive-background-color-disabled: var(--mds-color-theme-button-secondary-disabled);
-      --mdc-tab-pill-inactive-background-color-hover: var(--mds-color-theme-button-secondary-hover);
-      --mdc-tab-pill-inactive-background-color-normal: var(--mds-color-theme-button-secondary-normal);
-      --mdc-tab-pill-inactive-background-color-pressed: var(--mds-color-theme-button-secondary-pressed);
-
-      --mdc-tab-pill-inactive-color: var(--mds-color-theme-text-secondary-normal);
-      --mdc-tab-pill-inactive-color-disabled: var(--mds-color-theme-text-primary-disabled);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
+      --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
+      --mdc-tab-border-radius: 0.5rem;
 
       flex-direction: column;
       flex-shrink: 0;
@@ -5837,6 +5787,9 @@
       padding-right: var(--mdc-tab-padding-right);
       position: relative;
       border: none;
+      background-color: var(--mdc-tab-background-color);
+      color: var(--mdc-tab-color);
+      border-radius: var(--mdc-tab-border-radius);
     }
 
     :host::part(container) {
@@ -5871,6 +5824,7 @@
     :host::part(indicator) {
       width: var(--mdc-tab-line-active-indicator-width);
       height: var(--mdc-tab-line-active-indicator-height);
+      background-color: var(--mdc-tab-background-color);
       bottom: 0;
       position: absolute;
       visibility: hidden;
@@ -5882,133 +5836,131 @@
     }
 
     :host([variant='glass']) {
-      background-color: var(--mdc-tab-glass-inactive-background-color-normal);
-      border-radius: var(--mdc-tab-glass-border-radius);
-      color: var(--mdc-tab-glass-inactive-color);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
+      --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
     }
 
     :host([variant='glass']:hover) {
-      background-color: var(--mdc-tab-glass-inactive-background-color-hover);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
     }
 
     :host([variant='glass']:active) {
-      background-color: var(--mdc-tab-glass-inactive-background-color-pressed);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
     }
 
     :host([variant='glass'][disabled]),
     :host([variant='glass'][soft-disabled]) {
-      background-color: var(--mdc-tab-glass-inactive-background-color-disabled);
-      color: var(--mdc-tab-glass-inactive-color-disabled);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
+      --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
     }
 
     :host([variant='glass'][active]) {
-      background-color: var(--mdc-tab-glass-active-background-color-normal);
-      color: var(--mdc-tab-glass-active-color);
+      --mdc-tab-background-color: var(--mds-color-theme-button-primary-normal);
+      --mdc-tab-color: var(--mds-color-theme-inverted-text-primary-normal);
     }
 
     :host([variant='glass'][active]:hover) {
-      background-color: var(--mdc-tab-glass-active-background-color-hover);
+      --mdc-tab-background-color: var(--mds-color-theme-button-primary-hover);
     }
 
     :host([variant='glass'][active]:active) {
-      background-color: var(--mdc-tab-glass-active-background-color-pressed);
+      --mdc-tab-background-color: var(--mds-color-theme-button-primary-pressed);
     }
 
     :host([variant='glass'][active][disabled]),
     :host([variant='glass'][active][soft-disabled]) {
-      background-color: var(--mdc-tab-glass-active-background-color-disabled);
-      color: var(--mdc-tab-glass-active-color-disabled);
+      --mdc-tab-background-color: var(--mds-color-theme-button-primary-disabled);
+      --mdc-tab-color: var(--mds-color-theme-inverted-text-primary-disabled);
     }
 
     :host([variant='line']) {
-      background-color: var(--mdc-tab-line-inactive-background-color-normal);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
       border-top-left-radius: var(--mdc-tab-line-border-top-left-radius);
       border-top-right-radius: var(--mdc-tab-line-border-top-right-radius);
       border-bottom-left-radius: var(--mdc-tab-line-border-bottom-left-radius);
       border-bottom-right-radius: var(--mdc-tab-line-border-bottom-right-radius);
-      color: var(--mdc-tab-line-inactive-color);
+      --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
     }
 
     :host([variant='line']:hover) {
-      background-color: var(--mdc-tab-line-inactive-background-color-hover);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
     }
 
     :host([variant='line']:active) {
-      background-color: var(--mdc-tab-line-inactive-background-color-pressed);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
     }
 
     :host([variant='line'][disabled]),
     :host([variant='line'][soft-disabled]) {
-      background-color: var(--mdc-tab-line-inactive-background-color-disabled);
-      color: var(--mdc-tab-line-inactive-color-disabled);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
+      --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
     }
 
     :host([variant='line'][active]) {
-      background-color: var(--mdc-tab-line-active-background-color-normal);
-      color: var(--mdc-tab-line-active-color);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
+      --mdc-tab-color: var(--mds-color-theme-text-primary-normal);
     }
 
     :host([variant='line'][active])::part(indicator) {
-      background-color: var(--mdc-tab-line-active-indicator-color);
+      --mdc-tab-background-color: var(--mds-color-theme-outline-input-active);
       visibility: visible;
     }
 
     :host([variant='line'][active]:hover) {
-      background-color: var(--mdc-tab-line-active-background-color-hover);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
     }
 
     :host([variant='line'][active]:active) {
-      background-color: var(--mdc-tab-line-active-background-color-pressed);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
     }
 
     :host([variant='line'][active][disabled]),
     :host([variant='line'][active][soft-disabled]) {
-      background-color: var(--mdc-tab-line-active-background-color-disabled);
-      color: var(--mdc-tab-line-active-color-disabled);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
+      --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
     }
 
     :host([variant='line'][active][disabled])::part(indicator),
     :host([variant='line'][active][soft-disabled])::part(indicator) {
-      background-color: var(--mdc-tab-line-active-indicator-color-disabled);
+      --mdc-tab-background-color: var(--mds-color-theme-outline-primary-disabled);
     }
 
     :host([variant='pill']) {
-      background-color: var(--mdc-tab-pill-inactive-background-color-normal);
-      border-radius: var(--mdc-tab-pill-border-radius);
-      color: var(--mdc-tab-pill-inactive-color);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-normal);
+      --mdc-tab-color: var(--mds-color-theme-text-secondary-normal);
     }
 
     :host([variant='pill']:hover) {
-      background-color: var(--mdc-tab-pill-inactive-background-color-hover);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-hover);
     }
 
     :host([variant='pill']:active) {
-      background-color: var(--mdc-tab-pill-inactive-background-color-pressed);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-pressed);
     }
 
     :host([variant='pill'][disabled]),
     :host([variant='pill'][soft-disabled]) {
-      background-color: var(--mdc-tab-pill-inactive-background-color-disabled);
-      color: var(--mdc-tab-pill-inactive-color-disabled);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-disabled);
+      --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
     }
 
     :host([variant='pill'][active]) {
-      background-color: var(--mdc-tab-pill-active-background-color-normal);
-      color: var(--mdc-tab-pill-active-color);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-normal);
+      --mdc-tab-color: var(--mds-color-theme-text-primary-normal);
     }
 
     :host([variant='pill'][active]:hover) {
-      background-color: var(--mdc-tab-pill-active-background-color-hover);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-hover);
     }
 
     :host([variant='pill'][active]:active) {
-      background-color: var(--mdc-tab-pill-active-background-color-pressed);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-pressed);
     }
 
     :host([variant='pill'][active][disabled]),
     :host([variant='pill'][active][soft-disabled]) {
-      background-color: var(--mdc-tab-pill-active-background-color-disabled);
-      color: var(--mdc-tab-pill-active-color-disabled);
+      --mdc-tab-background-color: var(--mds-color-theme-button-secondary-active-normal);
+      --mdc-tab-color: var(--mds-color-theme-text-primary-disabled);
     }
   `,...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 _`
       <div part="container">