@ni/nimble-components 35.3.3 → 35.4.0

package/dist/custom-elements.json

@@ -394,13 +394,26 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor-tab/index.ts",
+      "path": "src/anchor-step/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A nimble-styled link tab",
-          "name": "AnchorTab",
+          "description": "A nimble-styled anchor step for a stepper",
+          "name": "AnchorStep",
           "members": [
+            {
+              "kind": "field",
+              "name": "severity",
+              "type": {
+                "text": "Severity"
+              },
+              "privacy": "public",
+              "description": "The severity state of the element",
+              "inheritedFrom": {
+                "name": "mixinSeverityPattern",
+                "module": "src/patterns/severity/types.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -408,38 +421,105 @@
                 "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."
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "ariaSelected",
+              "name": "readOnly",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
               "privacy": "public",
-              "default": "'false'",
-              "description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected"
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "severityText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "The severity text that will be displayed when a component is not in the default severity state",
+              "inheritedFrom": {
+                "name": "mixinSeverityPattern",
+                "module": "src/patterns/severity/types.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "severityHasOverflow",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "mixinSeverityPattern",
+                "module": "src/patterns/severity/types.ts"
+              }
             }
           ],
           "attributes": [
+            {
+              "name": "severity",
+              "type": {
+                "text": "AnchorStepSeverity"
+              },
+              "fieldName": "severity"
+            },
             {
               "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",
+              "name": "readonly",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'false'",
-              "description": "Indicates the current \"selected\" state of various widgets.\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-selected",
-              "fieldName": "ariaSelected"
+              "default": "false",
+              "fieldName": "readOnly"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "tabindex",
+              "type": {
+                "text": "number"
+              },
+              "fieldName": "tabIndex"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "mixinSeverityPattern",
+              "module": "/src/patterns/severity/types"
             }
           ],
           "superclass": {
@@ -449,69 +529,132 @@
         },
         {
           "kind": "variable",
-          "name": "anchorTabTag",
+          "name": "anchorStepTag",
           "type": {
             "text": "string"
           },
-          "default": "'nimble-anchor-tab'"
+          "default": "'nimble-anchor-step'"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "AnchorTab",
+          "name": "AnchorStep",
           "declaration": {
-            "name": "AnchorTab",
-            "module": "src/anchor-tab/index.ts"
+            "name": "AnchorStep",
+            "module": "src/anchor-step/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "anchorTabTag",
+          "name": "anchorStepTag",
           "declaration": {
-            "name": "anchorTabTag",
-            "module": "src/anchor-tab/index.ts"
+            "name": "anchorStepTag",
+            "module": "src/anchor-step/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor-step/index.ts",
+      "path": "src/anchor-step/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "AnchorStepSeverity",
+          "default": "Severity"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AnchorStepSeverity",
+          "declaration": {
+            "name": "AnchorStepSeverity",
+            "module": "src/anchor-step/types.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchor-tab/index.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "A nimble-styled anchor step for a stepper",
-          "name": "AnchorStep",
+          "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": "FoundationElement",
-            "package": "@ni/fast-foundation"
+            "name": "AnchorBase",
+            "module": "/src/anchor-base"
           }
         },
         {
           "kind": "variable",
-          "name": "anchorStepTag",
+          "name": "anchorTabTag",
           "type": {
             "text": "string"
           },
-          "default": "'nimble-anchor-step'"
+          "default": "'nimble-anchor-tab'"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "AnchorStep",
+          "name": "AnchorTab",
           "declaration": {
-            "name": "AnchorStep",
-            "module": "src/anchor-step/index.ts"
+            "name": "AnchorTab",
+            "module": "src/anchor-tab/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "anchorStepTag",
+          "name": "anchorTabTag",
           "declaration": {
-            "name": "anchorStepTag",
-            "module": "src/anchor-step/index.ts"
+            "name": "anchorTabTag",
+            "module": "src/anchor-tab/index.ts"
           }
         }
       ]
@@ -4981,8 +5124,113 @@
           "kind": "class",
           "description": "A nimble-styled step for a stepper",
           "name": "Step",
+          "members": [
+            {
+              "kind": "field",
+              "name": "severity",
+              "type": {
+                "text": "Severity"
+              },
+              "privacy": "public",
+              "description": "The severity state of the element",
+              "inheritedFrom": {
+                "name": "mixinSeverityPattern",
+                "module": "src/patterns/severity/types.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "readOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "severityText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "The severity text that will be displayed when a component is not in the default severity state",
+              "inheritedFrom": {
+                "name": "mixinSeverityPattern",
+                "module": "src/patterns/severity/types.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "severityHasOverflow",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "mixinSeverityPattern",
+                "module": "src/patterns/severity/types.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "severity",
+              "type": {
+                "text": "StepSeverity"
+              },
+              "fieldName": "severity"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "readOnly"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "tabindex",
+              "type": {
+                "text": "number"
+              },
+              "fieldName": "tabIndex"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "mixinSeverityPattern",
+              "module": "/src/patterns/severity/types"
+            }
+          ],
           "superclass": {
-            "name": "FoundationElement",
+            "name": "FoundationButton",
             "package": "@ni/fast-foundation"
           }
         },
@@ -5014,6 +5262,27 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/step/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "StepSeverity",
+          "default": "Severity"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "StepSeverity",
+          "declaration": {
+            "name": "StepSeverity",
+            "module": "src/step/types.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/stepper/index.ts",
@@ -5055,6 +5324,27 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/stepper/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "StepperOrientation",
+          "default": "Orientation"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "StepperOrientation",
+          "declaration": {
+            "name": "StepperOrientation",
+            "module": "src/stepper/types.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/switch/index.ts",
@@ -10269,6 +10559,86 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/patterns/severity/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "Severity",
+          "type": {
+            "text": "{\n    default: undefined,\n    error: 'error',\n    warning: 'warning',\n    success: 'success',\n}"
+          },
+          "default": "{ default: undefined, error: 'error', warning: 'warning', success: 'success', }"
+        },
+        {
+          "kind": "mixin",
+          "description": "",
+          "name": "mixinSeverityPattern",
+          "members": [
+            {
+              "kind": "field",
+              "name": "severity",
+              "type": {
+                "text": "Severity"
+              },
+              "privacy": "public",
+              "description": "The severity state of the element"
+            },
+            {
+              "kind": "field",
+              "name": "severityText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "The severity text that will be displayed when a component is not in the default severity state"
+            },
+            {
+              "kind": "field",
+              "name": "severityHasOverflow",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            }
+          ],
+          "parameters": [
+            {
+              "name": "base",
+              "type": {
+                "text": "TBase"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Severity",
+          "declaration": {
+            "name": "Severity",
+            "module": "src/patterns/severity/types.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "mixinSeverityPattern",
+          "declaration": {
+            "name": "mixinSeverityPattern",
+            "module": "src/patterns/severity/types.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/patterns/step/types.ts",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/patterns/tabs/types.ts",

package/dist/custom-elements.md

@@ -93,6 +93,38 @@
 
 <hr/>
 
+## class: `AnchorStep`
+
+### Superclass
+
+| Name         | Module           | Package |
+| ------------ | ---------------- | ------- |
+| `AnchorBase` | /src/anchor-base |         |
+
+### Fields
+
+| Name                  | Privacy | Type                  | Default | Description                                                                                    | Inherited From       |
+| --------------------- | ------- | --------------------- | ------- | ---------------------------------------------------------------------------------------------- | -------------------- |
+| `severity`            | public  | `Severity`            |         | The severity state of the element                                                              | mixinSeverityPattern |
+| `disabled`            | public  | `boolean`             | `false` |                                                                                                |                      |
+| `readOnly`            | public  | `boolean`             | `false` |                                                                                                |                      |
+| `selected`            | public  | `boolean`             | `false` |                                                                                                |                      |
+| `tabIndex`            | public  | `number`              |         |                                                                                                |                      |
+| `severityText`        | public  | `string \| undefined` |         | The severity text that will be displayed when a component is not in the default severity state | mixinSeverityPattern |
+| `severityHasOverflow` | public  | `boolean`             | `false` |                                                                                                | mixinSeverityPattern |
+
+### Attributes
+
+| Name       | Field    | Inherited From |
+| ---------- | -------- | -------------- |
+| `severity` | severity |                |
+| `disabled` | disabled |                |
+| `readonly` | readOnly |                |
+| `selected` | selected |                |
+| `tabindex` | tabIndex |                |
+
+<hr/>
+
 ## class: `AnchorTab`
 
 ### Superclass
@@ -117,16 +149,6 @@
 
 <hr/>
 
-## class: `AnchorStep`
-
-### Superclass
-
-| Name                | Module | Package             |
-| ------------------- | ------ | ------------------- |
-| `FoundationElement` |        | @ni/fast-foundation |
-
-<hr/>
-
 ## class: `AnchorTabs`
 
 ### Superclass
@@ -821,9 +843,29 @@
 
 ### Superclass
 
-| Name                | Module | Package             |
-| ------------------- | ------ | ------------------- |
-| `FoundationElement` |        | @ni/fast-foundation |
+| Name               | Module | Package             |
+| ------------------ | ------ | ------------------- |
+| `FoundationButton` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name                  | Privacy | Type                  | Default | Description                                                                                    | Inherited From       |
+| --------------------- | ------- | --------------------- | ------- | ---------------------------------------------------------------------------------------------- | -------------------- |
+| `severity`            | public  | `Severity`            |         | The severity state of the element                                                              | mixinSeverityPattern |
+| `readOnly`            | public  | `boolean`             | `false` |                                                                                                |                      |
+| `selected`            | public  | `boolean`             | `false` |                                                                                                |                      |
+| `tabIndex`            | public  | `number`              |         |                                                                                                |                      |
+| `severityText`        | public  | `string \| undefined` |         | The severity text that will be displayed when a component is not in the default severity state | mixinSeverityPattern |
+| `severityHasOverflow` | public  | `boolean`             | `false` |                                                                                                | mixinSeverityPattern |
+
+### Attributes
+
+| Name       | Field    | Inherited From |
+| ---------- | -------- | -------------- |
+| `severity` | severity |                |
+| `readonly` | readOnly |                |
+| `selected` | selected |                |
+| `tabindex` | tabIndex |                |
 
 <hr/>
 

package/dist/esm/anchor/styles.js

@@ -3,7 +3,7 @@ import { display } from '../utilities/style/display';
 import { focusVisible } from '../utilities/style/focus';
 import { borderHoverColor, linkActiveFontColor, linkActiveProminentFontColor, linkDisabledFontColor, linkFont, linkFontColor, linkProminentFontColor } from '../theme-provider/design-tokens';
 export const styles = css `
-    @layer base, hover, focusVisible, active, disabled;
+    @layer base, hover, focusVisible, active, disabled, top;
 
     @layer base {
         ${display('inline')}

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,gBAAgB,EAChB,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,QAAQ,CAAC;;;oBAGP,QAAQ;;;;;;;;qBAQP,aAAa;;;;;;;;;qBASb,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;kBAuBzB,YAAY;;;;qBAIT,gBAAgB;;;;;;qBAMhB,mBAAmB;;;;;;qBAMnB,4BAA4B;;;;;;;;;;qBAU5B,qBAAqB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    borderHoverColor,\n    linkActiveFontColor,\n    linkActiveProminentFontColor,\n    linkDisabledFontColor,\n    linkFont,\n    linkFontColor,\n    linkProminentFontColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled;\n\n    @layer base {\n        ${display('inline')}\n\n        :host {\n            font: ${linkFont};\n        }\n\n        .top-container {\n            display: contents;\n        }\n\n        .control {\n            color: ${linkFontColor};\n            text-decoration: underline;\n        }\n\n        :host([underline-hidden]) .control {\n            text-decoration: none;\n        }\n\n        :host([appearance='prominent']) .control {\n            color: ${linkProminentFontColor};\n        }\n\n        [part='start'] {\n            display: none;\n        }\n\n        .content {\n            pointer-events: none;\n        }\n\n        [part='end'] {\n            display: none;\n        }\n    }\n\n    @layer hover {\n        .control:any-link:hover {\n            text-decoration: underline;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            outline: none;\n            box-shadow: inset 0px -1px;\n            text-decoration: underline;\n            color: ${borderHoverColor};\n        }\n    }\n\n    @layer active {\n        .control:active {\n            color: ${linkActiveFontColor};\n            text-decoration: underline;\n            box-shadow: none;\n        }\n\n        :host([appearance='prominent']) .control:active {\n            color: ${linkActiveProminentFontColor};\n        }\n\n        :host([underline-hidden]) .control:active {\n            text-decoration: none;\n        }\n    }\n\n    @layer disabled {\n        .control:not(:any-link) {\n            color: ${linkDisabledFontColor};\n        }\n    }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,gBAAgB,EAChB,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACzB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,QAAQ,CAAC;;;oBAGP,QAAQ;;;;;;;;qBAQP,aAAa;;;;;;;;;qBASb,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;kBAuBzB,YAAY;;;;qBAIT,gBAAgB;;;;;;qBAMhB,mBAAmB;;;;;;qBAMnB,4BAA4B;;;;;;;;;;qBAU5B,qBAAqB;;;CAGzC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n    borderHoverColor,\n    linkActiveFontColor,\n    linkActiveProminentFontColor,\n    linkDisabledFontColor,\n    linkFont,\n    linkFontColor,\n    linkProminentFontColor\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('inline')}\n\n        :host {\n            font: ${linkFont};\n        }\n\n        .top-container {\n            display: contents;\n        }\n\n        .control {\n            color: ${linkFontColor};\n            text-decoration: underline;\n        }\n\n        :host([underline-hidden]) .control {\n            text-decoration: none;\n        }\n\n        :host([appearance='prominent']) .control {\n            color: ${linkProminentFontColor};\n        }\n\n        [part='start'] {\n            display: none;\n        }\n\n        .content {\n            pointer-events: none;\n        }\n\n        [part='end'] {\n            display: none;\n        }\n    }\n\n    @layer hover {\n        .control:any-link:hover {\n            text-decoration: underline;\n        }\n    }\n\n    @layer focusVisible {\n        .control${focusVisible} {\n            outline: none;\n            box-shadow: inset 0px -1px;\n            text-decoration: underline;\n            color: ${borderHoverColor};\n        }\n    }\n\n    @layer active {\n        .control:active {\n            color: ${linkActiveFontColor};\n            text-decoration: underline;\n            box-shadow: none;\n        }\n\n        :host([appearance='prominent']) .control:active {\n            color: ${linkActiveProminentFontColor};\n        }\n\n        :host([underline-hidden]) .control:active {\n            text-decoration: none;\n        }\n    }\n\n    @layer disabled {\n        .control:not(:any-link) {\n            color: ${linkDisabledFontColor};\n        }\n    }\n`;\n"]}