@ni/nimble-components 9.0.1 → 9.0.4

package/dist/esm/menu/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { applicationBackgroundColor, borderWidth, borderColor, popupBorderColor, popupBoxShadowColor, groupHeaderFont, groupHeaderTextTransform, groupHeaderFontColor } from '../theme-provider/design-tokens';
+import { applicationBackgroundColor, borderWidth, borderColor, popupBorderColor, popupBoxShadowColor, groupHeaderFont, groupHeaderTextTransform, groupHeaderFontColor, smallPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('grid')}
 
@@ -13,6 +13,9 @@ export const styles = css `
         width: max-content;
         box-shadow: 0px 2px 3px ${popupBoxShadowColor};
     }
+    :host([slot='submenu']) {
+        margin: 0 calc(${smallPadding} * 2);
+    }
     ::slotted(*) {
         padding-left: 8px;
         padding-right: 8px;
@@ -20,7 +23,7 @@ export const styles = css `
     ::slotted(hr) {
         box-sizing: content-box;
         height: 2px;
-        margin: 4px;
+        margin: ${smallPadding};
         border: none;
         background: ${borderColor};
         opacity: 0.1;
@@ -30,8 +33,8 @@ export const styles = css `
         font: ${groupHeaderFont};
         color: ${groupHeaderFontColor};
         text-transform: ${groupHeaderTextTransform};
-        padding-top: 4px;
-        padding-bottom: 4px;
+        padding-top: ${smallPadding};
+        padding-bottom: ${smallPadding};
     }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/menu/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;sBAGC,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;;;;kCAKrB,mBAAmB;;;;;;;;;;;sBAW/B,WAAW;;;;;gBAKjB,eAAe;iBACd,oBAAoB;0BACX,wBAAwB;;;;CAIjD,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;sBAGC,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;;;;kCAKrB,mBAAmB;;;yBAG5B,YAAY;;;;;;;;;kBASnB,YAAY;;sBAER,WAAW;;;;;gBAKjB,eAAe;iBACd,oBAAoB;0BACX,wBAAwB;uBAC3B,YAAY;0BACT,YAAY;;CAErC,CAAC"}

package/dist/esm/menu-button/template.d.ts

@@ -1,2 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
 import type { MenuButton } from '.';
-export declare const template: import("@microsoft/fast-element").ViewTemplate<MenuButton, any>;
+export declare const template: FoundationElementTemplate<ViewTemplate<MenuButton>>;

package/dist/esm/menu-button/template.js

@@ -1,11 +1,13 @@
 import { elements, html, ref, slotted, when } from '@microsoft/fast-element';
+import { ToggleButton } from '../toggle-button';
+import { AnchoredRegion } from '../anchored-region';
 // prettier-ignore
-export const template = html `
+export const template = context => html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
     >
-        <nimble-toggle-button
+        <${context.tagFor(ToggleButton)}
             part="button"
             appearance="${x => x.appearance}"
             content-hidden="${x => x.contentHidden}"
@@ -24,9 +26,9 @@ export const template = html `
             <span slot="end" part="end">
                 <slot name="end"></slot>
             </span>
-        </nimble-toggle-button>
+        </${context.tagFor(ToggleButton)}>
         ${when(x => x.open, html `
-            <nimble-anchored-region
+            <${context.tagFor(AnchoredRegion)}
                 fixed-placement="true"
                 auto-update-mode="auto"
                 horizontal-inset="true"
@@ -41,7 +43,7 @@ export const template = html `
                 <span part="menu">
                     <slot name="menu" ${slotted({ property: 'slottedMenus', filter: elements('[role=menu]') })}></slot>
                 </span>
-            </nimble-anchored-region>
+            </${context.tagFor(AnchoredRegion)}>
         `)}
     </template>
 `;

package/dist/esm/menu-button/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG7E,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAY;;iBAEvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;;;0BAI7C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;8BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;wBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;cAC1E,GAAG,CAAC,cAAc,CAAC;;;;;;;;;;UAUvB,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAY;;;;;;6CAMqB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;6CAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;2BAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;2BAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;4BACzB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAClE,GAAG,CAAC,QAAQ,CAAC;;;wCAGS,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;;;SAGrG,CACJ;;CAEJ,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/menu-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,OAAO,EAEP,IAAI,EACP,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAwD,OAAO,CAAC,EAAE,CAAC,IAAI,CAAY;;iBAEvF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;qBACP,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAmB,CAAC;;WAE5D,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC;;0BAEb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;8BACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;wBAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;6BAEX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;uBACjB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,KAAK,CAAC;wBACpD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAsB,CAAC;cAC1E,GAAG,CAAC,cAAc,CAAC;;;;;;;;;YASrB,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC;UAC9B,IAAI,CACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EACX,IAAI,CAAY;eACT,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC;;;;;6CAKA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;6CAC1D,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;2BAClE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB,EAAE;2BAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;4BACzB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAsB,CAAC;kBAClE,GAAG,CAAC,QAAQ,CAAC;;;wCAGS,OAAO,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;;gBAE9F,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC;SACrC,CACJ;;CAEJ,CAAC"}

package/dist/esm/menu-item/index.js

@@ -1,4 +1,5 @@
 import { DesignSystem, MenuItem as FoundationMenuItem, menuItemTemplate as template } from '@microsoft/fast-foundation';
+import { arrowExpanderRight16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
 import { styles } from './styles';
 /**
  * A nimble-styled menu-item
@@ -18,7 +19,8 @@ const nimbleMenuItem = MenuItem.compose({
     baseName: 'menu-item',
     baseClass: FoundationMenuItem,
     template,
-    styles
+    styles,
+    expandCollapseGlyph: arrowExpanderRight16X16.data
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
 //# sourceMappingURL=index.js.map

package/dist/esm/menu-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAC9B,gBAAgB,IAAI,QAAQ,EAE/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;CAAG;AAEnD;;;;;;;;GAQG;AACH,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAC9B,gBAAgB,IAAI,QAAQ,EAE/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,uBAAuB,EAAE,MAAM,sDAAsD,CAAC;AAC/F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;CAAG;AAEnD;;;;;;;;GAQG;AACH,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,mBAAmB,EAAE,uBAAuB,CAAC,IAAI;CACpD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}

package/dist/esm/menu-item/styles.js

@@ -10,7 +10,8 @@ export const styles = css `
         overflow: visible;
         box-sizing: border-box;
         height: ${controlHeight};
