npm - @ni/nimble-components - Versions diffs - 1.0.0-beta.122 → 1.0.0-beta.126 - Mend

@ni/nimble-components 1.0.0-beta.122 → 1.0.0-beta.126

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (108) hide show

package/README.md CHANGED Viewed

@@ -26,6 +26,51 @@ If you have an existing application that incorporates a module bundler like [Web
 3. Add the HTML for the component to your page. You can see sample code for each component in the [Nimble Storybook](https://ni.github.io/nimble/storybook/) by going to the **Docs** tab for the component and clicking **Show code**. For example: `<nimble-succeeded-icon></nimble-succeeded-icon>`.
 4. Nimble components are [standard web components (custom elements)](https://developer.mozilla.org/en-US/docs/Web/Web_Components) so you can configure them via normal DOM APIs like attributes, properties, events, and methods. The [Storybook documentation](https://ni.github.io/nimble/storybook/) for each component describes its custom API.
+## Theming
+This package contains a theming system which enables changing the appearance of controls based on user preferences or application designs.
+The theming system is built on a set of design tokens that define different properties such as fonts, colors, etc. The Nimble components are configured to use these theme-aware design tokens. An application should use the same theme-aware design tokens for parts outside of the components.
+The theming system is composed of:
+1. Theme-aware design tokens that are used in your stylesheets.
+2. A `<nimble-theme-provider>` component that is added around your page contents and is configured for a theme.
+### Using the Theming System
+1. Include the `<nimble-theme-provider>` element on your page and set its `theme` attribute. The theme provider has no appearance of its own but defines tokens that are used by descendant components. It will typically be at the root of the application:
+    ```html
+    <body>
+        <nimble-theme-provider theme="light">
+            <!-- everything else -->
+        </nimble-theme-provider>
+    </body>
+    ```
+2. Include one import in your styles for the Nimble fonts. Nimble recommends using SCSS for capabilities such as build time property checking.
+    ```scss
+    @import '~@ni/nimble-components/dist/fonts';
+    ```
+3. As needed, add Nimble components as descendants of the theme provider and they will inherit the theme.
+4. As needed, import the theme-aware design tokens in each SCSS file that will leverage the tokens for other parts of your application (for colors, fonts, etc).
+    ```scss
+    @import '~@ni/nimble-components/dist/tokens';
+    .my-element {
+        font-family: $ni-nimble-font-family;
+    }
+    ```
+## Customizing
+The goal of the Nimble design system is to provide a consistent style for applications. If you find that Nimble does not expose colors, fonts, sizes, etc. that you need in an application get in touch with the Nimble squad.
 ## Contributing
 Follow the instructions in [CONTRIBUTING.md](/packages/nimble-components/CONTRIBUTING.md) to modify this library.

package/dist/esm/button/index.d.ts CHANGED Viewed

@@ -18,7 +18,16 @@ declare class Button extends FoundationButton {
      * HTML Attribute: appearance
      */
     appearance: ButtonAppearance;
+    /**
+     * Specify as 'true' to hide the text content of the button. The button will
+     * become square, and the text content will be used as the label of the button
+     * for accessibility purposes.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: content-hidden
+     */
+    contentHidden: boolean;
+    private readonly contentId;
     connectedCallback(): void;
-    defaultSlottedContentChanged(): void;
-    private checkForEmptyText;
 }

package/dist/esm/button/index.js CHANGED Viewed

@@ -7,28 +7,36 @@ import { ButtonAppearance } from './types';
  * A nimble-styled HTML button
  */
 class Button extends FoundationButton {
+    constructor() {
+        super(...arguments);
+        /**
+         * Specify as 'true' to hide the text content of the button. The button will
+         * become square, and the text content will be used as the label of the button
+         * for accessibility purposes.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: content-hidden
+         */
+        this.contentHidden = false;
+        this.contentId = 'nimble-button-content';
+    }
     connectedCallback() {
         super.connectedCallback();
         if (!this.appearance) {
             this.appearance = ButtonAppearance.Outline;
         }
-    }
-    defaultSlottedContentChanged() {
-        this.checkForEmptyText();
-    }
-    checkForEmptyText() {
-        const hasTextContent = this.defaultSlottedContent.some(x => (x.textContent ?? '').trim().length !== 0);
-        if (hasTextContent) {
-            this.control.classList.remove('empty-text');
-        }
-        else {
-            this.control.classList.add('empty-text');
-        }
+        const content = this.control.querySelector('.content');
+        content.id = this.contentId;
+        this.control.setAttribute('aria-labelledby', this.contentId);
     }
 }
 __decorate([
     attr
 ], Button.prototype, "appearance", void 0);
+__decorate([
+    attr({ attribute: 'content-hidden', mode: 'boolean' })
+], Button.prototype, "contentHidden", void 0);
 /**
  * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
  * Implements {@link @microsoft/fast-foundation#buttonTemplate}

package/dist/esm/button/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;~~IAW1B~~,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;~~IACL~~,~~CAAC;IAEM,4BAA4B;QAC/B,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC7B,CAAC;IAEO,iBAAiB;QACrB,~~MAAM,~~cAAc~~,GAAG,IAAI,CAAC,~~qBAAqB~~,CAAC,~~IAAI~~,~~CAClD,~~CAAC,~~CAAC~~,~~EAAE~~,CAAC,~~CAAC~~,CAAC,~~CAAC~~,~~WAAW~~,IAAI,~~EAAE,~~CAAC,CAAC,IAAI,~~EAAE,~~CAAC,~~MAAM~~,~~KAAK,~~CAAC,~~CACjD~~,CAAC~~;QACF~~,~~IAAI~~,~~cAAc,~~EAAE~~;YAChB~~,IAAI,CAAC,~~OAAO,CAAC,~~SAAS,CAAC,~~MAAM,~~CAAC,~~YAAY,~~CAAC,~~CAAC~~;~~SAC/C~~;~~aAAM~~;~~YACH~~,IAAI,CAAC,~~OAAO~~,~~CAAC,~~SAAS,~~CAAC~~,~~GAAG~~,~~CAAC~~,~~YAAY~~,~~CAAC~~,~~CAAC;SAC5C;IACL~~,CAAC;~~CACJ~~;~~AAvBG;IADC,IAAI;0CACgC;AAyBzC~~;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAArC;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAEZ,cAAS,GAAG,uBAAuB,CAAC;IAYzD,CAAC;IAVU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC;QACxD,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACjE,CAAC;CACJ;AA1BG;IADC,IAAI;0CACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAgBjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

package/dist/esm/button/styles.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { focusVisible } from '../utilities/style/focus';
-import { actionColorRgb, borderColorHover, borderColorRgb, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, smallDelay, standardPadding } from '../theme-provider/design-tokens';
+import { actionColorRgbPartial, borderColorHover, borderColorRgbPartial, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, iconColor, smallDelay, standardPadding } from '../theme-provider/design-tokens';
 import { appearanceBehavior } from './behaviors';
 import { ButtonAppearance } from './types';
 export const styles = css `
@@ -21,6 +21,7 @@ export const styles = css `
 /*
     Not sure why but this is needed to get buttons with icons and buttons
     without icons to align on the same line when the button is inline-flex
+    See: https://github.com/microsoft/fast/issues/5414
 */ ''}
         vertical-align: middle;
     }
@@ -52,7 +53,7 @@ export const styles = css `
         transition: box-shadow ${smallDelay};
     }
-    .control.empty-text {
+    :host([content-hidden]) .control {
         width: ${controlHeight};
         padding: 0px;
     }
@@ -88,12 +89,16 @@ export const styles = css `
         display: contents;
     }
