@ni/nimble-components 1.0.0-beta.100 → 1.0.0-beta.101

package/dist/esm/tabs-toolbar/styles.js

@@ -1,23 +1,23 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { borderColorRgb, borderWidth, contentFontColor, contentFontSize, controlHeight, fontFamily, standardPadding } from '../theme-provider/design-tokens';
-export const styles = css `
-    ${display('flex')}
-
-    :host {
-        align-items: center;
-        height: ${controlHeight};
-        box-sizing: border-box;
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
-        color: ${contentFontColor};
-    }
-
-    .separator {
-        display: inline-block;
-        height: 24px;
-        border-left: calc(${borderWidth} * 2) solid rgba(${borderColorRgb}, 0.3);
-        margin: calc(${standardPadding} / 4) calc(${standardPadding} / 2);
-    }
-`;
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderColorRgb, borderWidth, contentFontColor, contentFontSize, controlHeight, fontFamily, standardPadding } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('flex')}
+
+    :host {
+        align-items: center;
+        height: ${controlHeight};
+        box-sizing: border-box;
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        color: ${contentFontColor};
+    }
+
+    .separator {
+        display: inline-block;
+        height: 24px;
+        border-left: calc(${borderWidth} * 2) solid rgba(${borderColorRgb}, 0.3);
+        margin: calc(${standardPadding} / 4) calc(${standardPadding} / 2);
+    }
+`;
 //# sourceMappingURL=styles.js.map

package/dist/esm/tabs-toolbar/template.d.ts

@@ -1 +1 @@
-export declare const template: import("@microsoft/fast-element").ViewTemplate<any, any>;
+export declare const template: import("@microsoft/fast-element").ViewTemplate<any, any>;

package/dist/esm/tabs-toolbar/template.js

@@ -1,8 +1,8 @@
-import { html } from '@microsoft/fast-element';
-export const template = html `
-    <template slot="end">
-        <div class="separator"></div>
-        <slot></slot>
-    </template>
-`;
+import { html } from '@microsoft/fast-element';
+export const template = html `
+    <template slot="end">
+        <div class="separator"></div>
+        <slot></slot>
+    </template>
+`;
 //# sourceMappingURL=template.js.map

package/dist/esm/testing/dom-next-update.d.ts

@@ -1,4 +1,4 @@
-/**
- * Allows test code to wait for the render update cycle of the components.
- */
-export declare const domNextUpdate: () => Promise<void>;
+/**
+ * Allows test code to wait for the render update cycle of the components.
+ */
+export declare const domNextUpdate: () => Promise<void>;

package/dist/esm/testing/dom-next-update.js

@@ -1,6 +1,6 @@
-import { DOM } from '@microsoft/fast-element';
-/**
- * Allows test code to wait for the render update cycle of the components.
- */
-export const domNextUpdate = async () => DOM.nextUpdate();
+import { DOM } from '@microsoft/fast-element';
+/**
+ * Allows test code to wait for the render update cycle of the components.
+ */
+export const domNextUpdate = async () => DOM.nextUpdate();
 //# sourceMappingURL=dom-next-update.js.map

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

@@ -1,6 +1,6 @@
-import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
-/**
- * A nimble-styed HTML text input
- */
-declare type TextField = FoundationTextField;
-export type { TextField };
+import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
+/**
+ * A nimble-styed HTML text input
+ */
+declare type TextField = FoundationTextField;
+export type { TextField };

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

@@ -1,14 +1,14 @@
-import { DesignSystem, TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation';
-import { statusAlarmActive16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
-import { styles } from './styles';
-const nimbleTextField = FoundationTextField.compose({
-    baseName: 'text-field',
-    template,
-    styles,
-    shadowOptions: {
-        delegatesFocus: true
-    },
-    end: statusAlarmActive16X16.data
-});
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
+import { DesignSystem, TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation';
+import { statusAlarmActive16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { styles } from './styles';
+const nimbleTextField = FoundationTextField.compose({
+    baseName: 'text-field',
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    },
+    end: statusAlarmActive16X16.data
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,142 +1,142 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { borderColorRgb, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgb, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, passwordRevealFilter, smallDelay } from '../theme-provider/design-tokens';
-export const styles = css `
-    ${display('inline-block')}
-
-    :host {
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
-        outline: none;
-        user-select: none;
-        color: ${contentFontColor};
-        height: calc(${labelHeight} + ${controlHeight});
-    }
-
-    :host([disabled]) {
-        color: ${contentFontColorDisabled};
-    }
-
-    .root {
-        box-sizing: border-box;
-        position: relative;
-        display: flex;
-        flex-direction: row;
-        border-radius: 0px;
-        font-family: ${fontFamily};
-        border-bottom: ${borderWidth} solid rgba(${borderColorRgb}, 0.3);
-        padding-bottom: 1px;
-        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
-        align-items: flex-end;
-    }
-
-    @media (prefers-reduced-motion) {
-        .root {
-            transition-duration: 0s;
-        }
-    }
-
-    .root:hover {
-        border-bottom: 2px solid ${borderColorHover};
-        padding-bottom: 0px;
-    }
-
-    :host(.invalid) .root {
-        border-bottom: ${borderWidth} solid ${failColor};
-    }
-
-    :host(.invalid) .root:hover {
-        border-bottom: 2px solid ${failColor};
-        padding-bottom: 0px;
-    }
-
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
-        padding-bottom: 1px;
-    }
-
-    :host([readonly]) .root,
-    :host([readonly]) .root:hover {
-        border: none;
-    }
-
-    .control {
-        -webkit-appearance: none;
-        font: inherit;
-        background: transparent;
-        color: inherit;
-        height: 28px;
-        width: 100%;
-        margin-top: auto;
-        margin-bottom: auto;
-        border: none;
-    }
-
-    .control::-ms-reveal {
-        filter: ${passwordRevealFilter};
-    }
-
-    .control:hover,
-    .control:focus,
-    .control:disabled,
-    .control:active {
-        outline: none;
-    }
-
-    .control::selection {
-        color: ${labelFontColor};
-        background: rgba(${fillColorSelectedRgb}, 0.3);
-    }
-
-    .control::placeholder {
-        color: ${labelFontColor};
-    }
-
-    .control:not([readonly]):focus-within::placeholder {
-        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 [part='end'] {
-        display: none;
-    }
-
-    :host(.invalid) [part='end'] {
-        align-self: center;
-        display: inline-flex;
-        padding-left: 8px;
-        padding-right: 8px;
-    }
-
-    :host(.invalid) [part='end'] svg {
-        height: ${iconSize};
-        width: ${iconSize};
-    }
-
-    :host(.invalid) [part='end'] path {
-        fill: ${failColor};
-    }
-
-    :host([disabled]) [part='end'] path {
-        fill: ${contentFontColorDisabled};
-    }
-`;
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderColorRgb, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, failColor, fillColorSelectedRgb, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, passwordRevealFilter, smallDelay } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('inline-block')}
+
+    :host {
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        outline: none;
+        user-select: none;
+        color: ${contentFontColor};
+        height: calc(${labelHeight} + ${controlHeight});
+    }
+
+    :host([disabled]) {
+        color: ${contentFontColorDisabled};
+    }
+
+    .root {
+        box-sizing: border-box;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        border-radius: 0px;
+        font-family: ${fontFamily};
+        border-bottom: ${borderWidth} solid rgba(${borderColorRgb}, 0.3);
+        padding-bottom: 1px;
+        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+        align-items: flex-end;
+    }
+
+    @media (prefers-reduced-motion) {
+        .root {
+            transition-duration: 0s;
+        }
+    }
+
+    .root:hover {
+        border-bottom: 2px solid ${borderColorHover};
+        padding-bottom: 0px;
+    }
+
+    :host(.invalid) .root {
+        border-bottom: ${borderWidth} solid ${failColor};
+    }
+
+    :host(.invalid) .root:hover {
+        border-bottom: 2px solid ${failColor};
+        padding-bottom: 0px;
+    }
+
+    :host([disabled]) .root,
+    :host([disabled]) .root:hover {
+        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        padding-bottom: 1px;
+    }
+
+    :host([readonly]) .root,
+    :host([readonly]) .root:hover {
+        border: none;
+    }
+
+    .control {
+        -webkit-appearance: none;
+        font: inherit;
+        background: transparent;
+        color: inherit;
+        height: 28px;
+        width: 100%;
+        margin-top: auto;
+        margin-bottom: auto;
+        border: none;
+    }
+
+    .control::-ms-reveal {
+        filter: ${passwordRevealFilter};
+    }
+
+    .control:hover,
+    .control:focus,
+    .control:disabled,
+    .control:active {
+        outline: none;
+    }
+
+    .control::selection {
+        color: ${labelFontColor};
+        background: rgba(${fillColorSelectedRgb}, 0.3);
+    }
+
+    .control::placeholder {
+        color: ${labelFontColor};
+    }
+
+    .control:not([readonly]):focus-within::placeholder {
+        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 [part='end'] {
+        display: none;
+    }
+
+    :host(.invalid) [part='end'] {
+        align-self: center;
+        display: inline-flex;
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+
+    :host(.invalid) [part='end'] svg {
+        height: ${iconSize};
+        width: ${iconSize};
+    }
+
+    :host(.invalid) [part='end'] path {
+        fill: ${failColor};
+    }
+
+    :host([disabled]) [part='end'] path {
+        fill: ${contentFontColorDisabled};
+    }
+`;
 //# sourceMappingURL=styles.js.map

package/dist/esm/theme-provider/design-tokens.d.ts

@@ -1,48 +1,48 @@
-import { DesignToken } from '@microsoft/fast-foundation';
-import { NimbleTheme } from './themes';
-export declare const theme: DesignToken<NimbleTheme>;
-export declare const actionColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const applicationBackgroundColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const fillColorSelected: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const fillColorSelectedRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const fillColorSelectedHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const fillColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const borderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const borderColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const failColorTheme: (element: HTMLElement) => string;
-export declare const failColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const warningColorTheme: (element: HTMLElement) => string;
-export declare const warningColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const passColorTheme: (element: HTMLElement) => string;
-export declare const passColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const borderColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const popupBoxShadowColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const popupBorderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const controlHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const standardPadding: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const borderWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const iconSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const drawerWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const fontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const groupLabelFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const drawerHeaderFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const contentFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const groupLabelFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const drawerHeaderFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const groupLabelFontWeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelFontWeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const groupLabelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const contentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const buttonContentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelFontColorDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const labelTextTransform: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const groupLabelTextTransform: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const contentFontColorDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const smallDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const mediumDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
-export declare const drawerAnimationDurationMs: import("@microsoft/fast-foundation").CSSDesignToken<number>;
-export declare const passwordRevealFilter: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+import { DesignToken } from '@microsoft/fast-foundation';
+import { NimbleTheme } from './themes';
+export declare const theme: DesignToken<NimbleTheme>;
+export declare const actionColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const applicationBackgroundColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorSelected: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorSelectedRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorSelectedHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fillColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderColorRgb: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const failColorTheme: (element: HTMLElement) => string;
+export declare const failColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const warningColorTheme: (element: HTMLElement) => string;
+export declare const warningColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const passColorTheme: (element: HTMLElement) => string;
+export declare const passColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderColorHover: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const popupBoxShadowColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const popupBorderColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const controlHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const standardPadding: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelHeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const borderWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const iconSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerWidth: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const fontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerHeaderFontFamily: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const contentFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerHeaderFontSize: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontWeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontWeight: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const contentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const buttonContentFontColor: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelFontColorDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const labelTextTransform: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const groupLabelTextTransform: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const contentFontColorDisabled: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const smallDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const mediumDelay: import("@microsoft/fast-foundation").CSSDesignToken<string>;
+export declare const drawerAnimationDurationMs: import("@microsoft/fast-foundation").CSSDesignToken<number>;
+export declare const passwordRevealFilter: import("@microsoft/fast-foundation").CSSDesignToken<string>;