@momentum-design/components 0.122.18 → 0.122.20

package/dist/browser/index.js

@@ -1693,6 +1693,9 @@
 
       --mdc-badge-overlay-background-color: var(--mds-color-theme-background-solid-primary-normal);
 
+      --mdc-badge-dot-width: 0.75rem;
+      --mdc-badge-dot-height: 0.75rem;
+
       color: var(--mdc-badge-primary-foreground-color);
     }
     :host::part(badge-overlay) {
@@ -1707,8 +1710,8 @@
       background-color: var(--mdc-badge-primary-background-color);
     }
     :host::part(badge-dot) {
-      width: 0.75rem;
-      height: 0.75rem;
+      width: var(--mdc-badge-dot-width);
+      height: var(--mdc-badge-dot-height);
       border-radius: 50%;
       background-color: var(--mdc-badge-primary-background-color);
     }
@@ -1856,14 +1859,14 @@
     position: absolute;
     height: 100%;
     border-inline-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-divider-color);
-    inset-inline-end: calc(var(--mdc-buttongroup-border-width) / 2);
+    inset-inline-start: 100%;
   }
   :host([variant='secondary'][orientation='vertical']) ::slotted(mdc-button:not(:last-of-type))::after {
     content: '';
     position: absolute;
     width: 100%;
     border-block-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-divider-color);
-    inset-block-end: calc(var(--mdc-buttongroup-border-width) / 2);
+    inset-block-end: 0%;
   }
 
   :host([orientation='vertical']) ::slotted(mdc-button:first-of-type) {
@@ -4542,6 +4545,17 @@
       left: -0.75rem;
       top: 0.875rem;
     }
+
+    :host mdc-badge {
+      --mdc-badge-dot-width: 1rem;
+      --mdc-badge-dot-height: 1rem;
+    }
+
+    @media (forced-colors: active) {
+      :host(:not([in-menupopover]))::before {
+        background-color: ButtonText;
+      }
+    }
   `,...At()],Kv=Ox;var Xe=class extends Wt(pr){constructor(){super();this.maxCounter=Gv.MAX_COUNTER;this.ariaLabel=null;this.sideNavigationContext=$e.consume({host:this,context:Vo.Context});this.emitNavMenuItemActiveChange=t=>{let r=new CustomEvent("activechange",{detail:{navId:this.navId,active:t},bubbles:!0});this.dispatchEvent(r)};this.addEventListener("click",this.handleClickEvent.bind(this)),this.addEventListener("focusin",this.renderDynamicTooltip.bind(this)),this.addEventListener("mouseenter",this.renderDynamicTooltip.bind(this)),this.addEventListener("focusout",this.removeTooltip.bind(this)),this.addEventListener("mouseout",this.removeTooltip.bind(this))}connectedCallback(){super.connectedCallback(),this.variant=void 0,!this.navId&&this.onerror&&this.onerror("[mdc-navmenuitem] navId is required and was not provided."),this.toggleAttribute("in-menupopover",this.isNested())}disconnectedCallback(){super.disconnectedCallback(),this.removeTooltip()}updated(){var r,s;let t=(r=this.sideNavigationContext)==null?void 0:r.value;if(t)if(this.showLabel=this.isNested()?!0:t.expanded,this.showLabel)this.removeAttribute("aria-label");else{let d=(s=this.label)!=null?s:"";this.ariaLabel=this.ariaLabel||d,this.setAttribute("aria-label",d)}}removeTooltip(){let t=document.querySelector(`${Qa}[triggerid="${this.id}"]`);t&&t.remove()}renderDynamicTooltip(){if(!this.tooltipText)return;this.id||(this.id=`mdc-navmenuitem-${Te()}`),this.removeTooltip();let t=document.createElement(Qa);t.id=`mdc-navmenuitem-tooltip-${Te()}`,t.textContent=this.tooltipText,t.setAttribute("triggerid",this.id),t.setAttribute("visible",""),t.setAttribute("show-arrow",""),this.hasAttribute("slot")&&t.setAttribute("slot",this.getAttribute("slot")||""),this.after(t)}isNested(){let t=this.parentElement;for(;t;){if(t.tagName.toLowerCase()===te)return!0;t=t.parentElement}return!1}modifyIconName(t){if(!this.iconName)return;let r=this.iconName.endsWith("-filled"),s=bo(this.iconName);t?r||(this.prevIconName=this.iconName,this.iconName=`${s}-filled`):this.prevIconName&&(this.iconName=this.prevIconName)}handleClickEvent(){this.disabled||this.emitNavMenuItemActiveChange(this.active)}update(t){super.update(t),t.has("active")&&this.modifyIconName(this.active)}renderTextLabel(t){return _`
       <mdc-text
         type=${this.active?st.BODY_MIDSIZE_BOLD:st.BODY_MIDSIZE_MEDIUM}