+    :host([content-hidden]) .content {
+        display: none;
+    }
     [part='start'] {
         display: contents;
     }
     slot[name='start']::slotted(*) {
-        --icon-color: ${buttonContentFontColor};
+        ${iconColor.cssCustomProperty}: ${buttonContentFontColor};
     }
     :host([disabled]) slot[name='start']::slotted(*) {
@@ -108,7 +113,7 @@ export const styles = css `
     .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
                 .control {
                     background-color: transparent;
-                    border-color: rgba(${actionColorRgb}, 0.5);
+                    border-color: rgba(${actionColorRgbPartial}, 0.5);
                 }
                 .control:hover {
@@ -128,7 +133,7 @@ export const styles = css `
                 .control[disabled] {
                     background-color: transparent;
-                    border-color: rgba(${borderColorRgb}, 0.2);
+                    border-color: rgba(${borderColorRgbPartial}, 0.2);
                 }
             `), appearanceBehavior(ButtonAppearance.Ghost, css `
                 .control {
@@ -157,17 +162,17 @@ export const styles = css `
                 }
             `), appearanceBehavior(ButtonAppearance.Block, css `
                 .control {
-                    background-color: rgba(${borderColorRgb}, 0.1);
+                    background-color: rgba(${borderColorRgbPartial}, 0.1);
                     border-color: transparent;
                 }
                 .control:hover {
-                    background-color: rgba(${borderColorRgb}, 0.1);
+                    background-color: rgba(${borderColorRgbPartial}, 0.1);
                     border-color: ${borderColorHover};
                 }
                 .control${focusVisible} {
-                    background-color: rgba(${borderColorRgb}, 0.1);
+                    background-color: rgba(${borderColorRgbPartial}, 0.1);
                     border-color: ${borderColorHover};
                 }
@@ -177,8 +182,8 @@ export const styles = css `
                 }
                 .control[disabled] {
-                    background-color: rgba(${borderColorRgb}, 0.1);
-                    border-color: rgba(${borderColorRgb}, 0.1);
+                    background-color: rgba(${borderColorRgbPartial}, 0.1);
+                    border-color: rgba(${borderColorRgbPartial}, 0.1);
                 }
             `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/button/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/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;AACxD,OAAO,EACH,~~cAAc~~,~~EACd~~,gBAAgB,EAChB,~~cAAc~~,~~EACd~~,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE~~;;;EAGE~~,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB~~;;;;;;;;;;;;;;;;;;;;;;;wBAuBhC~~,sBAAsB;;;;;;;;;;~~CAU7C~~;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,~~cAAc~~;;;;;~~oCAKnB~~,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;yCAMhB,~~cAAc~~;;~~aAE1C~~,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;;;aAQ5C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,~~cAAc~~;;;;;~~6CAKd~~,~~cAAc~~;~~oCACvB~~,gBAAgB;;;0BAG1B,YAAY;6CACO,~~cAAc~~;~~oCACvB~~,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,~~cAAc~~;~~yCAClB~~,~~cAAc~~;;~~aAE1C~~,CACJ,CACJ,CAAC"}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/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;AACxD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,sBAAsB,EACtB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,iBAAiB,EACjB,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,sBAAsB;uBAChB,UAAU;qBACZ,eAAe;;;;;UAK1B;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,wBAAwB;;;;;;;;kBAQvB,WAAW;;;;;;;;;;;;;;qBAcR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2B9C,SAAS,CAAC,iBAAiB,KAAK,sBAAsB;;;;;;;;;;CAU/D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;yCAMhB,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;;;;;;;;aAQ5C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;6CAKrB,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;;wCAIZ,iBAAiB;;;;;6CAKZ,qBAAqB;yCACzB,qBAAqB;;aAEjD,CACJ,CACJ,CAAC"}

package/dist/esm/checkbox/styles.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
 import { focusVisible } from '../utilities/style/focus';
-import { borderColor, borderColorHover, borderColorRgb, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, labelHeight, iconSize, fontFamily, borderWidth, smallDelay } from '../theme-provider/design-tokens';
+import { borderColor, borderColorHover, borderColorRgbPartial, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, labelHeight, iconSize, fontFamily, borderWidth, smallDelay } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-flex')}
@@ -42,8 +42,8 @@ export const styles = css `
     }
     :host([disabled]) .control {
-        background-color: rgba(${borderColorRgb}, 0.1);
-        border-color: rgba(${borderColorRgb}, 0.2);
+        background-color: rgba(${borderColorRgbPartial}, 0.1);
+        border-color: rgba(${borderColorRgbPartial}, 0.2);
     }
     :host(:not([disabled]):not(:active):hover) .control {
@@ -86,7 +86,7 @@ export const styles = css `
     }
     :host([disabled]) slot[name='checked-indicator'] path {
-        fill: rgba(${borderColorRgb}, 0.3);
+        fill: rgba(${borderColorRgbPartial}, 0.3);
     }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/checkbox/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/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,WAAW,EACX,gBAAgB,EAChB,~~cAAc~~,~~EACd~~,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,WAAW,EACX,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;sBAcN,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,~~cAAc~~;~~6BAClB~~,~~cAAc~~;;;;~~wBAInB~~,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;uBAKtB,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;uBACV,WAAW;;;;;;iBAMjB,wBAAwB;;;;kBAIvB,QAAQ;iBACT,QAAQ;;;;;gBAKT,WAAW;;;;;;;;;qBASN,~~cAAc~~;;~~CAElC~~,CAAC"}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/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,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,WAAW,EACX,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;sBAcN,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;uBAKtB,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;uBACV,WAAW;;;;;;iBAMjB,wBAAwB;;;;kBAIvB,QAAQ;iBACT,QAAQ;;;;;gBAKT,WAAW;;;;;;;;;qBASN,qBAAqB;;CAEzC,CAAC"}

package/dist/esm/drawer/styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { applicationBackgroundColor, borderWidth, contentFontColor, contentFontSize, drawerHeaderFontFamily, drawerHeaderFontSize, drawerWidth, fontFamily, popupBorderColor, popupBoxShadowColor } from '../theme-provider/design-tokens';
+import { applicationBackgroundColor, borderWidth, contentFontColor, contentFontSize, drawerHeaderFontFamily, drawerHeaderFontSize, drawerWidth, fontFamily, popupBorderColor, popupBoxShadowColor, standardPadding } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('block')}
@@ -94,19 +94,19 @@ export const styles = css `
 */ ''}
     ::slotted(header) {
-        padding: var(--standard-padding);
+        padding: ${standardPadding};
         font-family: ${drawerHeaderFontFamily};
         font-size: ${drawerHeaderFontSize};
     }
     ::slotted(section) {
-        padding: var(--standard-padding);
+        padding: ${standardPadding};
         grid-row: 2;
         overflow-y: auto;
     }
     ::slotted(footer) {
-        padding: var(--standard-padding);
+        padding: ${standardPadding};
         display: flex;
         justify-content: flex-end;
         grid-row: 3;

package/dist/esm/drawer/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,mBAAmB,~~EACtB~~,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;uBASC,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgC3B,CAAA,8DAA+D,EAAE;;;;sBAIjD,gBAAgB;;;;;;;;;;;;;;iBAcrB,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP~~;;;;uBAImB~~,sBAAsB;qBACxB,oBAAoB~~;;;;;;;;;;;;;;sBAcnB~~,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;uBASC,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgC3B,CAAA,8DAA+D,EAAE;;;;sBAIjD,gBAAgB;;;;;;;;;;;;;;iBAcrB,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;uBACX,sBAAsB;qBACxB,oBAAoB;;;;mBAItB,eAAe;;;;;;mBAMf,eAAe;;;;sBAIZ,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}

