@genesislcap/foundation-zero 14.84.0 → 14.85.0

package/dist/custom-elements.json

@@ -1153,7 +1153,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor/anchor.stories.ts",
+      "path": "src/actions-menu/actions-menu.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -1161,15 +1161,23 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Anchor',\n  component: 'zero-anchor',\n}"
+          "default": "{\n  title: 'Actions Menu',\n  component: 'zero-actions-menu',\n}"
         },
         {
           "kind": "variable",
-          "name": "All",
+          "name": "Horizontal",
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  args: {\n    anchorText: 'Rapid Anchor',\n    appearances: ZeroAppearanceValues,\n  },\n  ...StylesMapperTemplate,\n}"
+          "default": "{\n  args: {\n    actions: zeroActions,\n    actionsOpenerText: 'Horizontal Actions',\n  },\n  render: (args) => html`\n    <div style=\"${horizontalStyle}\">\n      <zero-actions-menu\n        name=\"${args.actionsOpenerText}\"\n        .actions=${args.actions}\n      ></zero-actions-menu>\n    </div>\n  `,\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Vertical",
+          "type": {
+            "text": "StoryObj"
+          },
+          "default": "{\n  args: {\n    actions: zeroActions,\n    actionsOpenerText: 'Vertical Actions',\n  },\n  render: ({ actionsOpenerText, actions }) => html`\n    <div style=\"${verticalStyle}\">\n      <zero-actions-menu\n        name=\"${actionsOpenerText}\"\n        .actions=${actions}\n        is-vertical\n      ></zero-actions-menu>\n    </div>\n  `,\n}"
         }
       ],
       "exports": [
@@ -1178,26 +1186,34 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/anchor/anchor.stories.ts"
+            "module": "src/actions-menu/actions-menu.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "All",
+          "name": "Horizontal",
           "declaration": {
-            "name": "All",
-            "module": "src/anchor/anchor.stories.ts"
+            "name": "Horizontal",
+            "module": "src/actions-menu/actions-menu.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Vertical",
+          "declaration": {
+            "name": "Vertical",
+            "module": "src/actions-menu/actions-menu.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor/anchor.styles.ts",
+      "path": "src/actions-menu/actions-menu.styles.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "zeroAnchorStyles",
+          "name": "zeroActionsMenuStyles",
           "return": {
             "type": {
               "text": "ElementStyles"
@@ -1222,95 +1238,171 @@
       "exports": [
         {
           "kind": "js",
-          "name": "zeroAnchorStyles",
+          "name": "zeroActionsMenuStyles",
           "declaration": {
-            "name": "zeroAnchorStyles",
-            "module": "src/anchor/anchor.styles.ts"
+            "name": "zeroActionsMenuStyles",
+            "module": "src/actions-menu/actions-menu.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor/anchor.template.ts",
+      "path": "src/actions-menu/actions-menu.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "zeroAnchorTemplate",
-          "return": {
-            "type": {
-              "text": "ViewTemplate<Anchor>"
-            }
+          "kind": "class",
+          "description": "",
+          "name": "ActionsMenu",
+          "superclass": {
+            "name": "FoundationActionsMenu",
+            "package": "@genesislcap/foundation-ui"
           },
-          "parameters": [
+          "tagName": "%%prefix%%-actions-menu",
+          "customElement": true,
+          "members": [
             {
-              "name": "context",
+              "kind": "field",
+              "name": "_presentation",
               "type": {
-                "text": "ElementDefinitionContext"
+                "text": "ComponentPresentation | null | undefined"
+              },
+              "privacy": "private",
+              "default": "void 0",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
               }
             },
             {
-              "name": "definition",
+              "kind": "field",
+              "name": "$presentation",
               "type": {
-                "text": "FoundationElementDefinition"
+                "text": "ComponentPresentation | null"
+              },
+              "privacy": "public",
+              "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "template",
+              "type": {
+                "text": "ElementViewTemplate | void | null"
+              },
+              "privacy": "public",
+              "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "templateChanged",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "ElementStyles | void | null"
+              },
+              "privacy": "public",
+              "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "stylesChanged",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "compose",
+              "privacy": "public",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "(\n        overrideDefinition?: OverrideFoundationElementDefinition<T>\n    ) => FoundationElementRegistry<T, K>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "this",
+                  "type": {
+                    "text": "K"
+                  }
+                },
+                {
+                  "name": "elementDefinition",
+                  "type": {
+                    "text": "T"
+                  },
+                  "description": "The definition of the element to create the registry\nfunction for."
+                }
+              ],
+              "description": "Defines an element registry function with a set of element definition defaults.",
+              "inheritedFrom": {
+                "name": "FoundationElement",
+                "module": "src/foundation-element/foundation-element.ts"
               }
             }
           ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "zeroAnchorTemplate",
-          "declaration": {
-            "name": "zeroAnchorTemplate",
-            "module": "src/anchor/anchor.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/anchor/anchor.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Anchor",
-          "superclass": {
-            "name": "FoundationAnchor",
-            "package": "@genesislcap/foundation-ui"
-          },
-          "tagName": "%%prefix%%-anchor",
-          "customElement": true
         },
         {
           "kind": "variable",
-          "name": "zeroAnchor"
+          "name": "zeroActionsMenu",
+          "description": "The Zero Actions Menu",
+          "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Anchor",
+          "name": "ActionsMenu",
           "declaration": {
-            "name": "Anchor",
-            "module": "src/anchor/anchor.ts"
+            "name": "ActionsMenu",
+            "module": "src/actions-menu/actions-menu.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroAnchor",
+          "name": "zeroActionsMenu",
           "declaration": {
-            "name": "zeroAnchor",
-            "module": "src/anchor/anchor.ts"
+            "name": "zeroActionsMenu",
+            "module": "src/actions-menu/actions-menu.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchor/index.ts",
+      "path": "src/actions-menu/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -1318,15 +1410,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./anchor"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./anchor.styles"
+            "package": "./actions-menu"
           }
         },
         {
@@ -1334,14 +1418,14 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./anchor.template"
+            "package": "./actions-menu.styles"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchored-region/anchored-region.stories.ts",
+      "path": "src/anchor/anchor.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -1349,15 +1433,15 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Anchored Region',\n  component: 'zero-anchored-region',\n}"
+          "default": "{\n  title: 'Anchor',\n  component: 'zero-anchor',\n}"
         },
         {
           "kind": "variable",
-          "name": "Default",
+          "name": "All",
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  args: {\n    anchorText: 'This will show above button',\n  },\n  ...StylesMapperTemplate,\n}"
+          "default": "{\n  args: {\n    anchorText: 'Rapid Anchor',\n    appearances: ZeroAppearanceValues,\n  },\n  ...StylesMapperTemplate,\n}"
         }
       ],
       "exports": [
@@ -1366,26 +1450,26 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/anchored-region/anchored-region.stories.ts"
+            "module": "src/anchor/anchor.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Default",
+          "name": "All",
           "declaration": {
-            "name": "Default",
-            "module": "src/anchored-region/anchored-region.stories.ts"
+            "name": "All",
+            "module": "src/anchor/anchor.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchored-region/anchored-region.styles.ts",
+      "path": "src/anchor/anchor.styles.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "zeroAnchoredRegionStyles",
+          "name": "zeroAnchorStyles",
           "return": {
             "type": {
               "text": "ElementStyles"
@@ -1410,24 +1494,24 @@
       "exports": [
         {
           "kind": "js",
-          "name": "zeroAnchoredRegionStyles",
+          "name": "zeroAnchorStyles",
           "declaration": {
-            "name": "zeroAnchoredRegionStyles",
-            "module": "src/anchored-region/anchored-region.styles.ts"
+            "name": "zeroAnchorStyles",
+            "module": "src/anchor/anchor.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchored-region/anchored-region.template.ts",
+      "path": "src/anchor/anchor.template.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "zeroAnchoredRegionTemplate",
+          "name": "zeroAnchorTemplate",
           "return": {
             "type": {
-              "text": "ViewTemplate<AnchoredRegion>"
+              "text": "ViewTemplate<Anchor>"
             }
           },
           "parameters": [
@@ -1449,56 +1533,56 @@
       "exports": [
         {
           "kind": "js",
-          "name": "zeroAnchoredRegionTemplate",
+          "name": "zeroAnchorTemplate",
           "declaration": {
-            "name": "zeroAnchoredRegionTemplate",
-            "module": "src/anchored-region/anchored-region.template.ts"
+            "name": "zeroAnchorTemplate",
+            "module": "src/anchor/anchor.template.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchored-region/anchored-region.ts",
+      "path": "src/anchor/anchor.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "AnchoredRegion",
+          "name": "Anchor",
           "superclass": {
-            "name": "FoundationAnchoredRegion",
+            "name": "FoundationAnchor",
             "package": "@genesislcap/foundation-ui"
           },
-          "tagName": "%%prefix%%-anchored-region",
+          "tagName": "%%prefix%%-anchor",
           "customElement": true
         },
         {
           "kind": "variable",
-          "name": "zeroAnchoredRegion"
+          "name": "zeroAnchor"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "AnchoredRegion",
+          "name": "Anchor",
           "declaration": {
-            "name": "AnchoredRegion",
-            "module": "src/anchored-region/anchored-region.ts"
+            "name": "Anchor",
+            "module": "src/anchor/anchor.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroAnchoredRegion",
+          "name": "zeroAnchor",
           "declaration": {
-            "name": "zeroAnchoredRegion",
-            "module": "src/anchored-region/anchored-region.ts"
+            "name": "zeroAnchor",
+            "module": "src/anchor/anchor.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/anchored-region/index.ts",
+      "path": "src/anchor/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -1506,7 +1590,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./anchored-region"
+            "package": "./anchor"
           }
         },
         {
@@ -1514,7 +1598,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./anchored-region.styles"
+            "package": "./anchor.styles"
           }
         },
         {
@@ -1522,14 +1606,14 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./anchored-region.template"
+            "package": "./anchor.template"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/actions-menu/actions-menu.stories.ts",
+      "path": "src/anchored-region/anchored-region.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -1537,23 +1621,15 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{\n  title: 'Actions Menu',\n  component: 'zero-actions-menu',\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "Horizontal",
-          "type": {
-            "text": "StoryObj"
-          },
-          "default": "{\n  args: {\n    actions: zeroActions,\n    actionsOpenerText: 'Horizontal Actions',\n  },\n  render: (args) => html`\n    <div style=\"${horizontalStyle}\">\n      <zero-actions-menu\n        name=\"${args.actionsOpenerText}\"\n        .actions=${args.actions}\n      ></zero-actions-menu>\n    </div>\n  `,\n}"
+          "default": "{\n  title: 'Anchored Region',\n  component: 'zero-anchored-region',\n}"
         },
         {
           "kind": "variable",
-          "name": "Vertical",
+          "name": "Default",
           "type": {
             "text": "StoryObj"
           },
-          "default": "{\n  args: {\n    actions: zeroActions,\n    actionsOpenerText: 'Vertical Actions',\n  },\n  render: ({ actionsOpenerText, actions }) => html`\n    <div style=\"${verticalStyle}\">\n      <zero-actions-menu\n        name=\"${actionsOpenerText}\"\n        .actions=${actions}\n        is-vertical\n      ></zero-actions-menu>\n    </div>\n  `,\n}"
+          "default": "{\n  args: {\n    anchorText: 'This will show above button',\n  },\n  ...StylesMapperTemplate,\n}"
         }
       ],
       "exports": [
@@ -1562,34 +1638,26 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/actions-menu/actions-menu.stories.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "Horizontal",
-          "declaration": {
-            "name": "Horizontal",
-            "module": "src/actions-menu/actions-menu.stories.ts"
+            "module": "src/anchored-region/anchored-region.stories.ts"
           }
         },
         {
           "kind": "js",
-          "name": "Vertical",
+          "name": "Default",
           "declaration": {
-            "name": "Vertical",
-            "module": "src/actions-menu/actions-menu.stories.ts"
+            "name": "Default",
+            "module": "src/anchored-region/anchored-region.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/actions-menu/actions-menu.styles.ts",
+      "path": "src/anchored-region/anchored-region.styles.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "zeroActionsMenuStyles",
+          "name": "zeroAnchoredRegionStyles",
           "return": {
             "type": {
               "text": "ElementStyles"
@@ -1614,171 +1682,95 @@
       "exports": [
         {
           "kind": "js",
-          "name": "zeroActionsMenuStyles",
+          "name": "zeroAnchoredRegionStyles",
           "declaration": {
-            "name": "zeroActionsMenuStyles",
-            "module": "src/actions-menu/actions-menu.styles.ts"
+            "name": "zeroAnchoredRegionStyles",
+            "module": "src/anchored-region/anchored-region.styles.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/actions-menu/actions-menu.ts",
+      "path": "src/anchored-region/anchored-region.template.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "ActionsMenu",
-          "superclass": {
-            "name": "FoundationActionsMenu",
-            "package": "@genesislcap/foundation-ui"
+          "kind": "function",
+          "name": "zeroAnchoredRegionTemplate",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<AnchoredRegion>"
+            }
           },
-          "tagName": "%%prefix%%-actions-menu",
-          "customElement": true,
-          "members": [
-            {
-              "kind": "field",
-              "name": "_presentation",
-              "type": {
-                "text": "ComponentPresentation | null | undefined"
-              },
-              "privacy": "private",
-              "default": "void 0",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "$presentation",
-              "type": {
-                "text": "ComponentPresentation | null"
-              },
-              "privacy": "public",
-              "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
+          "parameters": [
             {
-              "kind": "field",
-              "name": "template",
+              "name": "context",
               "type": {
-                "text": "ElementViewTemplate | void | null"
-              },
-              "privacy": "public",
-              "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "templateChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
+                "text": "ElementDefinitionContext"
               }
             },
             {
-              "kind": "field",
-              "name": "styles",
+              "name": "definition",
               "type": {
-                "text": "ElementStyles | void | null"
-              },
-              "privacy": "public",
-              "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "stylesChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "compose",
-              "privacy": "public",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "(\n        overrideDefinition?: OverrideFoundationElementDefinition<T>\n    ) => FoundationElementRegistry<T, K>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "this",
-                  "type": {
-                    "text": "K"
-                  }
-                },
-                {
-                  "name": "elementDefinition",
-                  "type": {
-                    "text": "T"
-                  },
-                  "description": "The definition of the element to create the registry\nfunction for."
-                }
-              ],
-              "description": "Defines an element registry function with a set of element definition defaults.",
-              "inheritedFrom": {
-                "name": "FoundationElement",
-                "module": "src/foundation-element/foundation-element.ts"
+                "text": "FoundationElementDefinition"
               }
             }
           ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "zeroAnchoredRegionTemplate",
+          "declaration": {
+            "name": "zeroAnchoredRegionTemplate",
+            "module": "src/anchored-region/anchored-region.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/anchored-region/anchored-region.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "AnchoredRegion",
+          "superclass": {
+            "name": "FoundationAnchoredRegion",
+            "package": "@genesislcap/foundation-ui"
+          },
+          "tagName": "%%prefix%%-anchored-region",
+          "customElement": true
         },
         {
           "kind": "variable",
-          "name": "zeroActionsMenu",
-          "description": "The Zero Actions Menu",
-          "privacy": "public"
+          "name": "zeroAnchoredRegion"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ActionsMenu",
+          "name": "AnchoredRegion",
           "declaration": {
-            "name": "ActionsMenu",
-            "module": "src/actions-menu/actions-menu.ts"
+            "name": "AnchoredRegion",
+            "module": "src/anchored-region/anchored-region.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zeroActionsMenu",
+          "name": "zeroAnchoredRegion",
           "declaration": {
-            "name": "zeroActionsMenu",
-            "module": "src/actions-menu/actions-menu.ts"
+            "name": "zeroAnchoredRegion",
+            "module": "src/anchored-region/anchored-region.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/actions-menu/index.ts",
+      "path": "src/anchored-region/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -1786,7 +1778,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./actions-menu"
+            "package": "./anchored-region"
           }
         },
         {
@@ -1794,12 +1786,20 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "package": "./actions-menu.styles"
+            "package": "./anchored-region.styles"
           }
-        }
-      ]
-    },
-    {
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./anchored-region.template"
+          }
+        }
+      ]
+    },
+    {
       "kind": "javascript-module",
       "path": "src/avatar/avatar.stories.ts",
       "declarations": [
@@ -15256,128 +15256,429 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/_config/tokens/default.ts",
-      "declarations": [],
+      "path": "src/_config/styles/colors.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "whiteWebRGBA",
+          "parameters": [
+            {
+              "name": "alpha",
+              "default": "1.0",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "blackWebRGBA",
+          "parameters": [
+            {
+              "name": "alpha",
+              "default": "1.0",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "rapidDefaultFillColor"
+        },
+        {
+          "kind": "variable",
+          "name": "rapidDefaultCardFillColor"
+        },
+        {
+          "kind": "variable",
+          "name": "rapidDefaultCardPalette"
+        },
+        {
+          "kind": "function",
+          "name": "primaryBlueWebRGBA",
+          "parameters": [
+            {
+              "name": "alpha",
+              "default": "1.0",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "accentBlueSwatch"
+        },
+        {
+          "kind": "variable",
+          "name": "accentBluePalette"
+        },
+        {
+          "kind": "function",
+          "name": "primaryPurpleWebRGBA",
+          "parameters": [
+            {
+              "name": "alpha",
+              "default": "1.0",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "secondaryOrangeWebRGBA",
+          "parameters": [
+            {
+              "name": "alpha",
+              "default": "1.0",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "secondaryTealWebRGBA",
+          "parameters": [
+            {
+              "name": "alpha",
+              "default": "1.0",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "longGreenWebRGBA",
+          "parameters": [
+            {
+              "name": "alpha",
+              "default": "1.0",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "shortPinkWebRGBA",
+          "parameters": [
+            {
+              "name": "alpha",
+              "default": "1.0",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "warningYellowWebRGBA",
+          "parameters": [
+            {
+              "name": "alpha",
+              "default": "1.0",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "chartPinkWebRGBA",
+          "parameters": [
+            {
+              "name": "alpha",
+              "default": "1.0",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        }
+      ],
       "exports": [
         {
           "kind": "js",
-          "name": "accentFillActive",
+          "name": "whiteWebRGBA",
           "declaration": {
-            "name": "accentFillActive",
-            "package": "@microsoft/fast-components"
+            "name": "whiteWebRGBA",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentFillActiveDelta",
+          "name": "blackWebRGBA",
           "declaration": {
-            "name": "accentFillActiveDelta",
-            "package": "@microsoft/fast-components"
+            "name": "blackWebRGBA",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentFillFocus",
+          "name": "rapidDefaultFillColor",
           "declaration": {
-            "name": "accentFillFocus",
-            "package": "@microsoft/fast-components"
+            "name": "rapidDefaultFillColor",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentFillFocusDelta",
+          "name": "rapidDefaultCardFillColor",
           "declaration": {
-            "name": "accentFillFocusDelta",
-            "package": "@microsoft/fast-components"
+            "name": "rapidDefaultCardFillColor",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentFillHover",
+          "name": "rapidDefaultCardPalette",
           "declaration": {
-            "name": "accentFillHover",
-            "package": "@microsoft/fast-components"
+            "name": "rapidDefaultCardPalette",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentFillHoverDelta",
+          "name": "primaryBlueWebRGBA",
           "declaration": {
-            "name": "accentFillHoverDelta",
-            "package": "@microsoft/fast-components"
+            "name": "primaryBlueWebRGBA",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentFillRest",
+          "name": "accentBlueSwatch",
           "declaration": {
-            "name": "accentFillRest",
-            "package": "@microsoft/fast-components"
+            "name": "accentBlueSwatch",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentFillRestDelta",
+          "name": "accentBluePalette",
           "declaration": {
-            "name": "accentFillRestDelta",
-            "package": "@microsoft/fast-components"
+            "name": "accentBluePalette",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentForegroundActive",
+          "name": "primaryPurpleWebRGBA",
           "declaration": {
-            "name": "accentForegroundActive",
-            "package": "@microsoft/fast-components"
+            "name": "primaryPurpleWebRGBA",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentForegroundActiveDelta",
+          "name": "secondaryOrangeWebRGBA",
           "declaration": {
-            "name": "accentForegroundActiveDelta",
-            "package": "@microsoft/fast-components"
+            "name": "secondaryOrangeWebRGBA",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentForegroundFocus",
+          "name": "secondaryTealWebRGBA",
           "declaration": {
-            "name": "accentForegroundFocus",
-            "package": "@microsoft/fast-components"
+            "name": "secondaryTealWebRGBA",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentForegroundFocusDelta",
+          "name": "longGreenWebRGBA",
           "declaration": {
-            "name": "accentForegroundFocusDelta",
-            "package": "@microsoft/fast-components"
+            "name": "longGreenWebRGBA",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentForegroundHover",
+          "name": "shortPinkWebRGBA",
           "declaration": {
-            "name": "accentForegroundHover",
-            "package": "@microsoft/fast-components"
+            "name": "shortPinkWebRGBA",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentForegroundHoverDelta",
+          "name": "warningYellowWebRGBA",
           "declaration": {
-            "name": "accentForegroundHoverDelta",
-            "package": "@microsoft/fast-components"
+            "name": "warningYellowWebRGBA",
+            "module": "src/_config/styles/colors.ts"
           }
         },
         {
           "kind": "js",
-          "name": "accentForegroundRest",
+          "name": "chartPinkWebRGBA",
           "declaration": {
-            "name": "accentForegroundRest",
-            "package": "@microsoft/fast-components"
-          }
+            "name": "chartPinkWebRGBA",
+            "module": "src/_config/styles/colors.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/_config/styles/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./colors"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./external/roboto-font"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/_config/tokens/default.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "accentFillActive",
+          "declaration": {
+            "name": "accentFillActive",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentFillActiveDelta",
+          "declaration": {
+            "name": "accentFillActiveDelta",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentFillFocus",
+          "declaration": {
+            "name": "accentFillFocus",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentFillFocusDelta",
+          "declaration": {
+            "name": "accentFillFocusDelta",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentFillHover",
+          "declaration": {
+            "name": "accentFillHover",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentFillHoverDelta",
+          "declaration": {
+            "name": "accentFillHoverDelta",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentFillRest",
+          "declaration": {
+            "name": "accentFillRest",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentFillRestDelta",
+          "declaration": {
+            "name": "accentFillRestDelta",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentForegroundActive",
+          "declaration": {
+            "name": "accentForegroundActive",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentForegroundActiveDelta",
+          "declaration": {
+            "name": "accentForegroundActiveDelta",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentForegroundFocus",
+          "declaration": {
+            "name": "accentForegroundFocus",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentForegroundFocusDelta",
+          "declaration": {
+            "name": "accentForegroundFocusDelta",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentForegroundHover",
+          "declaration": {
+            "name": "accentForegroundHover",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentForegroundHoverDelta",
+          "declaration": {
+            "name": "accentForegroundHoverDelta",
+            "package": "@microsoft/fast-components"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "accentForegroundRest",
+          "declaration": {
+            "name": "accentForegroundRest",
+            "package": "@microsoft/fast-components"
+          }
         },
         {
           "kind": "js",
@@ -16148,307 +16449,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/_config/styles/colors.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "whiteWebRGBA",
-          "parameters": [
-            {
-              "name": "alpha",
-              "default": "1.0",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "blackWebRGBA",
-          "parameters": [
-            {
-              "name": "alpha",
-              "default": "1.0",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "variable",
-          "name": "rapidDefaultFillColor"
-        },
-        {
-          "kind": "variable",
-          "name": "rapidDefaultCardFillColor"
-        },
-        {
-          "kind": "variable",
-          "name": "rapidDefaultCardPalette"
-        },
-        {
-          "kind": "function",
-          "name": "primaryBlueWebRGBA",
-          "parameters": [
-            {
-              "name": "alpha",
-              "default": "1.0",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "variable",
-          "name": "accentBlueSwatch"
-        },
-        {
-          "kind": "variable",
-          "name": "accentBluePalette"
-        },
-        {
-          "kind": "function",
-          "name": "primaryPurpleWebRGBA",
-          "parameters": [
-            {
-              "name": "alpha",
-              "default": "1.0",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "secondaryOrangeWebRGBA",
-          "parameters": [
-            {
-              "name": "alpha",
-              "default": "1.0",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "secondaryTealWebRGBA",
-          "parameters": [
-            {
-              "name": "alpha",
-              "default": "1.0",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "longGreenWebRGBA",
-          "parameters": [
-            {
-              "name": "alpha",
-              "default": "1.0",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "shortPinkWebRGBA",
-          "parameters": [
-            {
-              "name": "alpha",
-              "default": "1.0",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "warningYellowWebRGBA",
-          "parameters": [
-            {
-              "name": "alpha",
-              "default": "1.0",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "chartPinkWebRGBA",
-          "parameters": [
-            {
-              "name": "alpha",
-              "default": "1.0",
-              "type": {
-                "text": "number"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "whiteWebRGBA",
-          "declaration": {
-            "name": "whiteWebRGBA",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "blackWebRGBA",
-          "declaration": {
-            "name": "blackWebRGBA",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "rapidDefaultFillColor",
-          "declaration": {
-            "name": "rapidDefaultFillColor",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "rapidDefaultCardFillColor",
-          "declaration": {
-            "name": "rapidDefaultCardFillColor",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "rapidDefaultCardPalette",
-          "declaration": {
-            "name": "rapidDefaultCardPalette",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "primaryBlueWebRGBA",
-          "declaration": {
-            "name": "primaryBlueWebRGBA",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "accentBlueSwatch",
-          "declaration": {
-            "name": "accentBlueSwatch",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "accentBluePalette",
-          "declaration": {
-            "name": "accentBluePalette",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "primaryPurpleWebRGBA",
-          "declaration": {
-            "name": "primaryPurpleWebRGBA",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "secondaryOrangeWebRGBA",
-          "declaration": {
-            "name": "secondaryOrangeWebRGBA",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "secondaryTealWebRGBA",
-          "declaration": {
-            "name": "secondaryTealWebRGBA",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "longGreenWebRGBA",
-          "declaration": {
-            "name": "longGreenWebRGBA",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "shortPinkWebRGBA",
-          "declaration": {
-            "name": "shortPinkWebRGBA",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "warningYellowWebRGBA",
-          "declaration": {
-            "name": "warningYellowWebRGBA",
-            "module": "src/_config/styles/colors.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "chartPinkWebRGBA",
-          "declaration": {
-            "name": "chartPinkWebRGBA",
-            "module": "src/_config/styles/colors.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/_config/styles/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./colors"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./external/roboto-font"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/_config/values/color.ts",