@ni/nimble-components 2.0.0 → 2.1.1

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

@@ -0,0 +1,22 @@
+import { TextArea as FoundationTextArea } from '@microsoft/fast-foundation';
+import { TextAreaAppearance } from './types';
+export type { TextArea };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-text-area': TextArea;
+    }
+}
+/**
+ * A nimble-styed HTML text area
+ */
+declare class TextArea extends FoundationTextArea {
+    /**
+     * The appearance the text area should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: TextAreaAppearance;
+    connectedCallback(): void;
+}

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

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

package/dist/esm/nimble-components/src/text-area/types.d.ts

@@ -0,0 +1,8 @@
+import { TextAreaResize } from '@microsoft/fast-foundation';
+export { TextAreaResize };
+export declare type TextAreaResizeAttribute = `${TextAreaResize}`;
+export declare enum TextAreaAppearance {
+    Outline = "outline",
+    Block = "block"
+}
+export declare type TextAreaAppearanceAttribute = `${TextAreaAppearance}`;

package/dist/esm/text-area/index.d.ts

@@ -0,0 +1,22 @@
+import { TextArea as FoundationTextArea } from '@microsoft/fast-foundation';
+import { TextAreaAppearance } from './types';
+export type { TextArea };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-text-area': TextArea;
+    }
+}
+/**
+ * A nimble-styed HTML text area
+ */
+declare class TextArea extends FoundationTextArea {
+    /**
+     * The appearance the text area should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: TextAreaAppearance;
+    connectedCallback(): void;
+}

package/dist/esm/text-area/index.js

@@ -0,0 +1,31 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem, TextArea as FoundationTextArea, textAreaTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { TextAreaAppearance } from './types';
+/**
+ * A nimble-styed HTML text area
+ */
+class TextArea extends FoundationTextArea {
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.appearance) {
+            this.appearance = TextAreaAppearance.Outline;
+        }
+    }
+}
+__decorate([
+    attr
+], TextArea.prototype, "appearance", void 0);
+const nimbleTextArea = TextArea.compose({
+    baseName: 'text-area',
+    baseClass: FoundationTextArea,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextArea());
+//# sourceMappingURL=index.js.map

package/dist/esm/text-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-area/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAC9B,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAU7C;;GAEG;AACH,MAAM,QAAS,SAAQ,kBAAkB;IAW9B,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,kBAAkB,CAAC,OAAO,CAAC;SAChD;IACL,CAAC;CACJ;AARG;IADC,IAAI;4CACkC;AAU3C,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,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,cAAc,EAAE,CAAC,CAAC"}

package/dist/esm/text-area/styles.d.ts

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

package/dist/esm/text-area/styles.js

@@ -0,0 +1,117 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderColorRgbPartial, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, fillColorSelectedRgbPartial, fontFamily, labelFontColor, labelFontColorDisabled, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, smallDelay } from '../theme-provider/design-tokens';
+import { appearanceBehavior } from '../utilities/style/appearance';
+import { TextAreaAppearance } from './types';
+export const styles = css `
+    ${display('inline-block')}
+
+    :host {
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        outline: none;
+        user-select: none;
+        color: ${contentFontColor};
+    }
+
+    :host([disabled]) {
+        color: ${contentFontColorDisabled};
+    }
+
+    .label {
+        display: flex;
+        color: ${labelFontColor};
+        font-family: ${labelFontFamily};
+        font-size: ${labelFontSize};
+        font-weight: ${labelFontWeight};
+        line-height: ${labelHeight};
+        text-transform: ${labelTextTransform};
+    }
+
+    :host([disabled]) .label {
+        color: ${labelFontColorDisabled};
+    }
+
+    .control {
+        -webkit-appearance: none;
+        font: inherit;
+        outline: none;
+        box-sizing: border-box;
+        position: relative;
+        color: inherit;
+        border-radius: 0px;
+        align-items: flex-end;
+        border: ${borderWidth} solid transparent;
+        padding: 8px;
+        transition: outline ${smallDelay}, border ${smallDelay};
+        resize: none;
+    }
+
+    @media (prefers-reduced-motion) {
+        .control {
+            transition-duration: 0s;
+        }
+    }
+
+    .control:hover {
+        border-color: ${borderColorHover};
+        outline: 1px solid ${borderColorHover};
+    }
+
+    .control:focus-within {
+        border-color: ${borderColorHover};
+    }
+
+    .control[readonly],
+    .control[readonly]:hover,
+    .control[readonly]:hover:focus-within,
+    .control[disabled],
+    .control[disabled]:hover {
+        border-color: rgba(${borderColorRgbPartial}, 0.1);
+        outline: none;
+    }
+
+    .control::selection {
+        color: ${labelFontColor};
+        background: rgba(${fillColorSelectedRgbPartial}, 0.3);
+    }
+
+    .control::placeholder {
+        color: ${labelFontColor};
+    }
+
+    .control[disabled]::placeholder {
+        color: ${contentFontColorDisabled};
+    }
+
+    :host([resize='both']) .control {
+        resize: both;
+    }
+    :host([resize='horizontal']) .control {
+        resize: horizontal;
+    }
+    :host([resize='vertical']) .control {
+        resize: vertical;
+    }
+`
+    // prettier-ignore
+    .withBehaviors(appearanceBehavior(TextAreaAppearance.Outline, css `
+                .control {
+                    border-color: rgba(${borderColorRgbPartial}, 0.3);
+                    background-color: transparent;
+                }
+            `), appearanceBehavior(TextAreaAppearance.Block, css `
+                .control {
+                    background-color: rgba(${borderColorRgbPartial}, 0.1);
+                }
+
+                :host([readonly]) .control {
+                    background-color: transparent;
+                }
+
+                :host([disabled]) .control {
+                    border-color: transparent;
+                    background-color: rgba(${borderColorRgbPartial}, 0.1);
+                }
+            `));
+//# sourceMappingURL=styles.js.map