package/dist/esm/icon-base/styles.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { contentFontColor, iconSize, warningColor, failColor, passColor } from '../theme-provider/design-tokens';
+import { contentFontColor, iconSize, warningColor, failColor, passColor, iconColor } from '../theme-provider/design-tokens';
 export const styles = css `
     ${display('inline-flex')}
@@ -9,7 +9,7 @@ export const styles = css `
         user-select: none;
         width: ${iconSize};
         height: ${iconSize};
-        --icon-color: ${contentFontColor};
+        ${iconColor.cssCustomProperty}: ${contentFontColor};
     }
     .icon {
@@ -18,19 +18,19 @@ export const styles = css `
     }
     :host(.fail) {
-        --icon-color: ${failColor};
+        ${iconColor.cssCustomProperty}: ${failColor};
     }
     :host(.warning) {
-        --icon-color: ${warningColor};
+        ${iconColor.cssCustomProperty}: ${warningColor};
     }
     :host(.pass) {
-        --icon-color: ${passColor};
+        ${iconColor.cssCustomProperty}: ${passColor};
     }
     .icon svg {
-        fill: var(--icon-color);
+        fill: ${iconColor};
         width: 100%;
         height: 100%;
     }

package/dist/esm/icon-base/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;~~wBACF~~,gBAAgB;;;;;;;;;~~wBAShB~~,SAAS;;;;~~wBAIT~~,YAAY;;;;~~wBAIZ~~,SAAS~~;;;;;;;;CAQhC~~,CAAC"}
1	+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,gBAAgB,EAChB,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;UAChB,SAAS,CAAC,iBAAiB,KAAK,gBAAgB;;;;;;;;;UAShD,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;UAIzC,SAAS,CAAC,iBAAiB,KAAK,YAAY;;;;UAI5C,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;gBAInC,SAAS;;;;CAIxB,CAAC"}

package/dist/esm/icon-base/template.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { html } from '@microsoft/fast-element';
 export const template = html `
-    <template slot="start">
+    <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;

package/dist/esm/nimble-components/src/button/behaviors.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import type { Behavior, ElementStyles } from '@microsoft/fast-element';
+import type { ButtonAppearance } from './types';
+/**
+ * Behavior that will conditionally apply a stylesheet based on the element's
+ * appearance property
+ *
+ * @param value - The value of the appearance property
+ * @param styles - The styles to be applied when condition matches
+ *
+ * @public
+ */
+export declare function appearanceBehavior(value: ButtonAppearance, styles: ElementStyles): Behavior;

package/dist/esm/nimble-components/src/button/index.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { Button as FoundationButton } from '@microsoft/fast-foundation';
+import { ButtonAppearance } from './types';
+export type { Button };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-button': Button;
+    }
+}
+/**
+ * A nimble-styled HTML button
+ */
+declare class Button extends FoundationButton {
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: ButtonAppearance;
+    /**
+     * Specify as 'true' to hide the text content of the button. The button will
+     * become square, and the text content will be used as the label of the button
+     * for accessibility purposes.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: content-hidden
+     */
+    contentHidden: boolean;
+    private readonly contentId;
+    connectedCallback(): void;
+}

