@ni/nimble-components 8.3.0 → 8.6.0

package/dist/esm/nimble-components/src/toggle-button/index.d.ts

@@ -1,5 +1,6 @@
 import { DelegatesARIAButton, StartEnd, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
-import { ButtonAppearance } from '../patterns/button/types';
+import type { IButton } from '../patterns/button/types';
+import { ButtonAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-toggle-button': ToggleButton;
@@ -8,20 +9,14 @@ declare global {
 /**
  * A nimble-styled toggle button control.
  */
-export declare class ToggleButton extends FoundationSwitch {
+export declare class ToggleButton extends FoundationSwitch implements IButton {
     /**
-     * The appearance the button should have.
-     *
      * @public
      * @remarks
      * HTML Attribute: appearance
      */
     appearance: ButtonAppearance;
     /**
-     * Specify as 'true' to hide the text content of the button. The button will
-     * become square, and the text content will be used as the label of the button
-     * for accessibility purposes.
-     *
      * @public
      * @remarks
      * HTML Attribute: content-hidden

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

@@ -1,3 +1,23 @@
+/**
+ * The interface that buttons of various types implement. The properties in this interface
+ * are leveraged by the shared button pattern css.
+ */
+export interface IButton {
+    /**
+     * The appearance the button should have.
+     */
+    appearance: ButtonAppearance;
+    /**
+     * Specify as 'true' to hide the text content of the button. The button will
+     * become square, and the text content will be used as the label of the button
+     * for accessibility purposes.
+     */
+    contentHidden: boolean;
+    /**
+     * Whether or not the button is disabled.
+     */
+    disabled: boolean;
+}
 /**
  * Types of button appearance.
  * @public

package/dist/esm/patterns/button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/button/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,uCAAmB,CAAA;IACnB,mCAAe,CAAA;IACf,mCAAe,CAAA;AACnB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/button/types.ts"],"names":[],"mappings":"AAuBA;;;GAGG;AACH,MAAM,CAAN,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IACxB,uCAAmB,CAAA;IACnB,mCAAe,CAAA;IACf,mCAAe,CAAA;AACnB,CAAC,EAJW,gBAAgB,KAAhB,gBAAgB,QAI3B"}

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

@@ -43,6 +43,7 @@ export const styles = css `
         --ni-private-hover-bottom-border-width: 2px;
         border: 0px solid rgba(${borderRgbPartialColor}, 0.3);
         border-bottom-width: var(--ni-private-bottom-border-width);
+        gap: calc(${standardPadding} / 2);
         padding-bottom: calc(
             var(--ni-private-hover-bottom-border-width) -
                 var(--ni-private-bottom-border-width)
@@ -86,12 +87,40 @@ export const styles = css `
         border-bottom-color: ${borderHoverColor};
     }
 
+    :host([appearance='frameless'].clear-inline-padding) .root {
+        padding-left: 0px;
+        padding-right: 0px;
+    }
+
+    .root::before {
+        ${ /* Empty string causes alignment issue */''}
+        content: ' ';
+        color: transparent;
+        width: 0px;
+        user-select: none;
+    }
+
+    :host([appearance='frameless'].clear-inline-padding) .root::before {
+        display: none;
+    }
+
+    .root::after {
+        ${ /* Empty string causes alignment issue */''}
+        content: ' ';
+        color: transparent;
+        width: 0px;
+        user-select: none;
+    }
+
+    :host([appearance='frameless'].clear-inline-padding) .root::after {
+        display: none;
+    }
+
     [part='start'] {
         display: contents;
     }
 
     slot[name='start']::slotted(*) {
-        margin-left: calc(${standardPadding} / 2);
         flex: none;
     }
 
@@ -100,8 +129,7 @@ export const styles = css `
         font: inherit;
         background: transparent;
         color: inherit;
-        padding-top: 0px;
-        padding-bottom: 0px;
+        padding: 0px;
         height: calc(
             ${controlHeight} - ${borderWidth} -
                 var(--ni-private-hover-bottom-border-width)
@@ -109,8 +137,6 @@ export const styles = css `
         width: 100%;
         margin-top: auto;
         margin-bottom: auto;
-        padding-left: calc(${standardPadding} / 2);
-        padding-right: calc(${standardPadding} / 2);
         border: none;
         text-overflow: ellipsis;
     }
@@ -154,7 +180,6 @@ export const styles = css `
     :host(.invalid) .error-content svg {
         height: ${iconSize};
         width: ${iconSize};
-        padding-right: 8px;
         flex: none;
     }
 
@@ -195,7 +220,6 @@ export const styles = css `
     }
 
     slot[name='actions']::slotted(*) {
-        margin-right: 8px;
         ${controlHeight.cssCustomProperty}: 24px;
     }
 `.withBehaviors(appearanceBehavior(TextFieldAppearance.Underline, css `

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;oCAUV,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;;;;;;;;;;;;;;+BAevB,SAAS;;;;6BAIX,qBAAqB;;;;6BAIrB,qBAAqB;;;;;;;+BAOnB,gBAAgB;;;;;;;;;;;;+BAYhB,gBAAgB;;;;;;;;4BAQnB,eAAe;;;;;;;;;;;;cAY7B,aAAa,MAAM,WAAW;;;;;;6BAMf,eAAe;8BACd,eAAe;;;;;;;;;;;;;iBAa5B,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;;;;;;kBAgBpB,QAAQ;iBACT,QAAQ;;;;;;gBAMT,SAAS;;;;gBAIT,qBAAqB;;;;;;;;;gBASrB,aAAa;iBACZ,SAAS;;;eAGX,aAAa;;;;;;;;;;;iBAWX,qBAAqB;;;;;;;;;UAS5B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;;;qCAIP,qBAAqB;;;;;;SAMjD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;;;;;;;;;;;;yCAwBH,qBAAqB;;;;;yCAKrB,qBAAqB;;;;;;;;;;SAUrD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;;;4BAKf,aAAa,MAAM,WAAW;;SAEjD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;SAUnC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,QAAQ,EACR,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;gBAGb,QAAQ;;;;iBAIP,aAAa;uBACP,WAAW,MAAM,aAAa;;;;iBAIpC,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;oCAUV,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;oBAElC,eAAe;;;;;;;;;;;;;;+BAcJ,SAAS;;;;6BAIX,qBAAqB;;;;6BAIrB,qBAAqB;;;;;;;+BAOnB,gBAAgB;;;;;;;;;;;;+BAYhB,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;;;;;;;;;UAY5C,CAAA,yCAA0C,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;cA0BxC,aAAa,MAAM,WAAW;;;;;;;;;;;;;;;;;;iBAkB3B,qBAAqB;2BACX,2BAA2B;;;;iBAIrC,qBAAqB;;;;;;;;iBAQrB,qBAAqB;;;;;;;;;;;;;;;;kBAgBpB,QAAQ;iBACT,QAAQ;;;;;gBAKT,SAAS;;;;gBAIT,qBAAqB;;;;;;;;;gBASrB,aAAa;iBACZ,SAAS;;;eAGX,aAAa;;;;;;;;;;;iBAWX,qBAAqB;;;;;;;;UAQ5B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;;;qCAIP,qBAAqB;;;;;;SAMjD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;;;;;;;;;;;;yCAwBH,qBAAqB;;;;;yCAKrB,qBAAqB;;;;;;;;;;SAUrD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;;;4BAKf,aAAa,MAAM,WAAW;;SAEjD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;SAUnC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}

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

