@ni/nimble-components 1.0.0-beta.11 → 1.0.0-beta.110

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

@@ -1,70 +1,118 @@
 import { css } from '@microsoft/fast-element';
-import { nimbleIconFontStyles } from '../shared/icon-font';
-import { borderColor, borderColorHover, fillColorSelectedRgb, fontFamily, fontColor, labelFontFamily, labelFontSize } from '../theme-provider/design-tokens';
+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 `
-  ${nimbleIconFontStyles}
-
-  :host {
-    display: inline-block;
-    font-family: ${fontFamily};
-    outline: none;
-    user-select: none;
-    color: ${fontColor};
-  }
-
-  .root {
-    box-sizing: border-box;
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    border-radius: 0px;
-    font-family: ${fontFamily};
-    border-bottom: 2px solid ${borderColor};
-  }
-
-  .root:hover {
-    border-bottom: 2px solid ${borderColorHover};
-  }
-
-  .control {
-    -webkit-appearance: none;
-    font: inherit;
-    background: transparent;
-    border: 0;
-    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: ${fontColor};
-    background: rgba(${fillColorSelectedRgb}, 0.3);
-  }
-
-  .control::placeholder {
-    color: ${fontColor};
-    opacity: 0.5;
-  }
-
-  .control:focus-within::placeholder {
-    opacity: 1;
-  }
-
-  .label {
-    font-family: ${labelFontFamily};
-    font-size: ${labelFontSize};
-    line-height: 16px;
-    text-transform: uppercase;
-  }
+    ${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/number-field/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,oBAAoB,EACpB,UAAU,EACV,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,oBAAoB;;;;mBAIL,UAAU;;;aAGhB,SAAS;;;;;;;;;mBASH,UAAU;+BACE,WAAW;;;;+BAIX,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;aAwBlC,SAAS;uBACC,oBAAoB;;;;aAI9B,SAAS;;;;;;;;;mBASH,eAAe;iBACjB,aAAa;;;;CAI7B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,WAAW,EACX,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,UAAU,EACV,QAAQ,EACR,cAAc,EACd,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACb,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;;;;;;uBAUlB,UAAU;yBACR,WAAW,eAAe,cAAc;;oCAE7B,UAAU,oBAAoB,UAAU;;;;;;;;;;mCAUzC,gBAAgB;;;;;;yBAM1B,WAAW,UAAU,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;iBAwBrD,cAAc;2BACJ,oBAAoB;;;;iBAI9B,cAAc;;;;;;;;iBAQd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;;;;;;;;;;;;;;;;;kBAoB1B,QAAQ;iBACT,QAAQ;gBACT,WAAW;;CAE1B,CAAC"}

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

@@ -0,0 +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>>;

package/dist/esm/select/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,8BAA8B,EAAE,MAAM,sDAAsD,CAAC;AACtG,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IACjC,IAAW,KAAK;QACZ,OAAO,KAAK,CAAC,KAAK,CAAC;IACvB,CAAC;IAED,IAAW,KAAK,CAAC,KAAa;QAC1B,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QAEpB,+DAA+D;QAC/D,qGAAqG;QACrG,qGAAqG;QACrG,sEAAsE;QACtE,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7C,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CACrC,gCAAgC,KAAK,IAAI,CAC5C,CAAC;YACF,IAAI,cAAc,KAAK,IAAI,EAAE;gBACzB,cAAc,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;aAC/C;SACJ;IACL,CAAC;IAED,+DAA+D;IACxD,cAAc;QACjB,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YACnC,qDAAqD;YACrD,mDAAmD;YACnD,OAAO;SACV;QACD,KAAK,CAAC,cAAc,EAAE,CAAC;IAC3B,CAAC;IAEM,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,kEAAkE;QAClE,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;CACJ;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IACtD,QAAQ,EAAE,QAAQ;IAClB,QAAQ;IACR,MAAM;IACN,SAAS,EAAE,8BAA8B,CAAC,IAAI;CACjD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}

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

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

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,2 @@
+import { Tab } from '@microsoft/fast-foundation';
+export type { Tab };

package/dist/esm/tab/index.js

@@ -0,0 +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());
+//# 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,EACH,WAAW,IAAI,QAAQ,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;IAC1B,QAAQ,EAAE,KAAK;IACf,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,2 @@
+import { TabPanel } from '@microsoft/fast-foundation';
+export type { TabPanel };

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

@@ -0,0 +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());
+//# 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,EACR,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,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,2 @@
+import { Tabs } from '@microsoft/fast-foundation';
+export type { Tabs };

package/dist/esm/tabs/index.js

@@ -0,0 +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());
+//# 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,EAEJ,YAAY,IAAI,QAAQ,EAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAc;IACzC,QAAQ,EAAE,MAAM;IAChB,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,6 @@
+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

@@ -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.
+ */
+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/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;AAEtC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB;CAAG;AAErD,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"}