package/dist/esm/text-area/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,2BAA2B,EAC3B,UAAU,EACV,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACb,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;;;;iBAIhB,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;iBAI3B,sBAAsB;;;;;;;;;;;;kBAYrB,WAAW;;8BAEC,UAAU,YAAY,UAAU;;;;;;;;;;;wBAWtC,gBAAgB;6BACX,gBAAgB;;;;wBAIrB,gBAAgB;;;;;;;;6BAQX,qBAAqB;;;;;iBAKjC,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;iBAId,wBAAwB;;;;;;;;;;;;CAYxC;IACG,kBAAkB;KACjB,aAAa,CACV,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;yCAE0B,qBAAqB;;;aAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;6CAE8B,qBAAqB;;;;;;;;;6CASrB,qBAAqB;;aAErD,CACJ,CACJ,CAAC"}

package/dist/esm/text-area/types.d.ts

@@ -0,0 +1,8 @@
+import { TextAreaResize } from '@microsoft/fast-foundation';
+export { TextAreaResize };
+export declare type TextAreaResizeAttribute = `${TextAreaResize}`;
+export declare enum TextAreaAppearance {
+    Outline = "outline",
+    Block = "block"
+}
+export declare type TextAreaAppearanceAttribute = `${TextAreaAppearance}`;

package/dist/esm/text-area/types.js

@@ -0,0 +1,8 @@
+import { TextAreaResize } from '@microsoft/fast-foundation';
+export { TextAreaResize };
+export var TextAreaAppearance;
+(function (TextAreaAppearance) {
+    TextAreaAppearance["Outline"] = "outline";
+    TextAreaAppearance["Block"] = "block";
+})(TextAreaAppearance || (TextAreaAppearance = {}));
+//# sourceMappingURL=types.js.map

package/dist/esm/text-area/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/text-area/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE5D,OAAO,EAAE,cAAc,EAAE,CAAC;AAG1B,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACnB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B"}

package/dist/esm/text-field/styles.js

@@ -21,6 +21,20 @@ export const styles = css `
         color: ${contentFontColorDisabled};
     }
 
+    .label {
+        display: flex;
+        color: ${labelFontColor};
+        font-family: ${labelFontFamily};
+        font-size: ${labelFontSize};
+        font-weight: ${labelFontWeight};
+        line-height: ${labelHeight};
+        text-transform: ${labelTextTransform};
+    }
+
+    :host([disabled]) .label {
+        color: ${labelFontColorDisabled};
+    }
+
     .root {
         box-sizing: border-box;
         position: relative;
@@ -39,38 +53,40 @@ export const styles = css `
         );
     }
 
