@ni/nimble-components 1.0.0-beta.12 → 1.0.0-beta.123

package/dist/esm/select/styles.js

@@ -0,0 +1,141 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { applicationBackgroundColor, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fontFamily, iconSize, popupBorderColor, popupBoxShadowColor, smallDelay } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        box-sizing: border-box;
+        color: ${contentFontColor};
+        font-family: ${fontFamily};
+        height: ${controlHeight};
+        position: relative;
+        user-select: none;
+        min-width: 250px;
+        outline: none;
+        vertical-align: top;
+    }
+
+    .listbox {
+        box-sizing: border-box;
+        display: inline-flex;
+        flex-direction: column;
+        left: 0;
+        overflow-y: auto;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+        padding: 4px;
+        box-shadow: 0px 3px 3px ${popupBoxShadowColor};
+        border: 1px solid ${popupBorderColor};
+        background-color: ${applicationBackgroundColor};
+        background-clip: padding-box;
+    }
+
+    .listbox[hidden] {
+        display: none;
+    }
+
+    .control {
+        align-items: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        font-size: ${contentFontSize};
+        font-family: inherit;
+        min-height: 100%;
+        width: 100%;
+        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        background-color: transparent;
+        padding-left: 8px;
+        padding-bottom: 1px;
+    }
+
+    :host([disabled]) .control {
+        cursor: default;
+    }
+
+    :host(.open:not(:hover)) .control {
+        border-bottom: ${borderWidth} solid ${borderColorHover};
+        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+    }
+
+    :host(:hover) .control {
+        border-bottom: 2px solid ${borderColorHover};
+        padding-bottom: 0px;
+        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+    }
+
+    :host([disabled]) .control,
+    :host([disabled]) .control:hover {
+        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        padding-bottom: 1px;
+        color: ${contentFontColorDisabled};
+    }
+
+    :host([open][position='above']) .listbox {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    :host([open][position='below']) .listbox {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+    }
+
+    :host([open][position='above']) .listbox {
+        bottom: ${controlHeight};
+    }
+
+    :host([open][position='below']) .listbox {
+        top: calc(${controlHeight} + 3px);
+    }
+
+    .selected-value {
+        flex: 1 1 auto;
+        font-family: inherit;
+        text-align: start;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    .indicator {
+        flex: 0 0 auto;
+        margin-inline-start: 1em;
+        padding-right: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .indicator slot[name='indicator'] svg {
+        width: ${iconSize};
+        height: ${iconSize};
+        fill: ${contentFontColor};
+    }
+
+    :host([disabled]) .indicator slot[name='indicator'] svg {
+        fill: ${contentFontColorDisabled};
+    }
+
+    slot[name='listbox'] {
+        display: none;
+        width: 100%;
+    }
+
+    :host([open]) slot[name='listbox'] {
+        display: flex;
+        position: absolute;
+    }
+
+    .end {
+        margin-inline-start: auto;
+    }
+
+    ::slotted([role='option']),
+    ::slotted(option) {
+        flex: 0 0 auto;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/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,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,mBAAmB,EACnB,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;iBAIX,gBAAgB;uBACV,UAAU;kBACf,aAAa;;;;;;;;;;;;;;;;;;kCAkBG,mBAAmB;4BACzB,gBAAgB;4BAChB,0BAA0B;;;;;;;;;;;;;qBAajC,eAAe;;;;yBAIX,WAAW,UAAU,wBAAwB;;;;;;;;;;;yBAW7C,WAAW,UAAU,gBAAgB;oCAC1B,UAAU,oBAAoB,UAAU;;;;mCAIzC,gBAAgB;;oCAEf,UAAU,oBAAoB,UAAU;;;;;yBAKnD,WAAW,UAAU,wBAAwB;;iBAErD,wBAAwB;;;;;;;;;;;;;;kBAcvB,aAAa;;;;oBAIX,aAAa;;;;;;;;;;;;;;;;;;;;;;iBAsBhB,QAAQ;kBACP,QAAQ;gBACV,gBAAgB;;;;gBAIhB,wBAAwB;;;;;;;;;;;;;;;;;;;;;CAqBvC,CAAC"}

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

@@ -0,0 +1,12 @@
+import { Tab as FoundationTab } from '@microsoft/fast-foundation';
+export type { Tab };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tab': Tab;
+    }
+}
+/**
+ * A nimble-styled HTML tab
+ */
+declare class Tab extends FoundationTab {
+}

package/dist/esm/tab/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, Tab as FoundationTab, tabTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+/**
+ * A nimble-styled HTML tab
+ */
+class Tab extends FoundationTab {
+}
+const nimbleTab = Tab.compose({
+    baseName: 'tab',
+    baseClass: FoundationTab,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,GAAG,IAAI,aAAa,EACpB,WAAW,IAAI,QAAQ,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,GAAI,SAAQ,aAAa;CAAG;AAElC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,aAAa;IACxB,0GAA0G;IAC1G,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC"}

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

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

package/dist/esm/tab/styles.js

@@ -0,0 +1,53 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorHover, fontFamily, mediumDelay, standardPadding } from '../theme-provider/design-tokens';
+import { focusVisible } from '../utilities/style/focus';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        box-sizing: border-box;
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        height: ${controlHeight};
+        padding: calc(${standardPadding} / 2) ${standardPadding}
+            calc(${standardPadding} / 2 - ${borderWidth});
+        color: ${contentFontColor};
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        ${ /* Separate focus indicator from active indicator */''}
+        border-bottom: transparent ${borderWidth} solid;
+    }
+
+    :host(:hover) {
+        background-color: ${fillColorHover};
+    }
+
+    :host(:focus) {
+        outline: none;
+    }
+
+    :host(${focusVisible}) {
+        outline: none;
+        box-shadow: 0 calc(${borderWidth} * -1) ${borderColorHover} inset;
+        transition: box-shadow ${mediumDelay} ease-in-out;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host(${focusVisible}) {
+            transition-duration: 0.01s;
+        }
+    }
+
+    :host(:active) {
+        background: none;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        color: ${contentFontColorDisabled};
+        background: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab/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,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,cAAc,EACd,UAAU,EACV,WAAW,EACX,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;uBAIL,UAAU;qBACZ,eAAe;kBAClB,aAAa;wBACP,eAAe,SAAS,eAAe;mBAC5C,eAAe,UAAU,WAAW;iBACtC,gBAAgB;;;;UAIvB,CAAA,oDAAqD,EAAE;qCAC5B,WAAW;;;;4BAIpB,cAAc;;;;;;;YAO9B,YAAY;;6BAEK,WAAW,UAAU,gBAAgB;iCACjC,WAAW;;;;gBAI5B,YAAY;;;;;;;;;;;iBAWX,wBAAwB;;;CAGxC,CAAC"}

package/dist/esm/tab-panel/index.d.ts

@@ -0,0 +1,12 @@
+import { TabPanel as FoundationTabPanel } from '@microsoft/fast-foundation';
+export type { TabPanel };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tab-panel': TabPanel;
+    }
+}
+/**
+ * A nimble-styled tab panel
+ */
+declare class TabPanel extends FoundationTabPanel {
+}

package/dist/esm/tab-panel/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, TabPanel as FoundationTabPanel, tabPanelTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+/**
+ * A nimble-styled tab panel
+ */
+class TabPanel extends FoundationTabPanel {
+}
+const nimbleTabPanel = TabPanel.compose({
+    baseName: 'tab-panel',
+    baseClass: FoundationTabPanel,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
+//# sourceMappingURL=index.js.map

package/dist/esm/tab-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAC9B,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,QAAS,SAAQ,kBAAkB;CAAG;AAE5C,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC"}

package/dist/esm/tab-panel/styles.d.ts

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

package/dist/esm/tab-panel/styles.js

@@ -0,0 +1,15 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { contentFontColor, contentFontSize, fontFamily, standardPadding } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('block')}
+
+    :host {
+        box-sizing: border-box;
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        color: ${contentFontColor};
+        padding-top: ${standardPadding};
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/tab-panel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tab-panel/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,eAAe,EACf,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;uBAIC,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;uBACV,eAAe;;CAErC,CAAC"}

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

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

package/dist/esm/tabs/index.js

@@ -0,0 +1,16 @@
+import { DesignSystem, Tabs as FoundationTabs, tabsTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+/**
+ * A nimble-styled tabs control
+ */
+class Tabs extends FoundationTabs {
+}
+const nimbleTabs = Tabs.compose({
+    baseName: 'tabs',
+    baseClass: FoundationTabs,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,IAAI,IAAI,cAAc,EAEtB,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,IAAK,SAAQ,cAAc;CAAG;AAEpC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAc;IACzC,QAAQ,EAAE,MAAM;IAChB,SAAS,EAAE,cAAc;IACzB,0GAA0G;IAC1G,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC"}

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

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

package/dist/esm/tabs/styles.js

@@ -0,0 +1,43 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderColorHover, borderWidth, smallDelay } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('grid')}
+
+    :host {
+        box-sizing: border-box;
+        grid-template-columns: auto auto 1fr;
+        grid-template-rows: auto 1fr;
+    }
+
+    .tablist {
+        display: grid;
+        grid-template-rows: auto auto;
+        grid-template-columns: auto;
+        width: max-content;
+        align-self: end;
+    }
+
+    .activeIndicator {
+        grid-row: 2;
+        height: calc(${borderWidth} * 2);
+        background-color: ${borderColorHover};
+    }
+
+    .activeIndicatorTransition {
+        transition: transform ${smallDelay} ease-in-out;
+    }
+
+    @media (prefers-reduced-motion) {
+        .activeIndicatorTransition {
+            transition: transform 0.01s;
+        }
+    }
+
+    .tabpanel {
+        grid-row: 2;
+        grid-column-start: 1;
+        grid-column-end: 4;
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs/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,WAAW,EACX,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;uBAkBE,WAAW;4BACN,gBAAgB;;;;gCAIZ,UAAU;;;;;;;;;;;;;;CAczC,CAAC"}

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

@@ -0,0 +1,12 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export type { TabsToolbar };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-tabs-toolbar': TabsToolbar;
+    }
+}
+/**
+ * A nimble-styled container for toolbar content next to tabs.
+ */
+declare class TabsToolbar extends FoundationElement {
+}

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

@@ -0,0 +1,15 @@
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A nimble-styled container for toolbar content next to tabs.
+ */
+class TabsToolbar extends FoundationElement {
+}
+const nimbleTabsToolbar = TabsToolbar.compose({
+    baseName: 'tabs-toolbar',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
+//# sourceMappingURL=index.js.map

package/dist/esm/tabs-toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,WAAY,SAAQ,iBAAiB;CAAG;AAE9C,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC"}

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

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

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

@@ -0,0 +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);
+    }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;;uBAER,UAAU;qBACZ,eAAe;iBACnB,gBAAgB;;;;;;4BAML,WAAW,oBAAoB,cAAc;uBAClD,eAAe,cAAc,eAAe;;CAElE,CAAC"}

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

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

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

@@ -0,0 +1,8 @@
+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/tabs-toolbar/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;;CAK3B,CAAC"}

package/dist/esm/testing/async-helpers.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Allows test code to wait for components to complete pending asynchronous updates that resulted
+ * from DOM interactions like property or attribute changes.
+ */
+export declare const waitForUpdatesAsync: () => Promise<void>;
+/**
+ * Allows test code to force components to synchronously complete normally asynchronous pending
+ * updates that resulted from DOM interactions like property or attribute changes.
+ */
+export declare const processUpdates: () => void;

package/dist/esm/testing/async-helpers.js

@@ -0,0 +1,12 @@
+import { DOM } from '@microsoft/fast-element';
+/**
+ * Allows test code to wait for components to complete pending asynchronous updates that resulted
+ * from DOM interactions like property or attribute changes.
+ */
+export const waitForUpdatesAsync = async () => DOM.nextUpdate();
+/**
+ * Allows test code to force components to synchronously complete normally asynchronous pending
+ * updates that resulted from DOM interactions like property or attribute changes.
+ */
+export const processUpdates = () => DOM.processUpdates();
+//# sourceMappingURL=async-helpers.js.map

package/dist/esm/testing/async-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async-helpers.js","sourceRoot":"","sources":["../../../src/testing/async-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,KAAK,IAAmB,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;AAE/E;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAS,EAAE,CAAC,GAAG,CAAC,cAAc,EAAE,CAAC"}

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

@@ -1 +1,12 @@
-export {};
+import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
+export type { TextField };
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-text-field': TextField;
+    }
+}
+/**
+ * A nimble-styed HTML text input
+ */
+declare class TextField extends FoundationTextField {
+}

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

@@ -1,12 +1,21 @@
 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({
+/**
+ * A nimble-styed HTML text input
+ */
+class TextField extends FoundationTextField {
+}
+const nimbleTextField = TextField.compose({
     baseName: 'text-field',
+    baseClass: FoundationTextField,
+    // @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
     template,
     styles,
     shadowOptions: {
         delegatesFocus: true
-    }
+    },
+    end: statusAlarmActive16X16.data
 });
 DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,IAAI,mBAAmB,EAAE,iBAAiB,IAAI,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAC3H,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,eAAe,GAAG,mBAAmB,CAAC,OAAO,CAAC;IAChD,QAAQ,EAAE,YAAY;IACtB,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,eAAe,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEhC,iBAAiB,IAAI,QAAQ,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,sDAAsD,CAAC;AAC9F,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,SAAU,SAAQ,mBAAmB;CAAG;AAE9C,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,sBAAsB,CAAC,IAAI;CACnC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC"}