@ni/nimble-components 8.6.3 → 9.0.2

package/dist/all-components-bundle.min.js

@@ -1750,8 +1750,7 @@ const Ih=window.matchMedia("(prefers-reduced-motion: reduce)"),Sh={slideLeftKeyf
         position: relative;
         top: 0px;
         bottom: 0px;
-        display: grid;
-        grid-template-rows: max-content auto max-content;
+        display: flex;
         flex-direction: column;
         box-sizing: border-box;
         border-radius: 0px;
@@ -1784,20 +1783,21 @@ const Ih=window.matchMedia("(prefers-reduced-motion: reduce)"),Sh={slideLeftKeyf
 
     ::slotted(header) {
         padding: ${wn};
+        flex: none;
         font: ${kn};
     }
 
     ::slotted(section) {
         padding: ${wn};
-        grid-row: 2;
+        flex: auto;
         overflow-y: auto;
     }
 
     ::slotted(footer) {
         padding: ${wn};
+        flex: none;
         display: flex;
         justify-content: flex-end;
-        grid-row: 3;
         border-top: ${yn} solid ${mn};
     }
 `
@@ -2116,6 +2116,9 @@ const Dh=mt`
         width: max-content;
         box-shadow: 0px 2px 3px ${gn};
     }
+    :host([slot='submenu']) {
+        margin: 0 calc(${bn} * 2);
+    }
     ::slotted(*) {
         padding-left: 8px;
         padding-right: 8px;
@@ -2123,7 +2126,7 @@ const Dh=mt`
     ::slotted(hr) {
         box-sizing: content-box;
         height: 2px;
-        margin: 4px;
+        margin: ${bn};
         border: none;
         background: ${ln};
         opacity: 0.1;
@@ -2133,8 +2136,8 @@ const Dh=mt`
         font: ${sr};
         color: ${ir};
         text-transform: ${Hr};
-        padding-top: 4px;
-        padding-bottom: 4px;
+        padding-top: ${bn};
+        padding-bottom: ${bn};
     }
 `
 const Nh=class extends Zs{}.compose({baseName:"menu",baseClass:Zs,template:(t,e)=>X`
@@ -2156,7 +2159,8 @@ const jh=mt`
         overflow: visible;
         box-sizing: border-box;
         height: ${fn};
-        grid-template-columns: 0px 1fr;
+        grid-template-columns: 1fr;
+        column-gap: 8px;
         grid-template-rows: 1fr;
         justify-items: start;
         align-items: center;
@@ -2173,10 +2177,13 @@ const jh=mt`
         outline: 2px solid ${pn};
         outline-offset: -2px;
     }
+    :host([expanded]) {
+        background: ${an};
+    }
     :host(:hover) {
         background: ${an};
     }
-    :host(:active) {
+    :host(:active:not([expanded])) {
         background: ${on};
     }
     :host([disabled]) {
@@ -2187,9 +2194,14 @@ const jh=mt`
     :host([disabled]:hover) {
         background: transparent;
     }
+    :host(.indent-0[aria-haspopup='menu']) {
+        grid-template-columns: 1fr ${$n};
+    }
     :host(.indent-1) {
         grid-template-columns: ${$n} 1fr;
-        column-gap: 8px;
+    }
+    :host(.indent-1[aria-haspopup='menu']) {
+        grid-template-columns: ${$n} 1fr ${$n};
     }
     [part='start'] {
         display: contents;
@@ -2205,6 +2217,18 @@ const jh=mt`
     :host(.indent-1) .content {
         grid-column: 2;
     }
+    .expand-collapse-glyph-container {
+        grid-row: 1;
+        fill: currentcolor;
+        width: ${$n};
+        height: ${$n};
+    }
+    :host(.indent-0) .expand-collapse-glyph-container {
+        grid-column: 2;
+    }
+    :host(.indent-1) .expand-collapse-glyph-container {
+        grid-column: 3;
+    }
 `
 const qh=class extends Js{}.compose({baseName:"menu-item",baseClass:Js,template:(t,e)=>X`
     <template
@@ -2273,7 +2297,7 @@ const qh=class extends Js{}.compose({baseName:"menu-item",baseClass:Js,template:
                 </${t.tagFor(De)}>
             `)}
     </template>
-`,styles:jh})
+`,styles:jh,expandCollapseGlyph:Zr.data})
 Vs.getOrCreate().withPrefix("nimble").register(qh())
 const Uh=mt`
     ${Ei("inline-block")}
@@ -3360,6 +3384,11 @@ const ud=mt`
         outline: none;
     }
 
+    .control:disabled {
+        ${""}
+        text-overflow: clip;
+    }
+
     .control::selection {
         color: ${dr};
         background: rgba(${nn}, 0.3);