-    :host .root:hover {
-        --ni-private-bottom-border-width: var(
-            --ni-private-hover-bottom-border-width
-        );
-    }
-
-    :host([disabled]) .root:hover {
-        --ni-private-bottom-border-width: 1px;
-    }
-
-    .root:focus-within,
-    .root:hover {
-        border-bottom-color: ${borderColorHover};
+    @media (prefers-reduced-motion) {
+        .root {
+            transition-duration: 0s;
+        }
     }
 
     :host(.invalid) .root {
         border-bottom-color: ${failColor};
     }
 
+    :host([readonly]:not([disabled])) .root {
+        border: ${borderWidth} solid rgba(${borderColorRgbPartial}, 0.1);
+        padding: 0px;
+        padding-bottom: 1px;
+        background-color: transparent;
+    }
+
     :host([disabled]) .root {
         border-color: rgba(${borderColorRgbPartial}, 0.1);
     }
 
-    :host([readonly]) .root {
-        border: none;
-        padding: ${borderWidth};
+    .root:hover {
+        --ni-private-bottom-border-width: var(
+            --ni-private-hover-bottom-border-width
+        );
+        border-bottom-color: ${borderColorHover};
     }
 
-    @media (prefers-reduced-motion) {
-        .root {
-            transition-duration: 0s;
-        }
+    :host([disabled]) .root:hover {
+        --ni-private-bottom-border-width: 1px;
+    }
+
+    .root:focus-within {
+        border-bottom-color: ${borderColorHover};
     }
 
     .control {
@@ -112,28 +128,10 @@ export const styles = css `
         opacity: 1;
     }
 
-    .control[readonly] {
-        cursor: default;
-    }
-
     .control[disabled]::placeholder {
         color: ${contentFontColorDisabled};
     }
 
-    .label {
-        display: flex;
-        color: ${labelFontColor};
-        font-family: ${labelFontFamily};
-        font-size: ${labelFontSize};
-        font-weight: ${labelFontWeight};
-        line-height: ${labelHeight};
-        text-transform: ${labelTextTransform};
-    }
-
-    :host([disabled]) .label {
-        color: ${labelFontColorDisabled};
-    }
-
     :host [part='end'] {
         display: none;
     }
@@ -166,22 +164,43 @@ export const styles = css `
             }
         `), appearanceBehavior(TextFieldAppearance.Block, css `
             .root {
-                background-color: rgba(${borderColorRgbPartial}, 0.05);
+                background-color: rgba(${borderColorRgbPartial}, 0.1);
                 --ni-private-bottom-border-width: 0px;
                 padding-top: ${borderWidth};
                 padding-left: ${borderWidth};
                 padding-right: ${borderWidth};
             }
 
-            .root:focus-within,
-            :host(.invalid) .root,
-            :host([disabled]) .root {
+            .root:focus-within {
+                --ni-private-bottom-border-width: 1px;
+            }
+
+            .root:focus-within:hover {
+                --ni-private-bottom-border-width: var(
+                    --ni-private-hover-bottom-border-width
+                );
+            }
+
+            :host(.invalid) .root {
                 --ni-private-bottom-border-width: 1px;
             }
 
-            :host([disabled]) .root,
-            :host([readonly]) .root {
-                background-color: transparent;
+            :host(.invalid) .root:hover {
+                --ni-private-bottom-border-width: var(
+                    --ni-private-hover-bottom-border-width
+                );
+            }
+
+            :host([disabled]) .root {
+                background-color: rgba(${borderColorRgbPartial}, 0.07);
+            }
+
+            :host([disabled]) .root:hover {
+                --ni-private-bottom-border-width: 0px;
+            }
+
+            :host(.invalid[disabled]) .root {
+                --ni-private-bottom-border-width: 1px;
             }
         `), appearanceBehavior(TextFieldAppearance.Outline, css `
             .root {

package/dist/esm/text-field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;;;;;uBASlB,UAAU;oCACG,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;;;;;;;;;;;;;;;;;;;+BAoBvB,gBAAgB;;;;+BAIhB,SAAS;;;;6BAIX,qBAAqB;;;;;mBAK/B,WAAW;;;;;;;;;;;;;;;;;cAiBhB,aAAa,MAAM,WAAW;;;;;;6BAMf,eAAe;8BACd,eAAe;;;;;;;;;;;;iBAY5B,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;;;;;iBAYd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;iBAI3B,sBAAsB;;;;;;;;;;;;;;;kBAerB,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;SAanC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;SAGlC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;iBAI3B,sBAAsB;;;;;;;;;uBAShB,UAAU;oCACG,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;;;;;;;;;;;;;;+BAevB,SAAS;;;;kBAItB,WAAW,eAAe,qBAAqB;;;;;;;6BAOpC,qBAAqB;;;;;;;+BAOnB,gBAAgB;;;;;;;;+BAQhB,gBAAgB;;;;;;;;;;;cAWjC,aAAa,MAAM,WAAW;;;;;;6BAMf,eAAe;8BACd,eAAe;;;;;;;;;;;;iBAY5B,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;iBAQd,wBAAwB;;;;;;;;;;;;;;;kBAevB,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;;;;;;;;;;;;yCAwBH,qBAAqB;;;;;;;;;;SAUrD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;SAGlC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}

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

@@ -37,7 +37,10 @@ __decorate([
 const nimbleToggleButton = ToggleButton.compose({
     baseName: 'toggle-button',
     template,
-    styles
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleToggleButton());
 //# sourceMappingURL=index.js.map

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;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAUjC,CAAC;IANU,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;CACJ;AAtBG;IADC,IAAI;gDACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAYjC,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,CAAgB;IAC3D,QAAQ,EAAE,eAAe;IACzB,QAAQ;IACR,MAAM;CACT,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,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;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAUjC,CAAC;IANU,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;CACJ;AAtBG;IADC,IAAI;gDACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAYjC,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run build-components && npm run generate-scss && npm run build-storybook",
@@ -46,7 +46,7 @@
     "@microsoft/fast-element": "^1.7.0",
     "@microsoft/fast-foundation": "^2.28.0 <2.29.0",
     "@microsoft/fast-web-utilities": "^5.1.0",
-    "@ni/nimble-tokens": "^1.0.0",
+    "@ni/nimble-tokens": "^1.1.0",
     "hex-rgb": "^5.0.0"
   },
   "devDependencies": {