@ni/nimble-components 7.0.1 → 7.2.0

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

@@ -28,6 +28,4 @@ declare class Button extends FoundationButton {
      * HTML Attribute: content-hidden
      */
     contentHidden: boolean;
-    private readonly contentId;
-    connectedCallback(): void;
 }

package/dist/esm/button/index.js

@@ -27,13 +27,6 @@ class Button extends FoundationButton {
          * HTML Attribute: content-hidden
          */
         this.contentHidden = false;
-        this.contentId = 'nimble-button-content';
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        const content = this.control.querySelector('.content');
-        content.id = this.contentId;
-        this.control.setAttribute('aria-labelledby', this.contentId);
     }
 }
 __decorate([

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

@@ -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;IAArC;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAEZ,cAAS,GAAG,uBAAuB,CAAC;IAQzD,CAAC;IANmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,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;AAtBG;IADC,IAAI;0CAC0D;AAY/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAYjC;;;;;;;;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"}
+{"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;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IACjC,CAAC;CAAA;AAbG;IADC,IAAI;0CAC0D;AAY/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAGjC;;;;;;;;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/nimble-components/src/button/index.d.ts

@@ -28,6 +28,4 @@ declare class Button extends FoundationButton {
      * HTML Attribute: content-hidden
      */
     contentHidden: boolean;
-    private readonly contentId;
-    connectedCallback(): void;
 }

package/dist/esm/nimble-components/src/switch/index.d.ts

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

package/dist/esm/nimble-components/src/switch/styles.d.ts

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

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

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

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

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

package/dist/esm/patterns/button/styles.js

@@ -88,14 +88,26 @@ export const styles = css `
     }
 
     :host([content-hidden]) .content {
-        display: none;
+        ${
+/**
+ * Hide content visually while keeping it screen reader-accessible.
+ * Source: https://webaim.org/techniques/css/invisiblecontent/#techniques
+ * See discussion here: https://github.com/microsoft/fast/issues/5740#issuecomment-1068195035
+ */
+''}
+        display: inline-block;
+        height: 1px;
+        width: 1px;
+        position: absolute;
+        margin: -1px;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(50%);
+        overflow: hidden;
+        padding: 0;
     }
 
     [part='start'] {
         display: contents;
-    }
-
-    slot[name='start']::slotted(*) {
         ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
     }
 
@@ -104,6 +116,11 @@ export const styles = css `
     }
 
     [part='end'] {
+        display: contents;
+        ${iconColor.cssCustomProperty}: ${buttonLabelFontColor};
+    }
+
+    :host([content-hidden]) [part='end'] {
         display: none;
     }
 `

package/dist/esm/patterns/button/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/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,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,oBAAoB;gBACrB,eAAe;;;;;UAKrB;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,4BAA4B;;;;;;;;kBAQ3B,WAAW;;;;;;;;;;;;;qBAaR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2B9C,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;;CAU7D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;yCAKZ,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;;;aAOxC,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;6CAKrB,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;6CAIR,qBAAqB;;;aAGrD,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/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,6BAA6B,CAAC;AAC3D,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,4BAA4B,EAC5B,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;kBAIV,aAAa;iBACd,oBAAoB;gBACrB,eAAe;;;;;UAKrB;AACE;;;;EAIE,CAAC,EACP;;;;;iBAKS,4BAA4B;;;;;;;;kBAQ3B,WAAW;;;;;;;;;;;;;qBAaR,eAAe;iCACH,UAAU;;;;iBAI1B,aAAa;;;;;;;;;;;kCAWI,WAAW,IAAI,gBAAgB;;;;cAInD,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;;;;;;;UAmB9C;AACE;;;;GAIG;AACH,EACJ;;;;;;;;;;;;;;UAcE,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;UASpD,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;CAM7D;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;yCAG0B,qBAAqB;;;;;oCAK1B,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;yCAKZ,qBAAqB;;aAEjD,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;;;;;;oCAQqB,gBAAgB;;;0BAG1B,YAAY;;oCAEF,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;;;;aAOxC,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;6CAKrB,qBAAqB;oCAC9B,gBAAgB;;;0BAG1B,YAAY;6CACO,qBAAqB;oCAC9B,gBAAgB;;;;wCAIZ,iBAAiB;oCACrB,iBAAiB;;;;6CAIR,qBAAqB;;;aAGrD,CACJ,CACJ,CAAC"}

package/dist/esm/switch/index.d.ts

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

package/dist/esm/switch/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A nimble-styled switch control.
+ */
+class Switch extends FoundationSwitch {
+}
+const nimbleSwitch = Switch.compose({
+    baseClass: FoundationSwitch,
+    baseName: 'switch',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
+//# sourceMappingURL=index.js.map

package/dist/esm/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;CAAG;AAExC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

package/dist/esm/switch/styles.d.ts

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

package/dist/esm/switch/styles.js

@@ -0,0 +1,174 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { Black15, Black7, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { borderHoverColor, borderWidth, buttonLabelDisabledFontColor, buttonLabelFont, buttonLabelFontColor, controlHeight, controlLabelDisabledFontColor, controlLabelFont, controlLabelFontColor, fillHoverColor, smallDelay } from '../theme-provider/design-tokens';
+import { hexToRgbaCssColor } from '../utilities/style/colors';
+import { focusVisible } from '../utilities/style/focus';
+import { themeBehavior } from '../utilities/style/theme';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        outline: none;
+        font: ${buttonLabelFont};
+        color: ${buttonLabelFontColor};
+        flex-direction: column;
+        cursor: pointer;
+        --ni-private-switch-height: 24px;
+        --ni-private-switch-indicator-size: 16px;
+        padding-bottom: calc(
+            ${controlHeight} - var(--ni-private-switch-height)
+        );
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        color: ${buttonLabelDisabledFontColor};
+    }
+
+    .label {
+        color: ${controlLabelFontColor};
+        font: ${controlLabelFont};
+    }
+
+    :host([disabled]) .label {
+        color: ${controlLabelDisabledFontColor};
+    }
+
+    .label__hidden {
+        display: none;
+        visibility: hidden;
+    }
+
+    .switch-container {
+        display: flex;
+        align-items: center;
+    }
+
+    slot[name='unchecked-message']::slotted(*) {
+        margin-inline-end: 8px;
+    }
+
+    .switch {
+        display: flex;
+        height: var(--ni-private-switch-height);
+        width: calc(var(--ni-private-switch-height) * 2);
+        box-sizing: border-box;
+        background-color: ${fillHoverColor};
+        border-radius: calc(var(--ni-private-switch-height) / 2);
+        align-items: center;
+        border: calc(${borderWidth} * 2) solid transparent;
+    }
+
+    :host([disabled]) .switch {
+        background-color: var(--ni-private-switch-background-disabled-color);
+    }
+
+    :host(${focusVisible}) .switch {
+        border-color: ${borderHoverColor};
+    }
+
+    .checked-indicator-spacer {
+        flex-grow: 0;
+        transition: flex-grow ${smallDelay} ease-in-out;
+    }
+
+    :host([aria-checked='true']) .checked-indicator-spacer {
+        flex-grow: 1;
+        transition: flex-grow ${smallDelay} ease-in-out;
+    }
+
+    .checked-indicator {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--ni-private-switch-indicator-background-color);
+        box-sizing: border-box;
+        width: var(--ni-private-switch-indicator-size);
+        height: var(--ni-private-switch-indicator-size);
+        border-radius: calc(var(--ni-private-switch-indicator-size) / 2);
+        margin: calc(
+            calc(
+                    var(--ni-private-switch-height) -
+                        var(--ni-private-switch-indicator-size)
+                ) / 2
+        );
+        border: ${borderWidth} solid
+            var(--ni-private-switch-indicator-border-color);
+    }
+
+    :host(:hover) .checked-indicator {
+        border: calc(${borderWidth} * 2) solid ${borderHoverColor};
+    }
+
+    :host([disabled]) .checked-indicator {
+        background-color: var(
+            --ni-private-switch-indicator-background-disabled-color
+        );
+        border: ${borderWidth} solid
+            var(--ni-private-switch-indicator-border-disabled-color);
+    }
+
+    :host(${focusVisible}) .checked-indicator {
+        border: ${borderWidth} solid ${borderHoverColor};
+    }
+
+    .checked-indicator-inner {
+        width: calc(var(--ni-private-switch-indicator-size) / 2);
+        height: calc(var(--ni-private-switch-indicator-size) / 2);
+        border-radius: calc(var(--ni-private-switch-indicator-size) / 4);
+        background-color: var(--ni-private-switch-indicator-border-color);
+        opacity: 0;
+        transition: opacity ${smallDelay} ease-in-out;
+    }
+
+    :host([disabled]) .checked-indicator-inner {
+        background-color: var(
+            --ni-private-switch-indicator-border-disabled-color
+        );
+    }
+
+    :host([aria-checked='true']) .checked-indicator-inner {
+        opacity: 1;
+        transition: opacity ${smallDelay} ease-in-out;
+    }
+
+    slot[name='checked-message']::slotted(*) {
+        margin-inline-start: 8px;
+    }
+
+    @media (prefers-reduced-motion) {
+        .checked-indicator-inner,
+        .checked-indicator-spacer {
+            transition-duration: 0s;
+        }
+    }
+`.withBehaviors(themeBehavior(css `
+            ${'' /* Light theme */}
+            :host {
+                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.07)};
+                --ni-private-switch-indicator-background-color: ${White};
+                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(White, 0.1)};
+                --ni-private-switch-indicator-border-color: ${Black91};
+                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black91, 0.3)};
+            }
+        `, css `
+            ${'' /* Dark theme */}
+            :host {
+                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(Black15, 0.07)};
+                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(Black91, 0.3)};
+                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(Black91, 0.1)};
+                --ni-private-switch-indicator-border-color: ${Black7};
+                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(Black7, 0.3)};
+            }
+        `, css `
+            ${'' /* Color theme */}
+            :host {
+                --ni-private-switch-background-disabled-color: ${hexToRgbaCssColor(White, 0.07)};
+                --ni-private-switch-indicator-background-color: ${hexToRgbaCssColor(White, 0.1)};
+                --ni-private-switch-indicator-background-disabled-color: ${hexToRgbaCssColor(White, 0.1)};
+                --ni-private-switch-indicator-border-color: ${White};
+                --ni-private-switch-indicator-border-disabled-color: ${hexToRgbaCssColor(White, 0.3)};
+            }
+        `));
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,gBAAgB,EAChB,WAAW,EACX,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,aAAa,EACb,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;gBAIZ,eAAe;iBACd,oBAAoB;;;;;;cAMvB,aAAa;;;;;;iBAMV,4BAA4B;;;;iBAI5B,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;;;;;;;;;4BAsBlB,cAAc;;;uBAGnB,WAAW;;;;;;;YAOtB,YAAY;wBACA,gBAAgB;;;;;gCAKR,UAAU;;;;;gCAKV,UAAU;;;;;;;;;;;;;;;;;;kBAkBxB,WAAW;;;;;uBAKN,WAAW,eAAe,gBAAgB;;;;;;;kBAO/C,WAAW;;;;YAIjB,YAAY;kBACN,WAAW,UAAU,gBAAgB;;;;;;;;;8BASzB,UAAU;;;;;;;;;;;8BAWV,UAAU;;;;;;;;;;;;;CAavC,CAAC,aAAa,CACP,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;iEAE+B,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,KAAK;2EACI,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,OAAO;uEACE,iBAAiB,CACxE,OAAO,EACP,GAAG,CACN;;SAEJ,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;iEAEgC,iBAAiB,CAClE,OAAO,EACP,IAAI,CACP;kEACqD,iBAAiB,CACnE,OAAO,EACP,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,OAAO,EACP,GAAG,CACN;8DACiD,MAAM;uEACG,iBAAiB,CACxE,MAAM,EACN,GAAG,CACN;;SAEJ,EACG,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;iEAE+B,iBAAiB,CAClE,KAAK,EACL,IAAI,CACP;kEACqD,iBAAiB,CACnE,KAAK,EACL,GAAG,CACN;2EAC8D,iBAAiB,CAC5E,KAAK,EACL,GAAG,CACN;8DACiD,KAAK;uEACI,iBAAiB,CACxE,KAAK,EACL,GAAG,CACN;;SAEJ,CACA,CACJ,CAAC"}

package/dist/esm/switch/template.d.ts

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

package/dist/esm/switch/template.js

@@ -0,0 +1,38 @@
+import { html, slotted } from '@microsoft/fast-element';
+// prettier-ignore
+export const template = html `
+    <template
+        role="switch"
+        aria-checked="${x => x.checked}"
+        aria-disabled="${x => x.disabled}"
+        aria-readonly="${x => x.readOnly}"
+        tabindex="${x => (x.disabled ? null : 0)}"
+        @keypress="${(x, c) => x.keypressHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+        class="${x => (x.checked ? 'checked' : '')}"
+    >
+        <label
+            part="label"
+            class="${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}"
+        >
+            <slot ${slotted('defaultSlottedNodes')}></slot>
+        </label>
+        <div class="switch-container">
+            <span class="status-message unchecked-message" part="unchecked-message">
+                <slot name="unchecked-message"></slot>
+            </span>
+            <div part="switch" class="switch">
+                <slot name="switch">
+                    <span class="checked-indicator-spacer"></span>
+                    <span class="checked-indicator" part="checked-indicator">
+                        <span class="checked-indicator-inner">
+                    </span>
+                </slot>
+            </div>
+            <span class="status-message checked-message" part="checked-message">
+                <slot name="checked-message"></slot>
+            </span>
+        </div>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/switch/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/switch/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGxD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAQ;;;wBAGZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;yBACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;qBAC3B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;kBACxD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;iBAChD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;;;;qBAI7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;oBAEvE,OAAO,CAAC,qBAAqB,CAAC;;;;;;;;;;;;;;;;;;;CAmBjD,CAAC"}

package/dist/esm/toggle-button/index.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { attr } from '@microsoft/fast-element';
-import { DesignSystem, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
+import { applyMixins, DesignSystem, StartEnd, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
 import { ButtonAppearance } from '../patterns/button/types';
@@ -36,6 +36,7 @@ __decorate([
 __decorate([
     attr({ attribute: 'content-hidden', mode: 'boolean' })
 ], ToggleButton.prototype, "contentHidden", void 0);
+applyMixins(ToggleButton, StartEnd);
 const nimbleToggleButton = ToggleButton.compose({
     baseName: 'toggle-button',
     template,

package/dist/esm/toggle-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAU5D;;GAEG;AACH,MAAM,YAAa,SAAQ,gBAAgB;IAA3C;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAIjC,CAAC;CAAA;AAhBG;IADC,IAAI;gDAC0D;AAY/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAMjC,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,CAAgB;IAC3D,QAAQ,EAAE,eAAe;IACzB,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,kBAAkB,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EAEX,YAAY,EACZ,QAAQ,EACR,MAAM,IAAI,gBAAgB,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAU5D;;GAEG;AACH,MAAM,YAAa,SAAQ,gBAAgB;IAA3C;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAIjC,CAAC;CAAA;AAhBG;IADC,IAAI;gDAC0D;AAY/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAKjC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;AAEpC,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,CAAgB;IAC3D,QAAQ,EAAE,eAAe;IACzB,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,kBAAkB,EAAE,CAAC,CAAC"}

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

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

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

@@ -1,12 +1,12 @@
 import { html, ref } from '@microsoft/fast-element';
-export const template = html `
+import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
+export const template = (context, definition) => html `
     <div
         role="button"
         part="control"
         aria-pressed="${(x) => x.checked}"
         aria-disabled="${(x) => x.disabled}"
         aria-readonly="${(x) => x.readOnly}"
-        aria-labelledby="nimble-toggle-button-content"
         tabindex="${(x) => (x.disabled ? null : 0)}"
         @keypress="${(x, c) => x.keypressHandler(c.event)}"
         @click="${(x, c) => x.clickHandler(c.event)}"
@@ -14,12 +14,11 @@ export const template = html `
         ?disabled="${x => x.disabled}"
         ${ref('control')}
     >
-        <span part="start" class="start">
-            <slot name="start"></slot>
-        </span>
-        <span class="content" part="content" id="nimble-toggle-button-content">
+        ${startSlotTemplate(context, definition)}
+        <span class="content" part="content">
             <slot></slot>
         </span>
+        ${endSlotTemplate(context, definition)}
     </div>
 `;
 //# sourceMappingURL=template.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/toggle-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAGpD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAc;;;;wBAIlB,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;yBAC7B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;yBAC/B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;;oBAEpC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;qBAC3C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;kBACxD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;yBACxC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;qBACrD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;UAC1B,GAAG,CAAC,SAAS,CAAC;;;;;;;;;CASvB,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/toggle-button/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EACH,eAAe,EACf,iBAAiB,EAGpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAc;;;;wBAIvB,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;yBAC7B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;yBAC/B,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACpC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;qBAC3C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;kBACxD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;yBACxC,CAAC,CAAe,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;qBACrD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;UAC1B,GAAG,CAAC,SAAS,CAAC;;UAEd,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;UAItC,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;CAE7C,CAAC"}

package/package.json

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