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

package/README.md

@@ -1,20 +1,20 @@
-<div align="center">
-    <p><b>ni | nimble | components</b></p>
-</div>
-
-# Nimble Components
-
-[![NPM Version](https://img.shields.io/npm/v/@ni/nimble-components.svg)](https://www.npmjs.com/package/@ni/nimble-components)
-
-NI-styled web components for web applications.
-
-## Getting Started
-
-If you are using one of the following frameworks see associated wrapper documentation:
-
-1. Angular: See the [nimble-angular](../../angular-workspace/projects/ni/nimble-angular) documentation.
-2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](../nimble-blazor) documentation.
-
-## Contributing
-
-Follow the instructions in [CONTRIBUTING.md](CONTRIBUTING.md) to modify this library.
+<div align="center">
+    <p><b>ni | nimble | components</b></p>
+</div>
+
+# Nimble Components
+
+[![NPM Version](https://img.shields.io/npm/v/@ni/nimble-components.svg)](https://www.npmjs.com/package/@ni/nimble-components)
+
+NI-styled web components for web applications.
+
+## Getting Started
+
+If you are using one of the following frameworks see associated wrapper documentation:
+
+1. Angular: See the [nimble-angular](/angular-workspace/projects/ni/nimble-angular) documentation.
+2. Blazor WebAssembly or Blazor Server: See the [nimble-blazor](/packages/nimble-blazor) documentation.
+
+## Contributing
+
+Follow the instructions in [CONTRIBUTING.md](/packages/nimble-components/CONTRIBUTING.md) to modify this library.

package/dist/esm/button/behaviors.d.ts

@@ -1,12 +1,12 @@
-import type { Behavior, ElementStyles } from '@microsoft/fast-element';
-import type { ButtonAppearance } from './types';
-/**
- * Behavior that will conditionally apply a stylesheet based on the element's
- * appearance property
- *
- * @param value - The value of the appearance property
- * @param styles - The styles to be applied when condition matches
- *
- * @public
- */
-export declare function appearanceBehavior(value: ButtonAppearance, styles: ElementStyles): Behavior;
+import type { Behavior, ElementStyles } from '@microsoft/fast-element';
+import type { ButtonAppearance } from './types';
+/**
+ * Behavior that will conditionally apply a stylesheet based on the element's
+ * appearance property
+ *
+ * @param value - The value of the appearance property
+ * @param styles - The styles to be applied when condition matches
+ *
+ * @public
+ */
+export declare function appearanceBehavior(value: ButtonAppearance, styles: ElementStyles): Behavior;

package/dist/esm/button/behaviors.js

@@ -1,14 +1,14 @@
-import { PropertyStyleSheetBehavior } from '@microsoft/fast-foundation';
-/**
- * Behavior that will conditionally apply a stylesheet based on the element's
- * appearance property
- *
- * @param value - The value of the appearance property
- * @param styles - The styles to be applied when condition matches
- *
- * @public
- */
-export function appearanceBehavior(value, styles) {
-    return new PropertyStyleSheetBehavior('appearance', value, styles);
-}
+import { PropertyStyleSheetBehavior } from '@microsoft/fast-foundation';
+/**
+ * Behavior that will conditionally apply a stylesheet based on the element's
+ * appearance property
+ *
+ * @param value - The value of the appearance property
+ * @param styles - The styles to be applied when condition matches
+ *
+ * @public
+ */
+export function appearanceBehavior(value, styles) {
+    return new PropertyStyleSheetBehavior('appearance', value, styles);
+}
 //# sourceMappingURL=behaviors.js.map

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

@@ -1,17 +1,17 @@
-import { Button as FoundationButton } from '@microsoft/fast-foundation';
-import { ButtonAppearance } from './types';
-export type { Button };
-/**
- * A nimble-styled HTML button
- */
-declare class Button extends FoundationButton {
-    /**
-     * The appearance the button should have.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: appearance
-     */
-    appearance: ButtonAppearance;
-    connectedCallback(): void;
-}
+import { Button as FoundationButton } from '@microsoft/fast-foundation';
+import { ButtonAppearance } from './types';
+export type { Button };
+/**
+ * A nimble-styled HTML button
+ */
+declare class Button extends FoundationButton {
+    /**
+     * The appearance the button should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: ButtonAppearance;
+    connectedCallback(): void;
+}

package/dist/esm/button/index.js

@@ -1,38 +1,38 @@
-import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { Button as FoundationButton, buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
-import { styles } from './styles';
-import { ButtonAppearance } from './types';
-/**
- * A nimble-styled HTML button
- */
-class Button extends FoundationButton {
-    connectedCallback() {
-        super.connectedCallback();
-        if (!this.appearance) {
-            this.appearance = ButtonAppearance.Outline;
-        }
-    }
-}
-__decorate([
-    attr
-], Button.prototype, "appearance", void 0);
-/**
- * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
- * Implements {@link @microsoft/fast-foundation#buttonTemplate}
- *
- * @public
- * @remarks
- * Generates HTML Element: \<nimble-button\>
- *
- */
-const nimbleButton = Button.compose({
-    baseName: 'button',
-    template,
-    styles,
-    shadowOptions: {
-        delegatesFocus: true
-    }
-});
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { Button as FoundationButton, buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { ButtonAppearance } from './types';
+/**
+ * A nimble-styled HTML button
+ */
+class Button extends FoundationButton {
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.appearance) {
+            this.appearance = ButtonAppearance.Outline;
+        }
+    }
+}
+__decorate([
+    attr
+], Button.prototype, "appearance", void 0);
+/**
+ * A function that returns a nimble-button registration for configuring the component with a DesignSystem.
+ * Implements {@link @microsoft/fast-foundation#buttonTemplate}
+ *
+ * @public
+ * @remarks
+ * Generates HTML Element: \<nimble-button\>
+ *
+ */
+const nimbleButton = Button.compose({
+    baseName: 'button',
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 //# sourceMappingURL=index.js.map

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

@@ -1,179 +1,179 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { focusVisible } from '../utilities/style/focus';
-import { actionColorRgb, borderColorHover, borderColorRgb, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, smallDelay, standardPadding } from '../theme-provider/design-tokens';
-import { appearanceBehavior } from './behaviors';
-import { ButtonAppearance } from './types';
-export const styles = css `
-    ${display('inline-flex')}
-
-    :host {
-        background-color: transparent;
-        height: ${controlHeight};
-        color: ${buttonContentFontColor};
-        font-family: ${fontFamily};
-        font-size: ${contentFontSize};
-        cursor: pointer;
-        outline: none;
-        border: none;
-        box-sizing: border-box;
-        ${
-/*
-    Not sure why but this is needed to get buttons with icons and buttons
-    without icons to align on the same line when the button is inline-flex
-*/ ''}
-        vertical-align: middle;
-    }
-
-    :host([disabled]) {
-        color: ${contentFontColorDisabled};
-        cursor: default;
-    }
-
-    .control {
-        background-color: transparent;
-        height: inherit;
-        width: inherit;
-        border: ${borderWidth} solid transparent;
-        box-sizing: border-box;
-        color: inherit;
-        border-radius: inherit;
-        fill: inherit;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 4px;
-        cursor: inherit;
-        font-family: inherit;
-        font-size: inherit;
-        outline: none;
-        margin: 0;
-        padding: 0 ${standardPadding};
-        transition: box-shadow ${smallDelay};
-    }
-
-    @media (prefers-reduced-motion) {
-        .control {
-            transition-duration: 0s;
-        }
-    }
-
-    .control:hover {
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
-        outline: none;
-    }
-
-    .control${focusVisible} {
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
-        outline: ${borderWidth} solid ${borderColorHover};
-        outline-offset: -4px;
-    }
-
-    .control:active {
-        box-shadow: none;
-        outline: none;
-    }
-
-    .control[disabled] {
-        box-shadow: none;
-        outline: none;
-    }
-
-    .content {
-        display: contents;
-    }
-
-    [part='start'] {
-        display: contents;
-    }
-
-    slot[name='start']::slotted(*) {
-        --icon-color: ${buttonContentFontColor};
-    }
-
-    :host([disabled]) slot[name='start']::slotted(*) {
-        opacity: 0.6;
-    }
-
-    [part='end'] {
-        display: none;
-    }
-`
-    // prettier-ignore
-    .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
-                .control {
-                    background-color: transparent;
-                    border-color: rgba(${actionColorRgb}, 0.5);
-                }
-
-                .control:hover {
-                    background-color: transparent;
-                    border-color: ${borderColorHover};
-                }
-
-                .control${focusVisible} {
-                    background-color: transparent;
-                    border-color: ${borderColorHover};
-                }
-
-                .control:active {
-                    background-color: ${fillColorSelected};
-                    border-color: transparent;
-                }
-
-                .control[disabled] {
-                    background-color: transparent;
-                    border-color: rgba(${borderColorRgb}, 0.2);
-                }
-            `), appearanceBehavior(ButtonAppearance.Ghost, css `
-                .control {
-                    background-color: transparent;
-                    border-color: transparent;
-                }
-
-                .control:hover {
-                    background-color: transparent;
-                    border-color: ${borderColorHover};
-                }
-
-                .control${focusVisible} {
-                    background-color: transparent;
-                    border-color: ${borderColorHover};
-                }
-
-                .control:active {
-                    background-color: ${fillColorSelected};
-                    border-color: transparent;
-                }
-
-                .control[disabled] {
-                    background-color: transparent;
-                    border-color: transparent;
-                }
-            `), appearanceBehavior(ButtonAppearance.Block, css `
-                .control {
-                    background-color: rgba(${borderColorRgb}, 0.1);
-                    border-color: transparent;
-                }
-
-                .control:hover {
-                    background-color: rgba(${borderColorRgb}, 0.1);
-                    border-color: ${borderColorHover};
-                }
-
-                .control${focusVisible} {
-                    background-color: rgba(${borderColorRgb}, 0.1);
-                    border-color: ${borderColorHover};
-                }
-
-                .control:active {
-                    background-color: ${fillColorSelected};
-                    border-color: transparent;
-                }
-
-                .control[disabled] {
-                    background-color: rgba(${borderColorRgb}, 0.1);
-                    border-color: rgba(${borderColorRgb}, 0.1);
-                }
-            `));
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { focusVisible } from '../utilities/style/focus';
+import { actionColorRgb, borderColorHover, borderColorRgb, borderWidth, buttonContentFontColor, contentFontColorDisabled, contentFontSize, controlHeight, fillColorSelected, fontFamily, smallDelay, standardPadding } from '../theme-provider/design-tokens';
+import { appearanceBehavior } from './behaviors';
+import { ButtonAppearance } from './types';
+export const styles = css `
+    ${display('inline-flex')}
+
+    :host {
+        background-color: transparent;
+        height: ${controlHeight};
+        color: ${buttonContentFontColor};
+        font-family: ${fontFamily};
+        font-size: ${contentFontSize};
+        cursor: pointer;
+        outline: none;
+        border: none;
+        box-sizing: border-box;
+        ${
+/*
+    Not sure why but this is needed to get buttons with icons and buttons
+    without icons to align on the same line when the button is inline-flex
+*/ ''}
+        vertical-align: middle;
+    }
+
+    :host([disabled]) {
+        color: ${contentFontColorDisabled};
+        cursor: default;
+    }
+
+    .control {
+        background-color: transparent;
+        height: inherit;
+        width: inherit;
+        border: ${borderWidth} solid transparent;
+        box-sizing: border-box;
+        color: inherit;
+        border-radius: inherit;
+        fill: inherit;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        cursor: inherit;
+        font-family: inherit;
+        font-size: inherit;
+        outline: none;
+        margin: 0;
+        padding: 0 ${standardPadding};
+        transition: box-shadow ${smallDelay};
+    }
+
+    @media (prefers-reduced-motion) {
+        .control {
+            transition-duration: 0s;
+        }
+    }
+
+    .control:hover {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
+        outline: none;
+    }
+
+    .control${focusVisible} {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderColorHover} inset;
+        outline: ${borderWidth} solid ${borderColorHover};
+        outline-offset: -4px;
+    }
+
+    .control:active {
+        box-shadow: none;
+        outline: none;
+    }
+
+    .control[disabled] {
+        box-shadow: none;
+        outline: none;
+    }
+
+    .content {
+        display: contents;
+    }
+
+    [part='start'] {
+        display: contents;
+    }
+
+    slot[name='start']::slotted(*) {
+        --icon-color: ${buttonContentFontColor};
+    }
+
+    :host([disabled]) slot[name='start']::slotted(*) {
+        opacity: 0.6;
+    }
+
+    [part='end'] {
+        display: none;
+    }
+`
+    // prettier-ignore
+    .withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
+                .control {
+                    background-color: transparent;
+                    border-color: rgba(${actionColorRgb}, 0.5);
+                }
+
+                .control:hover {
+                    background-color: transparent;
+                    border-color: ${borderColorHover};
+                }
+
+                .control${focusVisible} {
+                    background-color: transparent;
+                    border-color: ${borderColorHover};
+                }
+
+                .control:active {
+                    background-color: ${fillColorSelected};
+                    border-color: transparent;
+                }
+
+                .control[disabled] {
+                    background-color: transparent;
+                    border-color: rgba(${borderColorRgb}, 0.2);
+                }
+            `), appearanceBehavior(ButtonAppearance.Ghost, css `
+                .control {
+                    background-color: transparent;
+                    border-color: transparent;
+                }
+
+                .control:hover {
+                    background-color: transparent;
+                    border-color: ${borderColorHover};
+                }
+
+                .control${focusVisible} {
+                    background-color: transparent;
+                    border-color: ${borderColorHover};
+                }
+
+                .control:active {
+                    background-color: ${fillColorSelected};
+                    border-color: transparent;
+                }
+
+                .control[disabled] {
+                    background-color: transparent;
+                    border-color: transparent;
+                }
+            `), appearanceBehavior(ButtonAppearance.Block, css `
+                .control {
+                    background-color: rgba(${borderColorRgb}, 0.1);
+                    border-color: transparent;
+                }
+
+                .control:hover {
+                    background-color: rgba(${borderColorRgb}, 0.1);
+                    border-color: ${borderColorHover};
+                }
+
+                .control${focusVisible} {
+                    background-color: rgba(${borderColorRgb}, 0.1);
+                    border-color: ${borderColorHover};
+                }
+
+                .control:active {
+                    background-color: ${fillColorSelected};
+                    border-color: transparent;
+                }
+
+                .control[disabled] {
+                    background-color: rgba(${borderColorRgb}, 0.1);
+                    border-color: rgba(${borderColorRgb}, 0.1);
+                }
+            `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/button/types.d.ts

@@ -1,9 +1,9 @@
-/**
- * Types of button appearance.
- * @public
- */
-export declare enum ButtonAppearance {
-    Outline = "outline",
-    Ghost = "ghost",
-    Block = "block"
-}
+/**
+ * Types of button appearance.
+ * @public
+ */
+export declare enum ButtonAppearance {
+    Outline = "outline",
+    Ghost = "ghost",
+    Block = "block"
+}

package/dist/esm/button/types.js

@@ -1,11 +1,11 @@
-/**
- * Types of button appearance.
- * @public
- */
-export var ButtonAppearance;
-(function (ButtonAppearance) {
-    ButtonAppearance["Outline"] = "outline";
-    ButtonAppearance["Ghost"] = "ghost";
-    ButtonAppearance["Block"] = "block";
-})(ButtonAppearance || (ButtonAppearance = {}));
+/**
+ * Types of button appearance.
+ * @public
+ */
+export var ButtonAppearance;
+(function (ButtonAppearance) {
+    ButtonAppearance["Outline"] = "outline";
+    ButtonAppearance["Ghost"] = "ghost";
+    ButtonAppearance["Block"] = "block";
+})(ButtonAppearance || (ButtonAppearance = {}));
 //# sourceMappingURL=types.js.map

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

@@ -1,2 +1,2 @@
-import { Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
-export { FoundationCheckbox as Checkbox };
+import { Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
+export { FoundationCheckbox as Checkbox };

package/dist/esm/checkbox/index.js

@@ -1,12 +1,12 @@
-import { DesignSystem, Checkbox as FoundationCheckbox, checkboxTemplate as template } from '@microsoft/fast-foundation';
-import { controlsCheckboxCheck16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
-import { styles } from './styles';
-export { FoundationCheckbox as Checkbox };
-const nimbleCheckbox = FoundationCheckbox.compose({
-    baseName: 'checkbox',
-    template,
-    styles,
-    checkedIndicator: controlsCheckboxCheck16X16.data
-});
-DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
+import { DesignSystem, Checkbox as FoundationCheckbox, checkboxTemplate as template } from '@microsoft/fast-foundation';
+import { controlsCheckboxCheck16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
+import { styles } from './styles';
+export { FoundationCheckbox as Checkbox };
+const nimbleCheckbox = FoundationCheckbox.compose({
+    baseName: 'checkbox',
+    template,
+    styles,
+    checkedIndicator: controlsCheckboxCheck16X16.data
+});
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 //# sourceMappingURL=index.js.map

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

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