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

package/dist/esm/select/styles.js

@@ -1,141 +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;
-    }
-`;
+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/tab/index.d.ts

@@ -1,2 +1,2 @@
-import { Tab } from '@microsoft/fast-foundation';
-export type { Tab };
+import { Tab } from '@microsoft/fast-foundation';
+export type { Tab };

package/dist/esm/tab/index.js

@@ -1,9 +1,9 @@
-import { DesignSystem, Tab, tabTemplate as template } from '@microsoft/fast-foundation';
-import { styles } from './styles';
-const nimbleTab = Tab.compose({
-    baseName: 'tab',
-    template,
-    styles
-});
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
+import { DesignSystem, Tab, tabTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+const nimbleTab = Tab.compose({
+    baseName: 'tab',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 //# sourceMappingURL=index.js.map

package/dist/esm/tab/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/tab/styles.js

@@ -1,53 +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;
-    }
-`;
+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-panel/index.d.ts

@@ -1,2 +1,2 @@
-import { TabPanel } from '@microsoft/fast-foundation';
-export type { TabPanel };
+import { TabPanel } from '@microsoft/fast-foundation';
+export type { TabPanel };

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

@@ -1,9 +1,9 @@
-import { DesignSystem, TabPanel, tabPanelTemplate as template } from '@microsoft/fast-foundation';
-import { styles } from './styles';
-const nimbleTabPanel = TabPanel.compose({
-    baseName: 'tab-panel',
-    template,
-    styles
-});
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
+import { DesignSystem, TabPanel, tabPanelTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+const nimbleTabPanel = TabPanel.compose({
+    baseName: 'tab-panel',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 //# sourceMappingURL=index.js.map

package/dist/esm/tab-panel/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/tab-panel/styles.js

@@ -1,15 +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};
-    }
-`;
+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/tabs/index.d.ts

@@ -1,2 +1,2 @@
-import { Tabs } from '@microsoft/fast-foundation';
-export type { Tabs };
+import { Tabs } from '@microsoft/fast-foundation';
+export type { Tabs };

package/dist/esm/tabs/index.js

@@ -1,9 +1,9 @@
-import { DesignSystem, Tabs, tabsTemplate as template } from '@microsoft/fast-foundation';
-import { styles } from './styles';
-const nimbleTabs = Tabs.compose({
-    baseName: 'tabs',
-    template,
-    styles
-});
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
+import { DesignSystem, Tabs, tabsTemplate as template } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+const nimbleTabs = Tabs.compose({
+    baseName: 'tabs',
+    template,
+    styles
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());
 //# sourceMappingURL=index.js.map

package/dist/esm/tabs/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/tabs/styles.js

@@ -1,43 +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;
-    }
-`;
+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-toolbar/index.d.ts

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

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

@@ -1,15 +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.
- */
-export class TabsToolbar extends FoundationElement {
-}
-const nimbleTabsToolbar = TabsToolbar.compose({
-    baseName: 'tabs-toolbar',
-    template,
-    styles
-});
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabsToolbar());
+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.
+ */
+export 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/styles.d.ts

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