package/dist/esm/nimble-components/src/button/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/button/types.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+/**
+ * Types of button appearance.
+ * @public
+ */
+import type { Button } from '@microsoft/fast-foundation';
+export declare type ButtonAppearanceAttribute = 'outline' | 'ghost' | 'block';
+export declare enum ButtonAppearance {
+    Outline = "outline",
+    Ghost = "ghost",
+    Block = "block"
+}
+export declare type ButtonType = Button['type'];

package/dist/esm/nimble-components/src/checkbox/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
+export type { Checkbox };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-checkbox': Checkbox;
+    }
+}
+/**
+ * A nimble-styled checkbox control.
+ */
+declare class Checkbox extends FoundationCheckbox {
+}

package/dist/esm/nimble-components/src/checkbox/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/drawer/animations.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+export declare const animationConfig: {
+    slideLeftKeyframes: Keyframe[];
+    slideRightKeyframes: Keyframe[];
+    fadeOverlayKeyframes: Keyframe[];
+    slideInOptions: {
+        duration: number;
+        easing: string;
+    };
+    slideOutOptions: {
+        duration: number;
+        easing: string;
+        direction: string;
+    };
+};

package/dist/esm/nimble-components/src/drawer/index.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import { Dialog as FoundationDialog } from '@microsoft/fast-foundation';
+import { DrawerLocation, DrawerState } from './types';
+export type { Drawer };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-drawer': Drawer;
+    }
+}
+/**
+ * Drawer/Sidenav control. Shows content in a panel on the left / right side of the screen,
+ * which animates to be visible with a slide-in / slide-out animation.
+ * Configured via 'location', 'state', 'modal', 'preventDismiss' properties.
+ */
+declare class Drawer extends FoundationDialog {
+    location: DrawerLocation;
+    state: DrawerState;
+    /**
+     * True to prevent dismissing the drawer when the overlay outside the drawer is clicked.
+     * Only applicable when 'modal' is set to true (i.e. when the overlay is used).
+     * HTML Attribute: prevent-dismiss
+     */
+    preventDismiss: boolean;
+    private readonly propertiesToWatch;
+    private propertyChangeNotifier?;
+    private animationDurationMilliseconds;
+    private animationGroup?;
+    private animationsEnabledChangedHandler?;
+    private propertyChangeSubscriber?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    hide(): void;
+    dismiss(): void;
+    private onPropertyChange;
+    private onHiddenChanged;
+    private onLocationChanged;
+    private onStateChanged;
+    private updateAnimationDuration;
+    private animateOpening;
+    private animateClosing;
+    private animateOpenClose;
+    private cancelCurrentAnimation;
+}

