@ni/nimble-components 35.11.0 → 35.12.1

package/dist/custom-elements.json

@@ -392,6 +392,89 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchor-tab/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A nimble-styled link tab",
+          "name": "AnchorTab",
+          "members": [
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information."
+            },
+            {
+              "kind": "field",
+              "name": "ariaSelected",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "'false'",
+              "description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "aria-selected",
+              "type": {
+                "text": "string"
+              },
+              "default": "'false'",
+              "description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected",
+              "fieldName": "ariaSelected"
+            }
+          ],
+          "superclass": {
+            "name": "AnchorBase",
+            "module": "/src/anchor-base"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "anchorTabTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'nimble-anchor-tab'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AnchorTab",
+          "declaration": {
+            "name": "AnchorTab",
+            "module": "src/anchor-tab/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "anchorTabTag",
+          "declaration": {
+            "name": "anchorTabTag",
+            "module": "src/anchor-tab/index.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/anchor-step/index.ts",
@@ -576,89 +659,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/anchor-tab/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A nimble-styled link tab",
-          "name": "AnchorTab",
-          "members": [
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information."
-            },
-            {
-              "kind": "field",
-              "name": "ariaSelected",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "'false'",
-              "description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "aria-selected",
-              "type": {
-                "text": "string"
-              },
-              "default": "'false'",
-              "description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected",
-              "fieldName": "ariaSelected"
-            }
-          ],
-          "superclass": {
-            "name": "AnchorBase",
-            "module": "/src/anchor-base"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "anchorTabTag",
-          "type": {
-            "text": "string"
-          },
-          "default": "'nimble-anchor-tab'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AnchorTab",
-          "declaration": {
-            "name": "AnchorTab",
-            "module": "src/anchor-tab/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "anchorTabTag",
-          "declaration": {
-            "name": "anchorTabTag",
-            "module": "src/anchor-tab/index.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/anchor-tabs/index.ts",

package/dist/custom-elements.md

@@ -93,6 +93,30 @@
 
 <hr/>
 
+## class: `AnchorTab`
+
+### Superclass
+
+| Name         | Module           | Package |
+| ------------ | ---------------- | ------- |
+| `AnchorBase` | /src/anchor-base |         |
+
+### Fields
+
+| Name           | Privacy | Type      | Default   | Description                                                                                                                                                                               | Inherited From |
+| -------------- | ------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| `disabled`     | public  | `boolean` | `false`   | When true, the control will be immutable by user interaction. See https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information. |                |
+| `ariaSelected` | public  | `string`  | `'false'` | Indicates the current "selected" state of various widgets.&#xA;https\://www\.w3.org/TR/wai-aria-1.1/#aria-selected                                                                        |                |
+
+### Attributes
+
+| Name            | Field        | Inherited From |
+| --------------- | ------------ | -------------- |
+| `disabled`      | disabled     |                |
+| `aria-selected` | ariaSelected |                |
+
+<hr/>
+
 ## class: `AnchorStep`
 
 ### Superclass
@@ -125,30 +149,6 @@
 
 <hr/>
 
-## class: `AnchorTab`
-
-### Superclass
-
-| Name         | Module           | Package |
-| ------------ | ---------------- | ------- |
-| `AnchorBase` | /src/anchor-base |         |
-
-### Fields
-
-| Name           | Privacy | Type      | Default   | Description                                                                                                                                                                               | Inherited From |
-| -------------- | ------- | --------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `disabled`     | public  | `boolean` | `false`   | When true, the control will be immutable by user interaction. See https\://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled \| disabled HTML attribute for more information. |                |
-| `ariaSelected` | public  | `string`  | `'false'` | Indicates the current "selected" state of various widgets.&#xA;https\://www\.w3.org/TR/wai-aria-1.1/#aria-selected                                                                        |                |
-
-### Attributes
-
-| Name            | Field        | Inherited From |
-| --------------- | ------------ | -------------- |
-| `disabled`      | disabled     |                |
-| `aria-selected` | ariaSelected |                |
-
-<hr/>
-
 ## class: `AnchorTabs`
 
 ### Superclass

package/dist/esm/combobox/styles.js

@@ -12,6 +12,7 @@ export const styles = css `
     ${requiredVisibleStyles}
 
     :host {
+        field-sizing: fixed;
         --ni-private-hover-bottom-border-width: 2px;
         --ni-private-bottom-border-width: 1px;
         --ni-private-height-within-border: calc(
@@ -20,6 +21,7 @@ export const styles = css `
     }
 
     .control {
+        field-sizing: inherit;
         bottom-border-width: var(--ni-private-bottom-border-width);
     }
 
@@ -27,7 +29,12 @@ export const styles = css `
         border-bottom-color: ${borderHoverColor};
     }
 
+    slot[name='control'] {
+        field-sizing: inherit;
+    }
+
     .selected-value {
+        field-sizing: inherit;
         -webkit-appearance: none;
         background: transparent;
         border: none;

package/dist/esm/combobox/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/combobox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;MACX,qBAAqB;;;;;;cAMb,aAAa,UAAU,WAAW;;;;;;;;;+BASjB,gBAAgB;;;;;;;;;;;;;;;;;qBAiB1B,YAAY;;;;;iBAKhB,oBAAoB;;;;iBAIpB,qBAAqB;;;;iBAIrB,oBAAoB;;;;;;;;;;yBAUZ,YAAY;;;;;;;;;;uCAUE,qBAAqB;uBACrC,aAAa;;;;;;UAM1B,aAAa,CAAC,iBAAiB;uBAClB,YAAY;;;;gBAInB,qBAAqB;;CAEpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    controlHeight,\n    bodyDisabledFontColor,\n    borderRgbPartialColor,\n    smallPadding,\n    borderHoverColor,\n    borderWidth,\n    placeholderFontColor\n} from '../theme-provider/design-tokens';\n\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { focusVisible } from '../utilities/style/focus';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from '../select/types';\n\nexport const styles = css`\n    ${dropdownStyles}\n    ${errorStyles}\n    ${requiredVisibleStyles}\n\n    :host {\n        --ni-private-hover-bottom-border-width: 2px;\n        --ni-private-bottom-border-width: 1px;\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    .control {\n        bottom-border-width: var(--ni-private-bottom-border-width);\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    .selected-value {\n        -webkit-appearance: none;\n        background: transparent;\n        border: none;\n        color: inherit;\n        margin: auto 0;\n        width: 100%;\n        font: inherit;\n        height: var(--ni-private-height-within-border);\n    }\n\n    .selected-value:hover,\n    .selected-value:disabled,\n    .selected-value:active,\n    .selected-value${focusVisible} {\n        outline: none;\n    }\n\n    .selected-value::placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    :host([disabled]) .selected-value::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) .selected-value::placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    [part='indicator'] {\n        display: none;\n    }\n\n    .end-slot-container {\n        display: flex;\n        align-items: baseline;\n        padding-right: ${smallPadding};\n    }\n\n    :host([disabled][appearance-readonly]) .end-slot-container {\n        display: none;\n    }\n\n    .separator {\n        display: inline;\n        width: 2px;\n        border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);\n        height: calc(${controlHeight} - 12px);\n        align-self: center;\n        margin-left: 4px;\n    }\n\n    .dropdown-button {\n        ${controlHeight.cssCustomProperty}: 24px;\n        margin-left: ${smallPadding};\n    }\n\n    :host([disabled]) .dropdown-icon {\n        fill: ${bodyDisabledFontColor};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            :host([error-visible]) .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/combobox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,aAAa,EACb,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AAEzC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;MACX,qBAAqB;;;;;;;cAOb,aAAa,UAAU,WAAW;;;;;;;;;;+BAUjB,gBAAgB;;;;;;;;;;;;;;;;;;;;;;qBAsB1B,YAAY;;;;;iBAKhB,oBAAoB;;;;iBAIpB,qBAAqB;;;;iBAIrB,oBAAoB;;;;;;;;;;yBAUZ,YAAY;;;;;;;;;;uCAUE,qBAAqB;uBACrC,aAAa;;;;;;UAM1B,aAAa,CAAC,iBAAiB;uBAClB,YAAY;;;;gBAInB,qBAAqB;;CAEpC,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    controlHeight,\n    bodyDisabledFontColor,\n    borderRgbPartialColor,\n    smallPadding,\n    borderHoverColor,\n    borderWidth,\n    placeholderFontColor\n} from '../theme-provider/design-tokens';\n\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { focusVisible } from '../utilities/style/focus';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from '../select/types';\n\nexport const styles = css`\n    ${dropdownStyles}\n    ${errorStyles}\n    ${requiredVisibleStyles}\n\n    :host {\n        field-sizing: fixed;\n        --ni-private-hover-bottom-border-width: 2px;\n        --ni-private-bottom-border-width: 1px;\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    .control {\n        field-sizing: inherit;\n        bottom-border-width: var(--ni-private-bottom-border-width);\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    slot[name='control'] {\n        field-sizing: inherit;\n    }\n\n    .selected-value {\n        field-sizing: inherit;\n        -webkit-appearance: none;\n        background: transparent;\n        border: none;\n        color: inherit;\n        margin: auto 0;\n        width: 100%;\n        font: inherit;\n        height: var(--ni-private-height-within-border);\n    }\n\n    .selected-value:hover,\n    .selected-value:disabled,\n    .selected-value:active,\n    .selected-value${focusVisible} {\n        outline: none;\n    }\n\n    .selected-value::placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    :host([disabled]) .selected-value::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) .selected-value::placeholder {\n        color: ${placeholderFontColor};\n    }\n\n    [part='indicator'] {\n        display: none;\n    }\n\n    .end-slot-container {\n        display: flex;\n        align-items: baseline;\n        padding-right: ${smallPadding};\n    }\n\n    :host([disabled][appearance-readonly]) .end-slot-container {\n        display: none;\n    }\n\n    .separator {\n        display: inline;\n        width: 2px;\n        border-right: 2px solid rgba(${borderRgbPartialColor}, 0.15);\n        height: calc(${controlHeight} - 12px);\n        align-self: center;\n        margin-left: 4px;\n    }\n\n    .dropdown-button {\n        ${controlHeight.cssCustomProperty}: 24px;\n        margin-left: ${smallPadding};\n    }\n\n    :host([disabled]) .dropdown-icon {\n        fill: ${bodyDisabledFontColor};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        DropdownAppearance.block,\n        css`\n            :host([error-visible]) .control {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    )\n);\n"]}

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

@@ -16,6 +16,7 @@ export const styles = css `
         outline: none;
         ${userSelectNone}
         color: ${bodyFontColor};
+        field-sizing: fixed;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
             ${controlHeight} - 2 * ${borderWidth}
@@ -48,6 +49,7 @@ export const styles = css `
         position: relative;
         display: flex;
         flex-direction: row;
+        field-sizing: inherit;
         justify-content: center;
         align-items: center;
         border-radius: 0px;
@@ -115,12 +117,17 @@ export const styles = css `
         font: inherit;
         background: transparent;
         color: inherit;
+        field-sizing: inherit;
         height: var(--ni-private-height-within-border);
         width: 100%;
         border: none;
         padding: 0px;
         padding-left: ${mediumPadding};
     }
+    
+    :host([hide-step]) .control {
+        padding-right: ${smallPadding};
+    }
 
     .control:hover,
     .control:focus,
@@ -218,6 +225,7 @@ export const styles = css `
 
             :host([full-bleed]) .control {
                 padding-left: 0px;
+                padding-right: 0px;
             }
         `));
 //# 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,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;iCAUL,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;;6BAKlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBAyBhB,aAAa;;;;;;;;;;;;;;;iBAepB,qBAAqB;;;;iBAIrB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;yBAGqB,YAAY;;;;;;;;UAQ3B,aAAa,CAAC,iBAAiB;;;;;;;;;wBASjB,YAAY;;CAEnC,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;uCAKX,WAAW;;;;;;yCAMT,qBAAqB;;;;;;;uCAOvB,SAAS;;SAEvC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    controlLabelFont,\n    controlLabelFontColor,\n    smallDelay,\n    bodyFont,\n    failColor,\n    mediumPadding,\n    smallPadding,\n    controlLabelDisabledFontColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { NumberFieldAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-block')}\n    ${errorStyles}\n    ${requiredVisibleStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) {\n        color: ${bodyFontColor};\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) .label {\n        color: ${controlLabelFontColor};\n    }\n\n    .root {\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        border-radius: 0px;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        padding: ${borderWidth};\n    }\n\n    .root:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([readonly]) .root,\n    :host([disabled]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .root {\n        border-bottom-color: ${failColor};\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    .root::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        .root::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .root::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .root::after {\n        width: 100%;\n    }\n\n    :host([readonly]:hover) .root::after,\n    :host([disabled]:hover) .root::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        border: none;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    :host([disabled][appearance-readonly]) .control {\n        cursor: text;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    :host([disabled]) .control::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .controls {\n        display: contents;\n    }\n\n    ${\n        /* We are using flex `order` to define the visual ordering of the inc/dec buttons\n         and the invalid icon because they are not \"interactive\" i.e. part of the tab order */ ''\n    }\n    .step-up {\n        order: 3;\n        padding-right: ${smallPadding};\n    }\n\n    .step-down {\n        order: 2;\n    }\n\n    .step-up-down-button {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    .error-icon {\n        order: 1;\n        margin-right: ${smallPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        NumberFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .root:focus-within,\n            :host([error-visible]) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host(:hover) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([readonly]) .root,\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n                border-color: transparent;\n            }\n\n            :host([error-visible][readonly]) .root,\n            :host([error-visible][disabled]) .root {\n                padding-bottom: 0;\n                border-bottom-color: ${failColor};\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.frameless,\n        css`\n            .root {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            :host([full-bleed]) .control {\n                padding-left: 0px;\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;;mDAEqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;iCAWL,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;;6BAKlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;wBA0BhB,aAAa;;;;yBAIZ,YAAY;;;;;;;;;;;;;;;iBAepB,qBAAqB;;;;iBAIrB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;yBAGqB,YAAY;;;;;;;;UAQ3B,aAAa,CAAC,iBAAiB;;;;;;;;;wBASjB,YAAY;;CAEnC,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;uCAKX,WAAW;;;;;;yCAMT,qBAAqB;;;;;;;uCAOvB,SAAS;;SAEvC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;;SAOnC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlHeight,\n    controlLabelFont,\n    controlLabelFontColor,\n    smallDelay,\n    bodyFont,\n    failColor,\n    mediumPadding,\n    smallPadding,\n    controlLabelDisabledFontColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { NumberFieldAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-block')}\n    ${errorStyles}\n    ${requiredVisibleStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        field-sizing: fixed;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n        --ni-private-height-within-border: calc(\n            ${controlHeight} - 2 * ${borderWidth}\n        );\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) {\n        color: ${bodyFontColor};\n    }\n\n    .label {\n        display: flex;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) .label {\n        color: ${controlLabelFontColor};\n    }\n\n    .root {\n        position: relative;\n        display: flex;\n        flex-direction: row;\n        field-sizing: inherit;\n        justify-content: center;\n        align-items: center;\n        border-radius: 0px;\n        border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n        padding: ${borderWidth};\n    }\n\n    .root:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    :host([readonly]) .root,\n    :host([disabled]) .root {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([error-visible]) .root {\n        border-bottom-color: ${failColor};\n    }\n\n    .root::before {\n        ${/* Empty string causes alignment issue */ ''}\n        content: ' ';\n        color: transparent;\n        width: 0px;\n        ${userSelectNone}\n    }\n\n    .root::after {\n        content: '';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        .root::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .root::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .root::after {\n        width: 100%;\n    }\n\n    :host([readonly]:hover) .root::after,\n    :host([disabled]:hover) .root::after {\n        width: 0px;\n    }\n\n    [part='start'] {\n        display: none;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        background: transparent;\n        color: inherit;\n        field-sizing: inherit;\n        height: var(--ni-private-height-within-border);\n        width: 100%;\n        border: none;\n        padding: 0px;\n        padding-left: ${mediumPadding};\n    }\n    \n    :host([hide-step]) .control {\n        padding-right: ${smallPadding};\n    }\n\n    .control:hover,\n    .control:focus,\n    .control:disabled,\n    .control:active {\n        outline: none;\n    }\n\n    :host([disabled][appearance-readonly]) .control {\n        cursor: text;\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    :host([disabled]) .control::placeholder {\n        color: ${bodyDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    .controls {\n        display: contents;\n    }\n\n    ${\n        /* We are using flex `order` to define the visual ordering of the inc/dec buttons\n         and the invalid icon because they are not \"interactive\" i.e. part of the tab order */ ''\n    }\n    .step-up {\n        order: 3;\n        padding-right: ${smallPadding};\n    }\n\n    .step-down {\n        order: 2;\n    }\n\n    .step-up-down-button {\n        ${controlHeight.cssCustomProperty}: 24px;\n    }\n\n    [part='end'] {\n        display: contents;\n    }\n\n    .error-icon {\n        order: 1;\n        margin-right: ${smallPadding};\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        NumberFieldAppearance.underline,\n        css`\n            .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.block,\n        css`\n            .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            .root:focus-within,\n            :host([error-visible]) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host(:hover) .root {\n                border-bottom-width: ${borderWidth};\n                padding-bottom: 0;\n            }\n\n            :host([readonly]) .root,\n            :host([disabled]) .root {\n                background-color: rgba(${borderRgbPartialColor}, 0.07);\n                border-color: transparent;\n            }\n\n            :host([error-visible][readonly]) .root,\n            :host([error-visible][disabled]) .root {\n                padding-bottom: 0;\n                border-bottom-color: ${failColor};\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.outline,\n        css`\n            .root {\n                border-width: ${borderWidth};\n                padding: 0;\n            }\n        `\n    ),\n    appearanceBehavior(\n        NumberFieldAppearance.frameless,\n        css`\n            .root {\n                padding-left: ${borderWidth};\n                padding-right: ${borderWidth};\n            }\n\n            :host([full-bleed]) .control {\n                padding-left: 0px;\n                padding-right: 0px;\n            }\n        `\n    )\n);\n"]}

package/dist/esm/rich-text/editor/models/create-tiptap-editor.js

@@ -188,6 +188,18 @@ function createCustomMentionExtension(config, activeMentionCharacterEmitter, act
             allowSpaces: true,
             render: () => {
                 let inSuggestionMode = false;
+                // Tracks the query for which a `mention-update` event was last emitted.
+                // The tiptap suggestion plugin invokes `onStart`/`onUpdate` multiple times
+                // for a single query change (e.g. an initial render plus loading and resolved
+                // states of its async item fetch). We only want to emit `mention-update` once
+                // per distinct query, so we deduplicate against the last emitted query.
+                let lastEmittedQuery;
+                const emitMentionUpdateIfQueryChanged = (query) => {
+                    if (query !== lastEmittedQuery) {
+                        lastEmittedQuery = query;
+                        config.mentionUpdateEmitter(query);
+                    }
+                };
                 return {
                     onStart: (props) => {
                         /**
@@ -200,7 +212,7 @@ function createCustomMentionExtension(config, activeMentionCharacterEmitter, act
                             return;
                         }
                         inSuggestionMode = true;
-                        config.mentionUpdateEmitter(props.query);
+                        emitMentionUpdateIfQueryChanged(props.query);
                         activeMentionCharacterEmitter(props.text.slice(0, 1));
                         activeMentionCommandEmitter(props.command);
                         mentionListbox?.show({
@@ -212,7 +224,7 @@ function createCustomMentionExtension(config, activeMentionCharacterEmitter, act
                         if (!inSuggestionMode) {
                             return;
                         }
-                        config.mentionUpdateEmitter(props.query);
+                        emitMentionUpdateIfQueryChanged(props.query);
                         activeMentionCommandEmitter(props.command);
                         mentionListbox?.show({
                             filter: props.query,
@@ -229,6 +241,8 @@ function createCustomMentionExtension(config, activeMentionCharacterEmitter, act
                         return (mentionListbox?.keydownHandler(props.event) ?? false);
                     },
                     onExit: () => {
+                        inSuggestionMode = false;
+                        lastEmittedQuery = undefined;
                         activeMentionCharacterEmitter('');
                         activeMentionCommandEmitter(undefined);
                         mentionListbox?.close();

package/dist/esm/rich-text/editor/models/create-tiptap-editor.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-tiptap-editor.js","sourceRoot":"","sources":["../../../../../src/rich-text/editor/models/create-tiptap-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { Editor, Mark, Node, mergeAttributes } from '@tiptap/core';\nimport Bold from '@tiptap/extension-bold';\nimport Document from '@tiptap/extension-document';\nimport HardBreak from '@tiptap/extension-hard-break';\nimport Italic from '@tiptap/extension-italic';\nimport Link from '@tiptap/extension-link';\nimport { BulletList, ListItem, OrderedList } from '@tiptap/extension-list';\nimport Mention from '@tiptap/extension-mention';\nimport Paragraph from '@tiptap/extension-paragraph';\nimport Text from '@tiptap/extension-text';\nimport { Placeholder, UndoRedo } from '@tiptap/extensions';\nimport { Slice, Fragment, Node as FragmentNode } from 'prosemirror-model';\nimport { PluginKey } from 'prosemirror-state';\n\nimport { keyEscape } from '@ni/fast-web-utilities';\nimport {\n    type ActiveMentionCommandEmitter,\n    type ActiveMentionCharacterEmitter,\n    mentionPluginPrefix\n} from '../types';\n\nimport { anchorTag } from '../../../anchor';\nimport type { MentionExtensionConfiguration } from '../../models/mention-extension-configuration';\nimport type { RichTextMentionListbox } from '../../mention-listbox';\n\nconst validAbsoluteLinkRegex = /^https?:\\/\\//i;\n\nexport function createTiptapEditor(\n    activeMentionCharacterEmitter: ActiveMentionCharacterEmitter,\n    activeMentionCommandEmitter: ActiveMentionCommandEmitter,\n    editor: HTMLDivElement,\n    mentionExtensionConfig: MentionExtensionConfiguration[],\n    mentionListbox?: RichTextMentionListbox,\n    placeholder?: string\n): Editor {\n    const customLink = createCustomLinkExtension();\n    const mentionExtensions = mentionExtensionConfig.map(config => createCustomMentionExtension(\n        config,\n        activeMentionCharacterEmitter,\n        activeMentionCommandEmitter,\n        mentionListbox\n    ));\n\n    /**\n     * For more information on the extensions for the supported formatting options, refer to the links below.\n     * Tiptap marks: https://tiptap.dev/api/marks\n     * Tiptap nodes: https://tiptap.dev/api/nodes\n     */\n    const tipTapEditor = new Editor({\n        element: editor,\n        // The editor will detect markdown syntax for an input only for these items\n        // https://tiptap.dev/api/editor#enable-input-rules\n        enableInputRules: [BulletList, OrderedList],\n        // The editor will not detect markdown syntax when pasting content in any supported items\n        // Lists do not have any default paste rules, they have only input rules, so disabled paste rules\n        // https://tiptap.dev/api/editor#enable-paste-rules\n        enablePasteRules: false,\n        editorProps: {\n            // Validating whether the links in the pasted content belongs to the supported scheme (HTTPS/HTTP),\n            // and rendering it as a link in the editor. If not, rendering it as a plain text.\n            // Also, updating the link text content with its href as we support only the absolute link.\n\n            // `transformPasted` can be updated/removed when hyperlink support added\n            // See: https://github.com/ni/nimble/issues/1527\n            transformPasted\n        },\n        extensions: [\n            Document,\n            Paragraph,\n            Text,\n            BulletList,\n            OrderedList,\n            ListItem,\n            Bold,\n            Italic,\n            UndoRedo,\n            Placeholder.configure({\n                placeholder,\n                showOnlyWhenEditable: false\n            }),\n            HardBreak,\n            customLink,\n            ...mentionExtensions\n        ]\n    });\n\n    /**\n     * @param slice contains the Fragment of the copied content. If the content is a link, the slice contains Text node with Link mark.\n     * ProseMirror reference for `transformPasted`: https://prosemirror.net/docs/ref/#view.EditorProps.transformPasted\n     */\n    function transformPasted(slice: Slice): Slice {\n        const modifiedFragment = updateLinkAndMentionNodes(\n            tipTapEditor,\n            slice.content\n        );\n        return new Slice(modifiedFragment, slice.openStart, slice.openEnd);\n    }\n\n    return tipTapEditor;\n}\n\n/**\n * Extending the default link mark schema defined in the TipTap.\n *\n * \"excludes\": https://prosemirror.net/docs/ref/#model.MarkSpec.excludes\n * \"inclusive\": https://prosemirror.net/docs/ref/#model.MarkSpec.inclusive\n * \"parseHTML\": https://tiptap.dev/guide/custom-extensions#parse-html\n * \"renderHTML\": https://tiptap.dev/guide/custom-extensions/#render-html\n */\nfunction createCustomLinkExtension(): Mark {\n    return Link.extend({\n        // Excludes can be removed/enabled when hyperlink support added\n        // See: https://github.com/ni/nimble/issues/1527\n        excludes: '_',\n        // Inclusive can be updated when hyperlink support added\n        // See: https://github.com/ni/nimble/issues/1527\n        inclusive: false,\n        parseHTML() {\n            return [\n                // To load the `nimble-anchor` from the HTML parsed content by markdown-parser as links in the Tiptap editor, the `parseHTML`\n                // of Link extension should return nimble `anchorTag`.\n                // This is because the link mark schema in `markdown-parser.ts` file uses `<nimble-anchor>` as anchor tag and not `<a>`.\n                {\n                    tag: anchorTag\n                },\n                // `<a>` tag is added here to support when pasting a link from external source.\n                {\n                    tag: 'a'\n                }\n            ];\n        },\n        // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap\n        renderHTML({\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            HTMLAttributes\n        }: {\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            HTMLAttributes: { [key: string]: string }\n        }) {\n            // The below 'a' tag should be replaced with 'nimble-anchor' once the below issue is fixed.\n            // https://github.com/ni/nimble/issues/1516\n            return ['a', HTMLAttributes];\n        }\n    }).configure({\n        // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        HTMLAttributes: {\n            rel: 'noopener noreferrer',\n            target: null,\n            // Adding `class` here is a workaround to render two mentions without a whitespace as display names\n            // For more details on this behavior, refer to the issue below:\n            // https://github.com/ni/nimble/issues/1707\n            class: ''\n        },\n        autolink: true,\n        openOnClick: false,\n        // linkOnPaste can be enabled when hyperlink support added\n        // See: https://github.com/ni/nimble/issues/1527\n        linkOnPaste: false,\n        shouldAutoLink: href => validAbsoluteLinkRegex.test(href)\n    });\n}\n\nfunction createCustomMentionExtension(\n    config: MentionExtensionConfiguration,\n    activeMentionCharacterEmitter: ActiveMentionCharacterEmitter,\n    activeMentionCommandEmitter: ActiveMentionCommandEmitter,\n    mentionListbox?: RichTextMentionListbox\n): Node {\n    return Mention.extend({\n        name: config.name,\n        parseHTML() {\n            return [\n                {\n                    tag: config.viewElement\n                }\n            ];\n        },\n        addAttributes() {\n            return {\n                href: {\n                    default: null,\n                    parseHTML: (element: HTMLElement) => element.getAttribute('mention-href'),\n                    renderHTML: (attributes: { [key: string]: string }) => {\n                        return {\n                            'mention-href': attributes.href\n                        };\n                    }\n                },\n                label: {\n                    default: null,\n                    parseHTML: (element: HTMLElement) => element.getAttribute('mention-label'),\n                    renderHTML: (attributes: { [key: string]: string }) => {\n                        return {\n                            'mention-label': attributes.label\n                        };\n                    }\n                },\n                disabled: {\n                    default: null,\n                    parseHTML: (element: HTMLElement) => element.getAttribute('disabled'),\n                    renderHTML: (attributes: { [key: string]: string }) => {\n                        return {\n                            disabled: attributes.disabled\n                        };\n                    }\n                }\n            };\n        },\n        renderHTML({\n            node,\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            HTMLAttributes\n        }: {\n            node: FragmentNode,\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            HTMLAttributes: { [key: string]: string }\n        }) {\n            return [\n                config.viewElement,\n                mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n                this.options.renderText({\n                    options: this.options,\n                    node,\n                    suggestion: null\n                })\n            ];\n        }\n    }).configure({\n        suggestion: {\n            char: config.character,\n            decorationClass: 'nimble-mention-view-edit',\n            pluginKey: new PluginKey(config.key),\n            allowSpaces: true,\n            render: () => {\n                let inSuggestionMode = false;\n                return {\n                    onStart: (props): void => {\n                        /**\n                         * If the cursor position moves to outside of the mention and configuration element changes,\n                         * the setMarkdown() will trigger this `onStart` without a decoration node because the cursor\n                         * position is temporarily moved out of the suggestion decoration. Ignore `onStart` in that case\n                         * and don't show the mention list box since it doesn't have anything to anchor to.\n                         */\n                        if (props.decorationNode === null) {\n                            return;\n                        }\n                        inSuggestionMode = true;\n                        config.mentionUpdateEmitter(props.query);\n                        activeMentionCharacterEmitter(props.text.slice(0, 1));\n                        activeMentionCommandEmitter(props.command);\n                        mentionListbox?.show({\n                            filter: props.query,\n                            anchorNode: props.decorationNode as HTMLElement\n                        });\n                    },\n                    onUpdate: (props): void => {\n                        if (!inSuggestionMode) {\n                            return;\n                        }\n                        config.mentionUpdateEmitter(props.query);\n                        activeMentionCommandEmitter(props.command);\n                        mentionListbox?.show({\n                            filter: props.query,\n                            anchorNode: props.decorationNode as HTMLElement\n                        });\n                    },\n                    onKeyDown: (props): boolean => {\n                        if (!inSuggestionMode) {\n                            return false;\n                        }\n                        if (props.event.key === keyEscape) {\n                            inSuggestionMode = false;\n                        }\n                        return (\n                            mentionListbox?.keydownHandler(props.event) ?? false\n                        );\n                    },\n                    onExit: (): void => {\n                        activeMentionCharacterEmitter('');\n                        activeMentionCommandEmitter(undefined);\n                        mentionListbox?.close();\n                    }\n                };\n            }\n        }\n    });\n}\n\n/**\n * This method finds the Link mark in the pasted content and update its Text node.\n * If there is no text node, pass the node's fragment recursively and updates only node containing Link mark.\n * If the Text node does not contains Link mark, push the same node to `updatedNodes`.\n *\n * @param fragment Fragment containing the pasted content. [Fragment](https://prosemirror.net/docs/ref/#model.Fragment)\n * @returns modified fragment from the `updatedNode` after updating the valid link text with its href value.\n */\nfunction updateLinkAndMentionNodes(\n    tiptapEditor: Editor,\n    fragment: Fragment\n): Fragment {\n    const updatedNodes: FragmentNode[] = [];\n\n    fragment.forEach(node => {\n        if (node.isText && node.marks.length > 0) {\n            const linkMark = node.marks.find(\n                mark => mark.type.name === 'link'\n            );\n            if (linkMark) {\n                // Checks if the link is valid link or not\n                // Needing to separately validate the link on paste is a workaround for a tiptap issue\n                // See: https://github.com/ni/nimble/issues/1527\n                if (\n                    validAbsoluteLinkRegex.test(linkMark.attrs.href as string)\n                ) {\n                    // The below lines of code is responsible for updating the text content with its href value and creates a new updated text node.\n                    // This code needs an update when the hyperlink support is added.\n                    // See: https://github.com/ni/nimble/issues/1527\n                    updatedNodes.push(\n                        tiptapEditor.schema.text(\n                            linkMark.attrs.href as string,\n                            node.marks\n                        )\n                    );\n                } else {\n                    // If it is a invalid link, creates a new Text node with the same text content and without a Link mark.\n                    updatedNodes.push(\n                        tiptapEditor.schema.text(\n                            node.textContent,\n                            linkMark.removeFromSet(node.marks)\n                        )\n                    );\n                }\n            } else {\n                updatedNodes.push(node);\n            }\n        } else if (node.type.name.startsWith(mentionPluginPrefix)) {\n            updatedNodes.push(\n                tiptapEditor.schema.text(node.attrs.label as string)\n            );\n        } else {\n            const updatedContent = updateLinkAndMentionNodes(\n                tiptapEditor,\n                node.content\n            );\n            updatedNodes.push(node.copy(updatedContent));\n        }\n    });\n\n    return Fragment.fromArray(updatedNodes);\n}\n"]}
+{"version":3,"file":"create-tiptap-editor.js","sourceRoot":"","sources":["../../../../../src/rich-text/editor/models/create-tiptap-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { Editor, Mark, Node, mergeAttributes } from '@tiptap/core';\nimport Bold from '@tiptap/extension-bold';\nimport Document from '@tiptap/extension-document';\nimport HardBreak from '@tiptap/extension-hard-break';\nimport Italic from '@tiptap/extension-italic';\nimport Link from '@tiptap/extension-link';\nimport { BulletList, ListItem, OrderedList } from '@tiptap/extension-list';\nimport Mention from '@tiptap/extension-mention';\nimport Paragraph from '@tiptap/extension-paragraph';\nimport Text from '@tiptap/extension-text';\nimport { Placeholder, UndoRedo } from '@tiptap/extensions';\nimport { Slice, Fragment, Node as FragmentNode } from 'prosemirror-model';\nimport { PluginKey } from 'prosemirror-state';\n\nimport { keyEscape } from '@ni/fast-web-utilities';\nimport {\n    type ActiveMentionCommandEmitter,\n    type ActiveMentionCharacterEmitter,\n    mentionPluginPrefix\n} from '../types';\n\nimport { anchorTag } from '../../../anchor';\nimport type { MentionExtensionConfiguration } from '../../models/mention-extension-configuration';\nimport type { RichTextMentionListbox } from '../../mention-listbox';\n\nconst validAbsoluteLinkRegex = /^https?:\\/\\//i;\n\nexport function createTiptapEditor(\n    activeMentionCharacterEmitter: ActiveMentionCharacterEmitter,\n    activeMentionCommandEmitter: ActiveMentionCommandEmitter,\n    editor: HTMLDivElement,\n    mentionExtensionConfig: MentionExtensionConfiguration[],\n    mentionListbox?: RichTextMentionListbox,\n    placeholder?: string\n): Editor {\n    const customLink = createCustomLinkExtension();\n    const mentionExtensions = mentionExtensionConfig.map(config => createCustomMentionExtension(\n        config,\n        activeMentionCharacterEmitter,\n        activeMentionCommandEmitter,\n        mentionListbox\n    ));\n\n    /**\n     * For more information on the extensions for the supported formatting options, refer to the links below.\n     * Tiptap marks: https://tiptap.dev/api/marks\n     * Tiptap nodes: https://tiptap.dev/api/nodes\n     */\n    const tipTapEditor = new Editor({\n        element: editor,\n        // The editor will detect markdown syntax for an input only for these items\n        // https://tiptap.dev/api/editor#enable-input-rules\n        enableInputRules: [BulletList, OrderedList],\n        // The editor will not detect markdown syntax when pasting content in any supported items\n        // Lists do not have any default paste rules, they have only input rules, so disabled paste rules\n        // https://tiptap.dev/api/editor#enable-paste-rules\n        enablePasteRules: false,\n        editorProps: {\n            // Validating whether the links in the pasted content belongs to the supported scheme (HTTPS/HTTP),\n            // and rendering it as a link in the editor. If not, rendering it as a plain text.\n            // Also, updating the link text content with its href as we support only the absolute link.\n\n            // `transformPasted` can be updated/removed when hyperlink support added\n            // See: https://github.com/ni/nimble/issues/1527\n            transformPasted\n        },\n        extensions: [\n            Document,\n            Paragraph,\n            Text,\n            BulletList,\n            OrderedList,\n            ListItem,\n            Bold,\n            Italic,\n            UndoRedo,\n            Placeholder.configure({\n                placeholder,\n                showOnlyWhenEditable: false\n            }),\n            HardBreak,\n            customLink,\n            ...mentionExtensions\n        ]\n    });\n\n    /**\n     * @param slice contains the Fragment of the copied content. If the content is a link, the slice contains Text node with Link mark.\n     * ProseMirror reference for `transformPasted`: https://prosemirror.net/docs/ref/#view.EditorProps.transformPasted\n     */\n    function transformPasted(slice: Slice): Slice {\n        const modifiedFragment = updateLinkAndMentionNodes(\n            tipTapEditor,\n            slice.content\n        );\n        return new Slice(modifiedFragment, slice.openStart, slice.openEnd);\n    }\n\n    return tipTapEditor;\n}\n\n/**\n * Extending the default link mark schema defined in the TipTap.\n *\n * \"excludes\": https://prosemirror.net/docs/ref/#model.MarkSpec.excludes\n * \"inclusive\": https://prosemirror.net/docs/ref/#model.MarkSpec.inclusive\n * \"parseHTML\": https://tiptap.dev/guide/custom-extensions#parse-html\n * \"renderHTML\": https://tiptap.dev/guide/custom-extensions/#render-html\n */\nfunction createCustomLinkExtension(): Mark {\n    return Link.extend({\n        // Excludes can be removed/enabled when hyperlink support added\n        // See: https://github.com/ni/nimble/issues/1527\n        excludes: '_',\n        // Inclusive can be updated when hyperlink support added\n        // See: https://github.com/ni/nimble/issues/1527\n        inclusive: false,\n        parseHTML() {\n            return [\n                // To load the `nimble-anchor` from the HTML parsed content by markdown-parser as links in the Tiptap editor, the `parseHTML`\n                // of Link extension should return nimble `anchorTag`.\n                // This is because the link mark schema in `markdown-parser.ts` file uses `<nimble-anchor>` as anchor tag and not `<a>`.\n                {\n                    tag: anchorTag\n                },\n                // `<a>` tag is added here to support when pasting a link from external source.\n                {\n                    tag: 'a'\n                }\n            ];\n        },\n        // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap\n        renderHTML({\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            HTMLAttributes\n        }: {\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            HTMLAttributes: { [key: string]: string }\n        }) {\n            // The below 'a' tag should be replaced with 'nimble-anchor' once the below issue is fixed.\n            // https://github.com/ni/nimble/issues/1516\n            return ['a', HTMLAttributes];\n        }\n    }).configure({\n        // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap\n        // eslint-disable-next-line @typescript-eslint/naming-convention\n        HTMLAttributes: {\n            rel: 'noopener noreferrer',\n            target: null,\n            // Adding `class` here is a workaround to render two mentions without a whitespace as display names\n            // For more details on this behavior, refer to the issue below:\n            // https://github.com/ni/nimble/issues/1707\n            class: ''\n        },\n        autolink: true,\n        openOnClick: false,\n        // linkOnPaste can be enabled when hyperlink support added\n        // See: https://github.com/ni/nimble/issues/1527\n        linkOnPaste: false,\n        shouldAutoLink: href => validAbsoluteLinkRegex.test(href)\n    });\n}\n\nfunction createCustomMentionExtension(\n    config: MentionExtensionConfiguration,\n    activeMentionCharacterEmitter: ActiveMentionCharacterEmitter,\n    activeMentionCommandEmitter: ActiveMentionCommandEmitter,\n    mentionListbox?: RichTextMentionListbox\n): Node {\n    return Mention.extend({\n        name: config.name,\n        parseHTML() {\n            return [\n                {\n                    tag: config.viewElement\n                }\n            ];\n        },\n        addAttributes() {\n            return {\n                href: {\n                    default: null,\n                    parseHTML: (element: HTMLElement) => element.getAttribute('mention-href'),\n                    renderHTML: (attributes: { [key: string]: string }) => {\n                        return {\n                            'mention-href': attributes.href\n                        };\n                    }\n                },\n                label: {\n                    default: null,\n                    parseHTML: (element: HTMLElement) => element.getAttribute('mention-label'),\n                    renderHTML: (attributes: { [key: string]: string }) => {\n                        return {\n                            'mention-label': attributes.label\n                        };\n                    }\n                },\n                disabled: {\n                    default: null,\n                    parseHTML: (element: HTMLElement) => element.getAttribute('disabled'),\n                    renderHTML: (attributes: { [key: string]: string }) => {\n                        return {\n                            disabled: attributes.disabled\n                        };\n                    }\n                }\n            };\n        },\n        renderHTML({\n            node,\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            HTMLAttributes\n        }: {\n            node: FragmentNode,\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            HTMLAttributes: { [key: string]: string }\n        }) {\n            return [\n                config.viewElement,\n                mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n                this.options.renderText({\n                    options: this.options,\n                    node,\n                    suggestion: null\n                })\n            ];\n        }\n    }).configure({\n        suggestion: {\n            char: config.character,\n            decorationClass: 'nimble-mention-view-edit',\n            pluginKey: new PluginKey(config.key),\n            allowSpaces: true,\n            render: () => {\n                let inSuggestionMode = false;\n                // Tracks the query for which a `mention-update` event was last emitted.\n                // The tiptap suggestion plugin invokes `onStart`/`onUpdate` multiple times\n                // for a single query change (e.g. an initial render plus loading and resolved\n                // states of its async item fetch). We only want to emit `mention-update` once\n                // per distinct query, so we deduplicate against the last emitted query.\n                let lastEmittedQuery: string | undefined;\n                const emitMentionUpdateIfQueryChanged = (query: string): void => {\n                    if (query !== lastEmittedQuery) {\n                        lastEmittedQuery = query;\n                        config.mentionUpdateEmitter(query);\n                    }\n                };\n                return {\n                    onStart: (props): void => {\n                        /**\n                         * If the cursor position moves to outside of the mention and configuration element changes,\n                         * the setMarkdown() will trigger this `onStart` without a decoration node because the cursor\n                         * position is temporarily moved out of the suggestion decoration. Ignore `onStart` in that case\n                         * and don't show the mention list box since it doesn't have anything to anchor to.\n                         */\n                        if (props.decorationNode === null) {\n                            return;\n                        }\n                        inSuggestionMode = true;\n                        emitMentionUpdateIfQueryChanged(props.query);\n                        activeMentionCharacterEmitter(props.text.slice(0, 1));\n                        activeMentionCommandEmitter(props.command);\n                        mentionListbox?.show({\n                            filter: props.query,\n                            anchorNode: props.decorationNode as HTMLElement\n                        });\n                    },\n                    onUpdate: (props): void => {\n                        if (!inSuggestionMode) {\n                            return;\n                        }\n                        emitMentionUpdateIfQueryChanged(props.query);\n                        activeMentionCommandEmitter(props.command);\n                        mentionListbox?.show({\n                            filter: props.query,\n                            anchorNode: props.decorationNode as HTMLElement\n                        });\n                    },\n                    onKeyDown: (props): boolean => {\n                        if (!inSuggestionMode) {\n                            return false;\n                        }\n                        if (props.event.key === keyEscape) {\n                            inSuggestionMode = false;\n                        }\n                        return (\n                            mentionListbox?.keydownHandler(props.event) ?? false\n                        );\n                    },\n                    onExit: (): void => {\n                        inSuggestionMode = false;\n                        lastEmittedQuery = undefined;\n                        activeMentionCharacterEmitter('');\n                        activeMentionCommandEmitter(undefined);\n                        mentionListbox?.close();\n                    }\n                };\n            }\n        }\n    });\n}\n\n/**\n * This method finds the Link mark in the pasted content and update its Text node.\n * If there is no text node, pass the node's fragment recursively and updates only node containing Link mark.\n * If the Text node does not contains Link mark, push the same node to `updatedNodes`.\n *\n * @param fragment Fragment containing the pasted content. [Fragment](https://prosemirror.net/docs/ref/#model.Fragment)\n * @returns modified fragment from the `updatedNode` after updating the valid link text with its href value.\n */\nfunction updateLinkAndMentionNodes(\n    tiptapEditor: Editor,\n    fragment: Fragment\n): Fragment {\n    const updatedNodes: FragmentNode[] = [];\n\n    fragment.forEach(node => {\n        if (node.isText && node.marks.length > 0) {\n            const linkMark = node.marks.find(\n                mark => mark.type.name === 'link'\n            );\n            if (linkMark) {\n                // Checks if the link is valid link or not\n                // Needing to separately validate the link on paste is a workaround for a tiptap issue\n                // See: https://github.com/ni/nimble/issues/1527\n                if (\n                    validAbsoluteLinkRegex.test(linkMark.attrs.href as string)\n                ) {\n                    // The below lines of code is responsible for updating the text content with its href value and creates a new updated text node.\n                    // This code needs an update when the hyperlink support is added.\n                    // See: https://github.com/ni/nimble/issues/1527\n                    updatedNodes.push(\n                        tiptapEditor.schema.text(\n                            linkMark.attrs.href as string,\n                            node.marks\n                        )\n                    );\n                } else {\n                    // If it is a invalid link, creates a new Text node with the same text content and without a Link mark.\n                    updatedNodes.push(\n                        tiptapEditor.schema.text(\n                            node.textContent,\n                            linkMark.removeFromSet(node.marks)\n                        )\n                    );\n                }\n            } else {\n                updatedNodes.push(node);\n            }\n        } else if (node.type.name.startsWith(mentionPluginPrefix)) {\n            updatedNodes.push(\n                tiptapEditor.schema.text(node.attrs.label as string)\n            );\n        } else {\n            const updatedContent = updateLinkAndMentionNodes(\n                tiptapEditor,\n                node.content\n            );\n            updatedNodes.push(node.copy(updatedContent));\n        }\n    });\n\n    return Fragment.fromArray(updatedNodes);\n}\n"]}

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

@@ -16,6 +16,8 @@ export const styles = css `
         outline: none;
         ${userSelectNone}
         color: ${bodyFontColor};
+        field-sizing: fixed;
+        min-width: 100px;
         flex-direction: column;
         vertical-align: top;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
@@ -47,6 +49,7 @@ export const styles = css `
         display: flex;
         justify-content: center;
         position: relative;
+        field-sizing: inherit;
         height: 100%;
         width: 100%;
     }
@@ -91,7 +94,7 @@ export const styles = css `
         border-radius: 0px;
         align-items: flex-end;
         border: ${borderWidth} solid transparent;
-        min-width: 100px;
+        field-sizing: inherit;
         min-height: calc(${iconSize} + ${standardPadding});
         padding: 8px;
         ${

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;;;;4BAcV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;kBAqBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;;;;;+BAQnB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;;;;;;;;;;eAoBvB,aAAa;;;CAG3B,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;;;qCAIzB,qBAAqB;;;;;uCAKnB,SAAS;;SAEvC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    smallDelay,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    bodyFont,\n    controlLabelDisabledFontColor,\n    iconSize,\n    failColor,\n    standardPadding,\n    mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n    ${requiredVisibleStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        flex-direction: column;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) {\n        color: ${bodyFontColor};\n    }\n\n    .label {\n        display: block;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) .label {\n        color: ${controlLabelFontColor};\n    }\n\n    .container {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        height: 100%;\n        width: 100%;\n    }\n\n    .container::after {\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) .container::after,\n    :host([readonly]:hover) .container::after {\n        width: 0px;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        flex-grow: 1;\n        outline: none;\n        position: relative;\n        color: inherit;\n        border-radius: 0px;\n        align-items: flex-end;\n        border: ${borderWidth} solid transparent;\n        min-width: 100px;\n        min-height: calc(${iconSize} + ${standardPadding});\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        margin: 0px;\n        resize: none;\n    }\n\n    @media (prefers-reduced-motion) {\n        .control {\n            transition-duration: 0s;\n        }\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    .control[readonly],\n    .control[readonly]:hover,\n    .control[readonly]:hover:focus-within,\n    .control[disabled],\n    .control[disabled]:hover {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([disabled][appearance-readonly]) .control {\n        cursor: text;\n    }\n\n    :host([error-visible]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]) .control[readonly]:hover:focus-within {\n        border-bottom-color: ${failColor};\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    :host([disabled]) .control::placeholder {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    :host([resize='both']) .control {\n        resize: both;\n    }\n    :host([resize='horizontal']) .control {\n        resize: horizontal;\n    }\n    :host([resize='vertical']) .control {\n        resize: vertical;\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-scrollbar-width);\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextAreaAppearance.outline,\n        css`\n            .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.3);\n                background-color: transparent;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextAreaAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([readonly]) .control {\n                background-color: transparent;\n            }\n\n            :host([disabled]) .control {\n                border-color: transparent;\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([disabled][appearance-readonly]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n                background-color: transparent;\n            }\n\n            :host([error-visible][disabled]) .control {\n                border-bottom-color: ${failColor};\n            }\n        `\n    )\n);\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;;;mDAKqB,WAAW;;;;iBAI7C,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;;;;;4BAeV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;kBAqBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;;;;;+BAQnB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;;;;;;;;;;eAoBvB,aAAa;;;CAG3B,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;;;qCAIzB,qBAAqB;;;;;uCAKnB,SAAS;;SAEvC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n    borderRgbPartialColor,\n    borderHoverColor,\n    borderWidth,\n    smallDelay,\n    bodyFontColor,\n    bodyDisabledFontColor,\n    controlLabelFont,\n    controlLabelFontColor,\n    bodyFont,\n    controlLabelDisabledFontColor,\n    iconSize,\n    failColor,\n    standardPadding,\n    mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n    ${display('inline-flex')}\n    ${errorStyles}\n    ${requiredVisibleStyles}\n\n    :host {\n        font: ${bodyFont};\n        outline: none;\n        ${userSelectNone}\n        color: ${bodyFontColor};\n        field-sizing: fixed;\n        min-width: 100px;\n        flex-direction: column;\n        vertical-align: top;\n        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n    }\n\n    :host([disabled]) {\n        color: ${bodyDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) {\n        color: ${bodyFontColor};\n    }\n\n    .label {\n        display: block;\n        color: ${controlLabelFontColor};\n        font: ${controlLabelFont};\n    }\n\n    :host([disabled]) .label {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) .label {\n        color: ${controlLabelFontColor};\n    }\n\n    .container {\n        display: flex;\n        justify-content: center;\n        position: relative;\n        field-sizing: inherit;\n        height: 100%;\n        width: 100%;\n    }\n\n    .container::after {\n        content: ' ';\n        position: absolute;\n        bottom: calc(-1 * ${borderWidth});\n        width: 0px;\n        height: 0px;\n        border-bottom: ${borderHoverColor}\n            var(--ni-private-hover-indicator-width) solid;\n        transition: width ${smallDelay} ease-in;\n    }\n\n    @media (prefers-reduced-motion) {\n        .container::after {\n            transition-duration: 0s;\n        }\n    }\n\n    :host([error-visible]) .container::after {\n        border-bottom-color: ${failColor};\n    }\n\n    :host(:hover) .container::after {\n        width: 100%;\n    }\n\n    :host([disabled]:hover) .container::after,\n    :host([readonly]:hover) .container::after {\n        width: 0px;\n    }\n\n    .control {\n        -webkit-appearance: none;\n        font: inherit;\n        flex-grow: 1;\n        outline: none;\n        position: relative;\n        color: inherit;\n        border-radius: 0px;\n        align-items: flex-end;\n        border: ${borderWidth} solid transparent;\n        field-sizing: inherit;\n        min-height: calc(${iconSize} + ${standardPadding});\n        padding: 8px;\n        ${\n            /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n        }\n        padding-right: calc(${iconSize});\n        margin: 0px;\n        resize: none;\n    }\n\n    @media (prefers-reduced-motion) {\n        .control {\n            transition-duration: 0s;\n        }\n    }\n\n    .control:focus-within {\n        border-bottom-color: ${borderHoverColor};\n    }\n\n    .control[readonly],\n    .control[readonly]:hover,\n    .control[readonly]:hover:focus-within,\n    .control[disabled],\n    .control[disabled]:hover {\n        border-color: rgba(${borderRgbPartialColor}, 0.1);\n    }\n\n    :host([disabled][appearance-readonly]) .control {\n        cursor: text;\n    }\n\n    :host([error-visible]) .control {\n        border-bottom-color: ${failColor};\n    }\n\n    :host([error-visible]) .control[readonly]:hover:focus-within {\n        border-bottom-color: ${failColor};\n    }\n\n    .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    :host([disabled]) .control::placeholder {\n        color: ${controlLabelDisabledFontColor};\n    }\n\n    :host([disabled][appearance-readonly]) .control::placeholder {\n        color: ${controlLabelFontColor};\n    }\n\n    :host([resize='both']) .control {\n        resize: both;\n    }\n    :host([resize='horizontal']) .control {\n        resize: horizontal;\n    }\n    :host([resize='vertical']) .control {\n        resize: vertical;\n    }\n\n    :host([error-visible]) .error-icon {\n        display: none;\n    }\n\n    :host([error-visible]) .error-icon.scrollbar-width-calculated {\n        display: inline-flex;\n        position: absolute;\n        top: ${mediumPadding};\n        right: var(--ni-private-scrollbar-width);\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        TextAreaAppearance.outline,\n        css`\n            .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.3);\n                background-color: transparent;\n            }\n        `\n    ),\n    appearanceBehavior(\n        TextAreaAppearance.block,\n        css`\n            .control {\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([readonly]) .control {\n                background-color: transparent;\n            }\n\n            :host([disabled]) .control {\n                border-color: transparent;\n                background-color: rgba(${borderRgbPartialColor}, 0.1);\n            }\n\n            :host([disabled][appearance-readonly]) .control {\n                border-color: rgba(${borderRgbPartialColor}, 0.1);\n                background-color: transparent;\n            }\n\n            :host([error-visible][disabled]) .control {\n                border-bottom-color: ${failColor};\n            }\n        `\n    )\n);\n"]}

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

@@ -18,6 +18,7 @@ export const styles = css `
         outline: none;
         ${userSelectNone}
         color: ${bodyFontColor};
+        field-sizing: fixed;
         --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
         --ni-private-height-within-border: calc(
             ${controlHeight} - 2 * ${borderWidth}
@@ -52,6 +53,7 @@ export const styles = css `
         display: flex;
         flex-direction: row;
         border-radius: 0px;
+        field-sizing: inherit;
         font: inherit;
         align-items: center;
         justify-content: center;
@@ -130,6 +132,7 @@ export const styles = css `
         background: transparent;
         color: inherit;
         padding: 0px;
+        field-sizing: inherit;
         height: var(--ni-private-height-within-border);
         width: 100%;
         margin-top: auto;