@nordhealth/components 1.0.0-alpha.38 → 1.0.0-alpha.41

package/custom-elements.json

@@ -79,6 +79,14 @@
             "module": "\"./stack/Stack.js\""
           }
         },
+        {
+          "kind": "js",
+          "name": "Spinner",
+          "declaration": {
+            "name": "default",
+            "module": "\"./spinner/Spinner.js\""
+          }
+        },
         {
           "kind": "js",
           "name": "Table",
@@ -671,6 +679,184 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/collection.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "groupBy",
+          "parameters": [
+            {
+              "name": "array",
+              "type": {
+                "text": "Array<TObject>"
+              },
+              "description": "the collection of objects to group"
+            },
+            {
+              "name": "key",
+              "type": {
+                "text": "TKey"
+              },
+              "description": "the property to group by"
+            }
+          ],
+          "description": "Groups an array objects by property value",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "groupBy",
+          "declaration": {
+            "name": "groupBy",
+            "module": "src/common/collection.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/events.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A base class for events which defaults to bubbling and composed",
+          "name": "NordEvent",
+          "superclass": {
+            "name": "Event",
+            "module": "src/common/events.ts"
+          },
+          "status": null,
+          "category": null
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "NordEvent",
+          "declaration": {
+            "name": "NordEvent",
+            "module": "src/common/events.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/focus.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "getFocusedElement",
+          "return": {
+            "type": {
+              "text": "Element | undefined"
+            }
+          },
+          "parameters": [
+            {
+              "name": "root",
+              "type": {
+                "text": "Document | ShadowRoot"
+              }
+            }
+          ],
+          "description": "Gets the currently focused element, taking shadow roots into account."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "getFocusedElement",
+          "declaration": {
+            "name": "getFocusedElement",
+            "module": "src/common/focus.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/number.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "wrap",
+          "parameters": [
+            {
+              "name": "val",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "Wraps a value so that it always falls within min/max,\nwhere a value greater than max gets set to min, and vice versa"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "wrap",
+          "declaration": {
+            "name": "wrap",
+            "module": "src/common/number.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/common/ref.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "mergeRefs",
+          "return": {
+            "type": {
+              "text": "RefCallback"
+            }
+          },
+          "parameters": [
+            {
+              "name": "refs",
+              "type": {
+                "text": "Ref[]"
+              }
+            }
+          ],
+          "description": "Creates a ref callback which will assign the element to every given ref"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "mergeRefs",
+          "declaration": {
+            "name": "mergeRefs",
+            "module": "src/common/ref.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/command-menu/CommandMenu.ts",
@@ -1196,210 +1382,32 @@
       "path": "src/command-menu/events.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "SelectEvent",
-          "members": [
-            {
-              "kind": "field",
-              "name": "command",
-              "type": {
-                "text": "ICommandMenuAction"
-              },
-              "default": "command"
-            }
-          ],
-          "superclass": {
-            "name": "NordEvent",
-            "module": "/src/common/events.js"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SelectEvent",
-          "declaration": {
-            "name": "SelectEvent",
-            "module": "src/command-menu/events.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/collection.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "groupBy",
-          "parameters": [
-            {
-              "name": "array",
-              "type": {
-                "text": "Array<TObject>"
-              },
-              "description": "the collection of objects to group"
-            },
-            {
-              "name": "key",
-              "type": {
-                "text": "TKey"
-              },
-              "description": "the property to group by"
-            }
-          ],
-          "description": "Groups an array objects by property value",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "groupBy",
-          "declaration": {
-            "name": "groupBy",
-            "module": "src/common/collection.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/events.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A base class for events which defaults to bubbling and composed",
-          "name": "NordEvent",
-          "superclass": {
-            "name": "Event",
-            "module": "src/common/events.ts"
-          },
-          "status": null,
-          "category": null
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "NordEvent",
-          "declaration": {
-            "name": "NordEvent",
-            "module": "src/common/events.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/focus.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "getFocusedElement",
-          "return": {
-            "type": {
-              "text": "Element | undefined"
-            }
-          },
-          "parameters": [
-            {
-              "name": "root",
-              "type": {
-                "text": "Document | ShadowRoot"
-              }
-            }
-          ],
-          "description": "Gets the currently focused element, taking shadow roots into account."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "getFocusedElement",
-          "declaration": {
-            "name": "getFocusedElement",
-            "module": "src/common/focus.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/number.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "wrap",
-          "parameters": [
-            {
-              "name": "val",
-              "type": {
-                "text": "number"
-              }
-            },
-            {
-              "name": "min",
-              "type": {
-                "text": "number"
-              }
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "number"
-              }
-            }
-          ],
-          "description": "Wraps a value so that it always falls within min/max,\nwhere a value greater than max gets set to min, and vice versa"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "wrap",
-          "declaration": {
-            "name": "wrap",
-            "module": "src/common/number.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/common/ref.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "mergeRefs",
-          "return": {
-            "type": {
-              "text": "RefCallback"
-            }
-          },
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "SelectEvent",
+          "members": [
             {
-              "name": "refs",
+              "kind": "field",
+              "name": "command",
               "type": {
-                "text": "Ref[]"
-              }
+                "text": "ICommandMenuAction"
+              },
+              "default": "command"
             }
           ],
-          "description": "Creates a ref callback which will assign the element to every given ref"
+          "superclass": {
+            "name": "NordEvent",
+            "module": "/src/common/events.js"
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "mergeRefs",
+          "name": "SelectEvent",
           "declaration": {
-            "name": "mergeRefs",
-            "module": "src/common/ref.ts"
+            "name": "SelectEvent",
+            "module": "src/command-menu/events.ts"
           }
         }
       ]
@@ -2781,49 +2789,141 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/stack/Stack.ts",
+      "path": "src/table/Table.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
-          "name": "Stack",
+          "description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
+          "name": "Table",
           "slots": [
             {
-              "description": "The stack content.",
+              "description": "The table.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "gap",
+              "name": "density",
               "type": {
-                "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
+              },
+              "default": "\"default\"",
+              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
+              "attribute": "density",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderStyles",
+              "privacy": "private",
+              "description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
+            },
+            {
+              "kind": "method",
+              "name": "createRenderRoot",
+              "privacy": "protected",
+              "description": "opt out of shadow dom"
+            },
+            {
+              "kind": "field",
+              "name": "_warningLogged",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "static": true,
+              "default": "false",
+              "inheritedFrom": {
+                "name": "DraftComponentMixin",
+                "module": "src/common/mixins/DraftComponentMixin.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "density",
+              "type": {
+                "text": "\"condensed\" | \"default\" | \"relaxed\""
+              },
+              "default": "\"default\"",
+              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
+              "fieldName": "density"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DraftComponentMixin",
+              "module": "/src/common/mixins/DraftComponentMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "status": "draft",
+          "category": "list",
+          "tagName": "nord-table",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Table",
+            "module": "src/table/Table.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "nord-table",
+          "declaration": {
+            "name": "Table",
+            "module": "src/table/Table.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/spinner/Spinner.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Spinner component is used to indicate users that their action is being\nprocessed. You can customize the size and color of the spinner with the\nprovided properties.",
+          "name": "Spinner",
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
               },
               "default": "\"m\"",
-              "description": "The space injected between components.",
-              "attribute": "gap",
+              "description": "The size of the spinner.",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "direction",
+              "name": "color",
               "type": {
-                "text": "\"vertical\" | \"horizontal\""
+                "text": "string | undefined"
               },
-              "default": "\"vertical\"",
-              "description": "The direction of the stack.",
-              "attribute": "direction",
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
+              "attribute": "color",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "alignItems",
+              "name": "label",
               "type": {
-                "text": "\"center\" | \"start\" | \"end\" | undefined"
+                "text": "string | undefined"
               },
-              "description": "How to align the child items inside the stack.",
-              "attribute": "align-items",
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "attribute": "label",
               "reflects": true
             },
             {
@@ -2843,30 +2943,29 @@
           ],
           "attributes": [
             {
-              "name": "gap",
+              "name": "size",
               "type": {
-                "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
+                "text": "\"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
               },
               "default": "\"m\"",
-              "description": "The space injected between components.",
-              "fieldName": "gap"
+              "description": "The size of the spinner.",
+              "fieldName": "size"
             },
             {
-              "name": "direction",
+              "name": "color",
               "type": {
-                "text": "\"vertical\" | \"horizontal\""
+                "text": "string | undefined"
               },
-              "default": "\"vertical\"",
-              "description": "The direction of the stack.",
-              "fieldName": "direction"
+              "description": "The color of the spinner.\nCan accept any valid CSS color value, including custom properties.",
+              "fieldName": "color"
             },
             {
-              "name": "align-items",
+              "name": "label",
               "type": {
-                "text": "\"center\" | \"start\" | \"end\" | undefined"
+                "text": "string | undefined"
               },
-              "description": "How to align the child items inside the stack.",
-              "fieldName": "alignItems"
+              "description": "An accessible label for the spinner.\nIf no label is supplied, the spinner is hidden from assistive technology.",
+              "fieldName": "label"
             }
           ],
           "mixins": [
@@ -2880,8 +2979,8 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "structure",
-          "tagName": "nord-stack",
+          "category": "feedback",
+          "tagName": "nord-spinner",
           "customElement": true
         }
       ],
@@ -2890,57 +2989,66 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Stack",
-            "module": "src/stack/Stack.ts"
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-stack",
+          "name": "nord-spinner",
           "declaration": {
-            "name": "Stack",
-            "module": "src/stack/Stack.ts"
+            "name": "Spinner",
+            "module": "src/spinner/Spinner.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/table/Table.ts",
+      "path": "src/stack/Stack.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Table is used to organize and display information from a data set.\nProvides table styles in addition to features like sticky\nheaders and support for narrow viewports.",
-          "name": "Table",
+          "description": "Stack component manages layout of immediate children along the\nvertical or horizontal axis with optional spacing between each child.",
+          "name": "Stack",
           "slots": [
             {
-              "description": "The table.",
+              "description": "The stack content.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "density",
+              "name": "gap",
               "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
+                "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
               },
-              "default": "\"default\"",
-              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
-              "attribute": "density",
+              "default": "\"m\"",
+              "description": "The space injected between components.",
+              "attribute": "gap",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "renderStyles",
-              "privacy": "private",
-              "description": "renders table styles into nearest root.\nthis is necessary since we do not use shadow dom."
+              "kind": "field",
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"vertical\"",
+              "description": "The direction of the stack.",
+              "attribute": "direction",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "createRenderRoot",
-              "privacy": "protected",
-              "description": "opt out of shadow dom"
+              "kind": "field",
+              "name": "alignItems",
+              "type": {
+                "text": "\"center\" | \"start\" | \"end\" | undefined"
+              },
+              "description": "How to align the child items inside the stack.",
+              "attribute": "align-items",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -2959,13 +3067,30 @@
           ],
           "attributes": [
             {
-              "name": "density",
+              "name": "gap",
               "type": {
-                "text": "\"condensed\" | \"default\" | \"relaxed\""
+                "text": "\"none\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\""
               },
-              "default": "\"default\"",
-              "description": "Controls the density of the table's rows and headers.\nRelaxed increases space, condensed reduces space.",
-              "fieldName": "density"
+              "default": "\"m\"",
+              "description": "The space injected between components.",
+              "fieldName": "gap"
+            },
+            {
+              "name": "direction",
+              "type": {
+                "text": "\"vertical\" | \"horizontal\""
+              },
+              "default": "\"vertical\"",
+              "description": "The direction of the stack.",
+              "fieldName": "direction"
+            },
+            {
+              "name": "align-items",
+              "type": {
+                "text": "\"center\" | \"start\" | \"end\" | undefined"
+              },
+              "description": "How to align the child items inside the stack.",
+              "fieldName": "alignItems"
             }
           ],
           "mixins": [
@@ -2979,8 +3104,8 @@
             "package": "lit"
           },
           "status": "draft",
-          "category": "list",
-          "tagName": "nord-table",
+          "category": "structure",
+          "tagName": "nord-stack",
           "customElement": true
         }
       ],
@@ -2989,16 +3114,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
+            "name": "Stack",
+            "module": "src/stack/Stack.ts"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "nord-table",
+          "name": "nord-stack",
           "declaration": {
-            "name": "Table",
-            "module": "src/table/Table.ts"
+            "name": "Stack",
+            "module": "src/stack/Stack.ts"
           }
         }
       ]