package/dist/esm/nimble-components/src/drawer/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/drawer/types.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export declare type DrawerLocationAttribute = 'left' | 'right';
+export declare enum DrawerLocation {
+    Left = "left",
+    Right = "right"
+}
+export declare type DrawerStateAttribute = 'opening' | 'opened' | 'closing' | 'closed';
+export declare enum DrawerState {
+    Opening = "opening",
+    Opened = "opened",
+    Closing = "closing",
+    Closed = "closed"
+}

package/dist/esm/nimble-components/src/icon-base/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { NimbleIcon } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+/**
+ * The base class for icon components
+ */
+export declare class Icon extends FoundationElement {
+    icon: NimbleIcon;
+    constructor(icon: NimbleIcon);
+}
+declare type IconClass = typeof Icon;
+export declare const registerIcon: (baseName: string, iconClass: IconClass) => void;
+export {};

package/dist/esm/nimble-components/src/icon-base/styles.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/nimble-components/src/icon-base/template.d.ts ADDED Viewed

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

package/dist/esm/nimble-components/src/icon-base/types.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/**
+ * Predefined icon status states
+ * @public
+ */
+export declare type IconStatusAttribute = 'fail' | 'warning' | 'pass' | 'regular';
+export declare enum IconStatus {
+    Fail = "fail",
+    Warning = "warning",
+    Pass = "pass",
+    Regular = "regular"
+}

