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

package/dist/esm/menu-item/styles.js

@@ -1,64 +1,64 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { focusVisible } from '../utilities/style/focus';
-import { controlHeight, fontFamily, contentFontSize, fillColorSelected, fillColorHover, contentFontColor, borderColorHover, contentFontColorDisabled, iconSize } from '../theme-provider/design-tokens';
-export const styles = css `
-    ${display('grid')}
-
-    :host {
-        contain: layout;
-        overflow: visible;
-        box-sizing: border-box;
-        height: ${controlHeight};
-        grid-template-columns: 0px 1fr;
-        grid-template-rows: 1fr;
-        justify-items: start;
-        align-items: center;
-        padding-left: 8px;
-        padding-right: 8px;
-        margin: 0 0;
-        white-space: nowrap;
-        color: ${contentFontColor};
-        fill: currentcolor;
-        cursor: pointer;
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
-    }
-    :host(${focusVisible}) {
-        outline: 2px solid ${borderColorHover};
-        outline-offset: -2px;
-    }
-    :host(:hover) {
-        background: ${fillColorHover};
-    }
-    :host(:active) {
-        background: ${fillColorSelected};
-    }
-    :host([disabled]) {
-        color: ${contentFontColorDisabled};
-        fill: currentcolor;
-        cursor: default;
-    }
-    :host([disabled]:hover) {
-        background: transparent;
-    }
-    :host(.indent-1) {
-        grid-template-columns: ${iconSize} 1fr;
-        column-gap: 8px;
-    }
-    [part='start'] {
-        display: contents;
-    }
-    slot[name='start']::slotted(*) {
-        fill: currentcolor;
-        width: ${iconSize};
-        height: ${iconSize};
-    }
-    :host(.indent-1) .start {
-        grid-column: 1;
-    }
-    :host(.indent-1) .content {
-        grid-column: 2;
-    }
-`;
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+import { controlHeight, fontFamily, contentFontSize, fillColorSelected, fillColorHover, contentFontColor, borderColorHover, contentFontColorDisabled, iconSize } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('grid')}
+
+    :host {
+        contain: layout;
+        overflow: visible;
+        box-sizing: border-box;
+        height: ${controlHeight};
+        grid-template-columns: 0px 1fr;
+        grid-template-rows: 1fr;
+        justify-items: start;
+        align-items: center;
+        padding-left: 8px;
+        padding-right: 8px;
+        margin: 0 0;
+        white-space: nowrap;
+        color: ${contentFontColor};
+        fill: currentcolor;
+        cursor: pointer;
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+    }
+    :host(${focusVisible}) {
+        outline: 2px solid ${borderColorHover};
+        outline-offset: -2px;
+    }
+    :host(:hover) {
+        background: ${fillColorHover};
+    }
+    :host(:active) {
+        background: ${fillColorSelected};
+    }
+    :host([disabled]) {
+        color: ${contentFontColorDisabled};
+        fill: currentcolor;
+        cursor: default;
+    }
+    :host([disabled]:hover) {
+        background: transparent;
+    }
+    :host(.indent-1) {
+        grid-template-columns: ${iconSize} 1fr;
+        column-gap: 8px;
+    }
+    [part='start'] {
+        display: contents;
+    }
+    slot[name='start']::slotted(*) {
+        fill: currentcolor;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+    :host(.indent-1) .start {
+        grid-column: 1;
+    }
+    :host(.indent-1) .content {
+        grid-column: 2;
+    }
+`;
 //# sourceMappingURL=styles.js.map

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

@@ -1,6 +1,6 @@
-import { NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
-/**
- * A nimble-styled HTML number input
- */
-declare type NumberField = FoundationNumberField;
-export type { NumberField };
+import { NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
+/**
+ * A nimble-styled HTML number input
+ */
+declare type NumberField = FoundationNumberField;
+export type { NumberField };

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

@@ -1,23 +1,23 @@
-import { DesignSystem, NumberField as FoundationNumberField, numberFieldTemplate as template } from '@microsoft/fast-foundation';
-import { controlsArrowExpanderDown16X16, controlsArrowExpanderUp16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
-import { styles } from './styles';
-/**
- * A function that returns a number-field registration for configuring the component with a DesignSystem.
- *
- * @public
- * @remarks
- * Generates HTML Element: \<nimble-number-field\>
- *
- */
-const nimbleNumberField = FoundationNumberField.compose({
-    baseName: 'number-field',
-    template,
-    styles,
-    shadowOptions: {
-        delegatesFocus: true
-    },
-    stepDownGlyph: controlsArrowExpanderDown16X16.data,
-    stepUpGlyph: controlsArrowExpanderUp16X16.data
-});
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
+import { DesignSystem, NumberField as FoundationNumberField, numberFieldTemplate as template } from '@microsoft/fast-foundation';
+import { controlsArrowExpanderDown16X16, controlsArrowExpanderUp16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { styles } from './styles';
+/**
+ * A function that returns a number-field registration for configuring the component with a DesignSystem.
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-number-field\>
+ *
+ */
+const nimbleNumberField = FoundationNumberField.compose({
+    baseName: 'number-field',
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    },
+    stepDownGlyph: controlsArrowExpanderDown16X16.data,
+    stepUpGlyph: controlsArrowExpanderUp16X16.data
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 //# sourceMappingURL=index.js.map

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

@@ -1,118 +1,118 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { borderColor, borderColorRgb, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelectedRgb, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, 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};
-        cursor: default;
-    }
-
-    .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};
-    }
-
-    @media (prefers-reduced-motion) {
-        .root {
-            transition-duration: 0s;
-        }
-    }
-
-    .root:hover {
-        border-bottom: 2px solid ${borderColorHover};
-        padding-bottom: 0px;
-    }
-
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
-        padding-bottom: 1px;
-    }
-
-    .control {
-        -webkit-appearance: none;
-        font: inherit;
-        background: transparent;
-        color: inherit;
-        height: 28px;
-        width: 100%;
-        margin-top: auto;
-        margin-bottom: auto;
-        border: none;
-    }
-
-    .control:hover,
-    .control:focus,
-    .control:disabled,
-    .control:active {
-        outline: none;
-    }
-
-    .control::selection {
-        color: ${labelFontColor};
-        background: rgba(${fillColorSelectedRgb}, 0.3);
-    }
-
-    .control::placeholder {
-        color: ${labelFontColor};
-    }
-
-    .control:focus-within::placeholder {
-        opacity: 1;
-    }
-
-    .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};
-    }
-
-    .controls {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .step-up,
-    .step-down {
-        display: inline-flex;
-        height: 15px;
-        width: 15px;
-        cursor: pointer;
-        justify-content: center;
-        align-items: center;
-    }
-
-    .step-up svg,
-    .step-down svg {
-        height: ${iconSize};
-        width: ${iconSize};
-        fill: ${borderColor};
-    }
-`;
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderColor, borderColorRgb, borderColorHover, borderWidth, contentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelectedRgb, fontFamily, iconSize, labelFontColor, labelFontFamily, labelFontSize, labelFontWeight, labelHeight, labelTextTransform, 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};
+        cursor: default;
+    }
+
+    .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};
+    }
+
+    @media (prefers-reduced-motion) {
+        .root {
+            transition-duration: 0s;
+        }
+    }
+
+    .root:hover {
+        border-bottom: 2px solid ${borderColorHover};
+        padding-bottom: 0px;
+    }
+
+    :host([disabled]) .root,
+    :host([disabled]) .root:hover {
+        border-bottom: ${borderWidth} solid ${contentFontColorDisabled};
+        padding-bottom: 1px;
+    }
+
+    .control {
+        -webkit-appearance: none;
+        font: inherit;
+        background: transparent;
+        color: inherit;
+        height: 28px;
+        width: 100%;
+        margin-top: auto;
+        margin-bottom: auto;
+        border: none;
+    }
+
+    .control:hover,
+    .control:focus,
+    .control:disabled,
+    .control:active {
+        outline: none;
+    }
+
+    .control::selection {
+        color: ${labelFontColor};
+        background: rgba(${fillColorSelectedRgb}, 0.3);
+    }
+
+    .control::placeholder {
+        color: ${labelFontColor};
+    }
+
+    .control:focus-within::placeholder {
+        opacity: 1;
+    }
+
+    .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};
+    }
+
+    .controls {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .step-up,
+    .step-down {
+        display: inline-flex;
+        height: 15px;
+        width: 15px;
+        cursor: pointer;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .step-up svg,
+    .step-down svg {
+        height: ${iconSize};
+        width: ${iconSize};
+        fill: ${borderColor};
+    }
+`;
 //# sourceMappingURL=styles.js.map

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

@@ -1,12 +1,12 @@
-import { Select as FoundationSelect, SelectOptions } from '@microsoft/fast-foundation';
-export type { Select };
-/**
- * A nimble-styed HTML select
- */
-declare class Select extends FoundationSelect {
-    get value(): string;
-    set value(value: string);
-    setPositioning(): void;
-    connectedCallback(): void;
-}
-export declare const nimbleSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<SelectOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<SelectOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+import { Select as FoundationSelect, SelectOptions } from '@microsoft/fast-foundation';
+export type { Select };
+/**
+ * A nimble-styed HTML select
+ */
+declare class Select extends FoundationSelect {
+    get value(): string;
+    set value(value: string);
+    setPositioning(): void;
+    connectedCallback(): void;
+}
+export declare const nimbleSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<SelectOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<SelectOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/dist/esm/select/index.js

@@ -1,46 +1,46 @@
-import { DesignSystem, Select as FoundationSelect, selectTemplate as template } from '@microsoft/fast-foundation';
-import { controlsArrowExpanderDown16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
-import { styles } from './styles';
-/**
- * A nimble-styed HTML select
- */
-class Select extends FoundationSelect {
-    get value() {
-        return super.value;
-    }
-    set value(value) {
-        super.value = value;
-        // Workaround for https://github.com/microsoft/fast/issues/5139
-        // When the value property is set very early in the element's lifecycle (e.g. Angular value binding),
-        // the options property will not be set yet. As a workaround, we mark the listbox-option element with
-        // the selected attribute, which will set the initial value correctly.
-        if (value !== null && this.options.length === 0) {
-            const matchingOption = this.querySelector(`nimble-listbox-option[value="${value}"]`);
-            if (matchingOption !== null) {
-                matchingOption.setAttribute('selected', '');
-            }
-        }
-    }
-    // Workaround for https://github.com/microsoft/fast/issues/5123
-    setPositioning() {
-        if (!this.$fastController.isConnected) {
-            // Don't call setPositioning() until we're connected,
-            // since this.forcedPosition isn't initialized yet.
-            return;
-        }
-        super.setPositioning();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // Call setPositioning() after this.forcedPosition is initialized.
-        this.setPositioning();
-    }
-}
-export const nimbleSelect = Select.compose({
-    baseName: 'select',
-    template,
-    styles,
-    indicator: controlsArrowExpanderDown16X16.data
-});
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
+import { DesignSystem, Select as FoundationSelect, selectTemplate as template } from '@microsoft/fast-foundation';
+import { controlsArrowExpanderDown16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { styles } from './styles';
+/**
+ * A nimble-styed HTML select
+ */
+class Select extends FoundationSelect {
+    get value() {
+        return super.value;
+    }
+    set value(value) {
+        super.value = value;
+        // Workaround for https://github.com/microsoft/fast/issues/5139
+        // When the value property is set very early in the element's lifecycle (e.g. Angular value binding),
+        // the options property will not be set yet. As a workaround, we mark the listbox-option element with
+        // the selected attribute, which will set the initial value correctly.
+        if (value !== null && this.options.length === 0) {
+            const matchingOption = this.querySelector(`nimble-listbox-option[value="${value}"]`);
+            if (matchingOption !== null) {
+                matchingOption.setAttribute('selected', '');
+            }
+        }
+    }
+    // Workaround for https://github.com/microsoft/fast/issues/5123
+    setPositioning() {
+        if (!this.$fastController.isConnected) {
+            // Don't call setPositioning() until we're connected,
+            // since this.forcedPosition isn't initialized yet.
+            return;
+        }
+        super.setPositioning();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Call setPositioning() after this.forcedPosition is initialized.
+        this.setPositioning();
+    }
+}
+export const nimbleSelect = Select.compose({
+    baseName: 'select',
+    template,
+    styles,
+    indicator: controlsArrowExpanderDown16X16.data
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 //# sourceMappingURL=index.js.map

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

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