-        grid-template-columns: 0px 1fr;
+        grid-template-columns: 1fr;
+        column-gap: 8px;
         grid-template-rows: 1fr;
         justify-items: start;
         align-items: center;
@@ -27,10 +28,13 @@ export const styles = css `
         outline: 2px solid ${borderHoverColor};
         outline-offset: -2px;
     }
+    :host([expanded]) {
+        background: ${fillHoverColor};
+    }
     :host(:hover) {
         background: ${fillHoverColor};
     }
-    :host(:active) {
+    :host(:active:not([expanded])) {
         background: ${fillSelectedColor};
     }
     :host([disabled]) {
@@ -41,9 +45,14 @@ export const styles = css `
     :host([disabled]:hover) {
         background: transparent;
     }
+    :host(.indent-0[aria-haspopup='menu']) {
+        grid-template-columns: 1fr ${iconSize};
+    }
     :host(.indent-1) {
         grid-template-columns: ${iconSize} 1fr;
-        column-gap: 8px;
+    }
+    :host(.indent-1[aria-haspopup='menu']) {
+        grid-template-columns: ${iconSize} 1fr ${iconSize};
     }
     [part='start'] {
         display: contents;
@@ -59,5 +68,17 @@ export const styles = css `
     :host(.indent-1) .content {
         grid-column: 2;
     }
+    .expand-collapse-glyph-container {
+        grid-row: 1;
+        fill: currentcolor;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+    :host(.indent-0) .expand-collapse-glyph-container {
+        grid-column: 2;
+    }
+    :host(.indent-1) .expand-collapse-glyph-container {
+        grid-column: 3;
+    }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/menu-item/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACxB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;kBAMH,aAAa;;;;;;;;;iBASd,aAAa;;;gBAGd,QAAQ;;YAEZ,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,qBAAqB;;;;;;;;iCAQL,QAAQ;;;;;;;;iBAQxB,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACxB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;kBAMH,aAAa;;;;;;;;;;iBAUd,aAAa;;;gBAGd,QAAQ;;YAEZ,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,qBAAqB;;;;;;;;qCAQD,QAAQ;;;iCAGZ,QAAQ;;;iCAGR,QAAQ,QAAQ,QAAQ;;;;;;;iBAOxC,QAAQ;kBACP,QAAQ;;;;;;;;;;;iBAWT,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC"}

package/dist/esm/nimble-components/src/menu-button/template.d.ts

@@ -1,2 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
 import type { MenuButton } from '.';
-export declare const template: import("@microsoft/fast-element").ViewTemplate<MenuButton, any>;
+export declare const template: FoundationElementTemplate<ViewTemplate<MenuButton>>;

package/dist/tokens.scss

@@ -3,7 +3,7 @@
 // Requires using a <nimble-theme-provider> in the page.
 // For more information see https://github.com/ni/nimble/tree/main/packages/nimble-components#theming
 
-@import './tokens-internal';
+@import './tokens-internal.scss';
 
 /// DEPRECATED: *-partial tokens are used with rgba() to set color transparency in component stylesheets
 $ni-nimble-action-rgb-partial-color: var($ni-nimble-internal-action-rgb-partial-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "9.0.1",
+  "version": "9.0.4",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",