@@ -1,5 +1,6 @@
 import { DelegatesARIAButton, StartEnd, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
-import { ButtonAppearance } from '../patterns/button/types';
+import type { IButton } from '../patterns/button/types';
+import { ButtonAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-toggle-button': ToggleButton;
@@ -8,20 +9,14 @@ declare global {
 /**
  * A nimble-styled toggle button control.
  */
-export declare class ToggleButton extends FoundationSwitch {
+export declare class ToggleButton extends FoundationSwitch implements IButton {
     /**
-     * The appearance the button should have.
-     *
      * @public
      * @remarks
      * HTML Attribute: appearance
      */
     appearance: ButtonAppearance;
     /**
-     * Specify as 'true' to hide the text content of the button. The button will
-     * become square, and the text content will be used as the label of the button
-     * for accessibility purposes.
-     *
      * @public
      * @remarks
      * HTML Attribute: content-hidden

package/dist/esm/toggle-button/index.js

@@ -3,7 +3,7 @@ import { attr } from '@microsoft/fast-element';
 import { applyMixins, DelegatesARIAButton, DesignSystem, StartEnd, Switch as FoundationSwitch } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
-import { ButtonAppearance } from '../patterns/button/types';
+import { ButtonAppearance } from './types';
 /**
  * A nimble-styled toggle button control.
  */
@@ -11,18 +11,12 @@ export class ToggleButton extends FoundationSwitch {
     constructor() {
         super(...arguments);
         /**
-         * The appearance the button should have.
-         *
          * @public
          * @remarks
          * HTML Attribute: appearance
          */
         this.appearance = ButtonAppearance.Outline;
         /**
-         * Specify as 'true' to hide the text content of the button. The button will
-         * become square, and the text content will be used as the label of the button
-         * for accessibility purposes.
-         *
          * @public
          * @remarks
          * HTML Attribute: content-hidden

package/dist/esm/toggle-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EAEX,mBAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,MAAM,IAAI,gBAAgB,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAQ5D;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,gBAAgB;IAAlD;;QACI;;;;;;WAMG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAIjC,CAAC;CAAA;AAhBG;IADC,IAAI;gDAC0D;AAY/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAKjC,WAAW,CAAC,YAAY,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAAC;AAGzD,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,CAAgB;IAC3D,QAAQ,EAAE,eAAe;IACzB,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,kBAAkB,EAAE,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle-button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,WAAW,EAEX,mBAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,MAAM,IAAI,gBAAgB,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAQ3C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,gBAAgB;IAAlD;;QACI;;;;WAIG;QAEI,eAAU,GAAqB,gBAAgB,CAAC,OAAO,CAAC;QAE/D;;;;WAIG;QAEI,kBAAa,GAAG,KAAK,CAAC;IAIjC,CAAC;CAAA;AAZG;IADC,IAAI;gDAC0D;AAQ/D;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mDAC1B;AAKjC,WAAW,CAAC,YAAY,EAAE,QAAQ,EAAE,mBAAmB,CAAC,CAAC;AAGzD,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,CAAgB;IAC3D,QAAQ,EAAE,eAAe;IACzB,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,kBAAkB,EAAE,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "8.3.0",
+  "version": "8.6.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",