package/dist/esm/nimble-components/src/icons/access-control.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-access-control-icon': AccessControlIcon;
+    }
+}
+/**
+ * The icon component for the 'access-control' icon
+ */
+export declare class AccessControlIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/admin.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-admin-icon': AdminIcon;
+    }
+}
+/**
+ * The icon component for the 'admin' icon
+ */
+export declare class AdminIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/administration.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-administration-icon': AdministrationIcon;
+    }
+}
+/**
+ * The icon component for the 'administration' icon
+ */
+export declare class AdministrationIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/all-icons.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+export { AccessControlIcon } from './access-control';
+export { AdminIcon } from './admin';
+export { AdministrationIcon } from './administration';
+export { CheckIcon } from './check';
+export { CustomApplicationsIcon } from './custom-applications';
+export { DeleteIcon } from './delete';
+export { FailIcon } from './fail';
+export { LoginIcon } from './login';
+export { LogoutIcon } from './logout';
+export { ManagedSystemsIcon } from './managed-systems';
+export { MeasurementDataAnalysisIcon } from './measurement-data-analysis';
+export { SettingsIcon } from './settings';
+export { SucceededIcon } from './succeeded';
+export { TestInsightsIcon } from './test-insights';
+export { UtilitiesIcon } from './utilities';

package/dist/esm/nimble-components/src/icons/check.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-check-icon': CheckIcon;
+    }
+}
+/**
+ *  The icon component for the 'check' icon
+ */
+export declare class CheckIcon extends Icon {
+    constructor();
+}

package/dist/esm/nimble-components/src/icons/custom-applications.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { Icon } from '../icon-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-custom-applications-icon': CustomApplicationsIcon;
+    }
+}
+/**
+ * The icon component for the 'custom-applications' icon
+ */
+export declare class CustomApplicationsIcon extends Icon {
+    constructor();
+}