@fluentui/web-components 3.0.0-rc.29 → 3.0.0-rc.30

package/custom-elements.json

@@ -211,592 +211,162 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/utils/template-helpers.ts",
+      "path": "src/utils/display.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "hidden",
+          "default": "`:host([hidden]){display:none}`",
+          "description": "A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.",
+          "privacy": "public"
+        },
         {
           "kind": "function",
-          "name": "staticallyCompose",
+          "name": "display",
           "return": {
             "type": {
-              "text": "CaptureType<TSource, TParent>"
+              "text": "string"
             }
           },
           "parameters": [
             {
-              "name": "item",
+              "name": "displayValue",
               "type": {
-                "text": "StaticallyComposableHTML<TSource, TParent>"
+                "text": "CSSDisplayPropertyValue"
               }
+            },
+            {
+              "description": "The CSS display property value",
+              "name": "display"
             }
           ],
-          "description": "A function to compose template options.",
+          "description": "Applies a CSS display property.\nAlso adds CSS rules to not display the element when the [hidden] attribute is applied to the element.",
           "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "staticallyCompose",
+          "name": "hidden",
           "declaration": {
-            "name": "staticallyCompose",
-            "module": "src/utils/template-helpers.ts"
+            "name": "hidden",
+            "module": "src/utils/display.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "display",
+          "declaration": {
+            "name": "display",
+            "module": "src/utils/display.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/patterns/start-end.ts",
+      "path": "src/theme/design-tokens.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "A mixin class implementing start slots.",
-          "name": "Start",
-          "members": [
-            {
-              "kind": "field",
-              "name": "start",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "public"
-            }
-          ]
+          "kind": "variable",
+          "name": "colorNeutralForeground1",
+          "type": {
+            "text": "string"
+          },
+          "default": "'var(--colorNeutralForeground1)'",
+          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1` design token.",
+          "privacy": "public"
         },
         {
-          "kind": "class",
-          "description": "A mixin class implementing end slots.",
-          "name": "End",
-          "members": [
-            {
-              "kind": "field",
-              "name": "end",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "public"
-            }
-          ]
+          "kind": "variable",
+          "name": "colorNeutralForeground1Hover",
+          "type": {
+            "text": "string"
+          },
+          "default": "'var(--colorNeutralForeground1Hover)'",
+          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground1Hover | `colorNeutralForeground1Hover` design token.",
+          "privacy": "public"
         },
         {
-          "kind": "class",
-          "description": "A mixin class implementing start and end slots.\nThese are generally used to decorate text elements with icons or other visual indicators.",
-          "name": "StartEnd",
-          "members": [
-            {
-              "kind": "field",
-              "name": "start",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "end",
-              "type": {
-                "text": "HTMLSlotElement"
-              },
-              "privacy": "public"
-            }
-          ]
+          "kind": "variable",
+          "name": "colorNeutralForeground1Pressed",
+          "type": {
+            "text": "string"
+          },
+          "default": "'var(--colorNeutralForeground1Pressed)'",
+          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground1Pressed | `colorNeutralForeground1Pressed` design token.",
+          "privacy": "public"
         },
         {
-          "kind": "function",
-          "name": "endSlotTemplate",
-          "return": {
-            "type": {
-              "text": "CaptureType<TSource, TParent>"
-            }
+          "kind": "variable",
+          "name": "colorNeutralForeground1Selected",
+          "type": {
+            "text": "string"
           },
-          "parameters": [
-            {
-              "name": "options",
-              "type": {
-                "text": "EndOptions<TSource, TParent>"
-              }
-            }
-          ],
-          "description": "The template for the end slot.\nFor use with StartEnd",
+          "default": "'var(--colorNeutralForeground1Selected)'",
+          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground1Selected | `colorNeutralForeground1Selected` design token.",
           "privacy": "public"
         },
         {
-          "kind": "function",
-          "name": "startSlotTemplate",
-          "return": {
-            "type": {
-              "text": "CaptureType<TSource, TParent>"
-            }
+          "kind": "variable",
+          "name": "colorNeutralForeground2",
+          "type": {
+            "text": "string"
           },
-          "parameters": [
-            {
-              "name": "options",
-              "type": {
-                "text": "StartOptions<TSource, TParent>"
-              }
-            }
-          ],
-          "description": "The template for the start slots.\nFor use with StartEnd",
+          "default": "'var(--colorNeutralForeground2)'",
+          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2 | `colorNeutralForeground2` design token.",
           "privacy": "public"
-        }
-      ],
-      "exports": [
+        },
         {
-          "kind": "js",
-          "name": "Start",
-          "declaration": {
-            "name": "Start",
-            "module": "src/patterns/start-end.ts"
-          }
+          "kind": "variable",
+          "name": "colorNeutralForeground2Hover",
+          "type": {
+            "text": "string"
+          },
+          "default": "'var(--colorNeutralForeground2Hover)'",
+          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2Hover | `colorNeutralForeground2Hover` design token.",
+          "privacy": "public"
         },
         {
-          "kind": "js",
-          "name": "End",
-          "declaration": {
-            "name": "End",
-            "module": "src/patterns/start-end.ts"
-          }
+          "kind": "variable",
+          "name": "colorNeutralForeground2Pressed",
+          "type": {
+            "text": "string"
+          },
+          "default": "'var(--colorNeutralForeground2Pressed)'",
+          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2Pressed | `colorNeutralForeground2Pressed` design token.",
+          "privacy": "public"
         },
         {
-          "kind": "js",
-          "name": "StartEnd",
-          "declaration": {
-            "name": "StartEnd",
-            "module": "src/patterns/start-end.ts"
-          }
+          "kind": "variable",
+          "name": "colorNeutralForeground2Selected",
+          "type": {
+            "text": "string"
+          },
+          "default": "'var(--colorNeutralForeground2Selected)'",
+          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2Selected | `colorNeutralForeground2Selected` design token.",
+          "privacy": "public"
         },
         {
-          "kind": "js",
-          "name": "endSlotTemplate",
-          "declaration": {
-            "name": "endSlotTemplate",
-            "module": "src/patterns/start-end.ts"
-          }
+          "kind": "variable",
+          "name": "colorNeutralForeground2BrandHover",
+          "type": {
+            "text": "string"
+          },
+          "default": "'var(--colorNeutralForeground2BrandHover)'",
+          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2BrandHover | `colorNeutralForeground2BrandHover` design token.",
+          "privacy": "public"
         },
         {
-          "kind": "js",
-          "name": "startSlotTemplate",
-          "declaration": {
-            "name": "startSlotTemplate",
-            "module": "src/patterns/start-end.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/apply-mixins.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "./dist/esm/accordion-item/accordion-item.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An Accordion Item Custom HTML Element.\nBased on BaseAccordionItem and includes style and layout specific attributes",
-          "name": "AccordionItem",
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "AccordionItemSize | undefined"
-              },
-              "privacy": "public",
-              "description": "Defines accordion header font size.",
-              "parsedType": {
-                "text": "'small' | 'medium' | 'large' | 'extra-large' | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "markerPosition",
-              "type": {
-                "text": "AccordionItemMarkerPosition | undefined"
-              },
-              "privacy": "public",
-              "description": "Sets expand and collapsed icon position.",
-              "parsedType": {
-                "text": "'start' | 'end' | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "block",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Sets the width of the focus state."
-            },
-            {
-              "kind": "field",
-              "name": "headinglevel",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
-              },
-              "privacy": "public",
-              "default": "2",
-              "description": "Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level | level of the\nheading element.",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Expands or collapses the item.",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Disables an accordion item",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "AccordionItemSize | undefined"
-              },
-              "description": "Defines accordion header font size.",
-              "fieldName": "size",
-              "parsedType": {
-                "text": "'small' | 'medium' | 'large' | 'extra-large' | undefined"
-              }
-            },
-            {
-              "name": "marker-position",
-              "type": {
-                "text": "AccordionItemMarkerPosition | undefined"
-              },
-              "description": "Sets expand and collapsed icon position.",
-              "fieldName": "markerPosition",
-              "parsedType": {
-                "text": "'start' | 'end' | undefined"
-              }
-            },
-            {
-              "name": "block",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Sets the width of the focus state.",
-              "fieldName": "block"
-            },
-            {
-              "name": "heading-level",
-              "type": {
-                "text": "1 | 2 | 3 | 4 | 5 | 6"
-              },
-              "default": "2",
-              "description": "Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level | level of the\nheading element.",
-              "fieldName": "headinglevel",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            },
-            {
-              "name": "expanded",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Expands or collapses the item.",
-              "fieldName": "expanded",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables an accordion item",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "BaseAccordionItem",
-            "module": "/src/accordion-item/accordion-item.base.js"
-          },
-          "tagName": "fluent-accordion-item",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "Content positioned before heading in the collapsed state",
-              "name": "start",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            },
-            {
-              "description": "Content which serves as the accordion item heading and text of the expand button",
-              "name": "heading",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            },
-            {
-              "description": "The default slot for accordion item content",
-              "name": "",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            },
-            {
-              "description": "The expanded icon",
-              "name": "marker-expanded",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            },
-            {
-              "description": "The collapsed icon",
-              "name": "marker-collapsed",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "Wraps the button",
-              "name": "heading",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            },
-            {
-              "description": "The button which serves to invoke the item",
-              "name": "button",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            },
-            {
-              "description": "The wrapper for the accordion item content",
-              "name": "content",
-              "inheritedFrom": {
-                "name": "BaseAccordionItem",
-                "module": "src/accordion-item/accordion-item.base.ts"
-              }
-            }
-          ],
-          "modulePath": "./dist/esm/accordion-item/accordion-item.js",
-          "definitionPath": "./dist/esm/accordion-item/define.js",
-          "cssProperties": [],
-          "cssStates": [],
-          "events": []
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AccordionItem",
-          "declaration": {
-            "name": "AccordionItem",
-            "module": "src/accordion-item/accordion-item.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/display.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "hidden",
-          "default": "`:host([hidden]){display:none}`",
-          "description": "A CSS fragment to set `display: none;` when the host is hidden using the [hidden] attribute.",
-          "privacy": "public"
-        },
-        {
-          "kind": "function",
-          "name": "display",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "displayValue",
-              "type": {
-                "text": "CSSDisplayPropertyValue"
-              }
-            },
-            {
-              "description": "The CSS display property value",
-              "name": "display"
-            }
-          ],
-          "description": "Applies a CSS display property.\nAlso adds CSS rules to not display the element when the [hidden] attribute is applied to the element.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "hidden",
-          "declaration": {
-            "name": "hidden",
-            "module": "src/utils/display.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "display",
-          "declaration": {
-            "name": "display",
-            "module": "src/utils/display.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/theme/design-tokens.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "colorNeutralForeground1",
-          "type": {
-            "text": "string"
-          },
-          "default": "'var(--colorNeutralForeground1)'",
-          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground1 | `colorNeutralForeground1` design token.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "colorNeutralForeground1Hover",
-          "type": {
-            "text": "string"
-          },
-          "default": "'var(--colorNeutralForeground1Hover)'",
-          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground1Hover | `colorNeutralForeground1Hover` design token.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "colorNeutralForeground1Pressed",
-          "type": {
-            "text": "string"
-          },
-          "default": "'var(--colorNeutralForeground1Pressed)'",
-          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground1Pressed | `colorNeutralForeground1Pressed` design token.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "colorNeutralForeground1Selected",
-          "type": {
-            "text": "string"
-          },
-          "default": "'var(--colorNeutralForeground1Selected)'",
-          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground1Selected | `colorNeutralForeground1Selected` design token.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "colorNeutralForeground2",
-          "type": {
-            "text": "string"
-          },
-          "default": "'var(--colorNeutralForeground2)'",
-          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2 | `colorNeutralForeground2` design token.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "colorNeutralForeground2Hover",
-          "type": {
-            "text": "string"
-          },
-          "default": "'var(--colorNeutralForeground2Hover)'",
-          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2Hover | `colorNeutralForeground2Hover` design token.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "colorNeutralForeground2Pressed",
-          "type": {
-            "text": "string"
-          },
-          "default": "'var(--colorNeutralForeground2Pressed)'",
-          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2Pressed | `colorNeutralForeground2Pressed` design token.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "colorNeutralForeground2Selected",
-          "type": {
-            "text": "string"
-          },
-          "default": "'var(--colorNeutralForeground2Selected)'",
-          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2Selected | `colorNeutralForeground2Selected` design token.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "colorNeutralForeground2BrandHover",
-          "type": {
-            "text": "string"
-          },
-          "default": "'var(--colorNeutralForeground2BrandHover)'",
-          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2BrandHover | `colorNeutralForeground2BrandHover` design token.",
-          "privacy": "public"
-        },
-        {
-          "kind": "variable",
-          "name": "colorNeutralForeground2BrandPressed",
-          "type": {
-            "text": "string"
-          },
-          "default": "'var(--colorNeutralForeground2BrandPressed)'",
-          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2BrandPressed | `colorNeutralForeground2BrandPressed` design token.",
-          "privacy": "public"
-        },
+          "kind": "variable",
+          "name": "colorNeutralForeground2BrandPressed",
+          "type": {
+            "text": "string"
+          },
+          "default": "'var(--colorNeutralForeground2BrandPressed)'",
+          "description": "CSS custom property value for the @fluentui/tokens#colorNeutralForeground2BrandPressed | `colorNeutralForeground2BrandPressed` design token.",
+          "privacy": "public"
+        },
         {
           "kind": "variable",
           "name": "colorNeutralForeground2BrandSelected",
@@ -9034,75 +8604,505 @@
           }
         },
         {
-          "kind": "js",
-          "name": "curveLinear",
-          "declaration": {
-            "name": "curveLinear",
-            "module": "src/theme/design-tokens.ts"
-          }
+          "kind": "js",
+          "name": "curveLinear",
+          "declaration": {
+            "name": "curveLinear",
+            "module": "src/theme/design-tokens.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zIndexBackground",
+          "declaration": {
+            "name": "zIndexBackground",
+            "module": "src/theme/design-tokens.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zIndexContent",
+          "declaration": {
+            "name": "zIndexContent",
+            "module": "src/theme/design-tokens.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zIndexOverlay",
+          "declaration": {
+            "name": "zIndexOverlay",
+            "module": "src/theme/design-tokens.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zIndexPopup",
+          "declaration": {
+            "name": "zIndexPopup",
+            "module": "src/theme/design-tokens.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zIndexMessages",
+          "declaration": {
+            "name": "zIndexMessages",
+            "module": "src/theme/design-tokens.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zIndexFloating",
+          "declaration": {
+            "name": "zIndexFloating",
+            "module": "src/theme/design-tokens.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zIndexPriority",
+          "declaration": {
+            "name": "zIndexPriority",
+            "module": "src/theme/design-tokens.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zIndexDebug",
+          "declaration": {
+            "name": "zIndexDebug",
+            "module": "src/theme/design-tokens.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/template-helpers.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "staticallyCompose",
+          "return": {
+            "type": {
+              "text": "CaptureType<TSource, TParent>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "item",
+              "type": {
+                "text": "StaticallyComposableHTML<TSource, TParent>"
+              }
+            }
+          ],
+          "description": "A function to compose template options.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "staticallyCompose",
+          "declaration": {
+            "name": "staticallyCompose",
+            "module": "src/utils/template-helpers.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/patterns/start-end.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A mixin class implementing start slots.",
+          "name": "Start",
+          "members": [
+            {
+              "kind": "field",
+              "name": "start",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "public"
+            }
+          ]
+        },
+        {
+          "kind": "class",
+          "description": "A mixin class implementing end slots.",
+          "name": "End",
+          "members": [
+            {
+              "kind": "field",
+              "name": "end",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "public"
+            }
+          ]
+        },
+        {
+          "kind": "class",
+          "description": "A mixin class implementing start and end slots.\nThese are generally used to decorate text elements with icons or other visual indicators.",
+          "name": "StartEnd",
+          "members": [
+            {
+              "kind": "field",
+              "name": "start",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "end",
+              "type": {
+                "text": "HTMLSlotElement"
+              },
+              "privacy": "public"
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "endSlotTemplate",
+          "return": {
+            "type": {
+              "text": "CaptureType<TSource, TParent>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "options",
+              "type": {
+                "text": "EndOptions<TSource, TParent>"
+              }
+            }
+          ],
+          "description": "The template for the end slot.\nFor use with StartEnd",
+          "privacy": "public"
         },
         {
-          "kind": "js",
-          "name": "zIndexBackground",
-          "declaration": {
-            "name": "zIndexBackground",
-            "module": "src/theme/design-tokens.ts"
-          }
-        },
+          "kind": "function",
+          "name": "startSlotTemplate",
+          "return": {
+            "type": {
+              "text": "CaptureType<TSource, TParent>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "options",
+              "type": {
+                "text": "StartOptions<TSource, TParent>"
+              }
+            }
+          ],
+          "description": "The template for the start slots.\nFor use with StartEnd",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "zIndexContent",
+          "name": "Start",
           "declaration": {
-            "name": "zIndexContent",
-            "module": "src/theme/design-tokens.ts"
+            "name": "Start",
+            "module": "src/patterns/start-end.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zIndexOverlay",
+          "name": "End",
           "declaration": {
-            "name": "zIndexOverlay",
-            "module": "src/theme/design-tokens.ts"
+            "name": "End",
+            "module": "src/patterns/start-end.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zIndexPopup",
+          "name": "StartEnd",
           "declaration": {
-            "name": "zIndexPopup",
-            "module": "src/theme/design-tokens.ts"
+            "name": "StartEnd",
+            "module": "src/patterns/start-end.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zIndexMessages",
+          "name": "endSlotTemplate",
           "declaration": {
-            "name": "zIndexMessages",
-            "module": "src/theme/design-tokens.ts"
+            "name": "endSlotTemplate",
+            "module": "src/patterns/start-end.ts"
           }
         },
         {
           "kind": "js",
-          "name": "zIndexFloating",
+          "name": "startSlotTemplate",
           "declaration": {
-            "name": "zIndexFloating",
-            "module": "src/theme/design-tokens.ts"
+            "name": "startSlotTemplate",
+            "module": "src/patterns/start-end.ts"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/apply-mixins.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "./dist/esm/accordion-item/accordion-item.js",
+      "declarations": [
         {
-          "kind": "js",
-          "name": "zIndexPriority",
-          "declaration": {
-            "name": "zIndexPriority",
-            "module": "src/theme/design-tokens.ts"
-          }
-        },
+          "kind": "class",
+          "description": "An Accordion Item Custom HTML Element.\nBased on BaseAccordionItem and includes style and layout specific attributes",
+          "name": "AccordionItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "AccordionItemSize | undefined"
+              },
+              "privacy": "public",
+              "description": "Defines accordion header font size.",
+              "parsedType": {
+                "text": "'small' | 'medium' | 'large' | 'extra-large' | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "markerPosition",
+              "type": {
+                "text": "AccordionItemMarkerPosition | undefined"
+              },
+              "privacy": "public",
+              "description": "Sets expand and collapsed icon position.",
+              "parsedType": {
+                "text": "'start' | 'end' | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "block",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Sets the width of the focus state."
+            },
+            {
+              "kind": "field",
+              "name": "headinglevel",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
+              },
+              "privacy": "public",
+              "default": "2",
+              "description": "Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level | level of the\nheading element.",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Expands or collapses the item.",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Disables an accordion item",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "AccordionItemSize | undefined"
+              },
+              "description": "Defines accordion header font size.",
+              "fieldName": "size",
+              "parsedType": {
+                "text": "'small' | 'medium' | 'large' | 'extra-large' | undefined"
+              }
+            },
+            {
+              "name": "marker-position",
+              "type": {
+                "text": "AccordionItemMarkerPosition | undefined"
+              },
+              "description": "Sets expand and collapsed icon position.",
+              "fieldName": "markerPosition",
+              "parsedType": {
+                "text": "'start' | 'end' | undefined"
+              }
+            },
+            {
+              "name": "block",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Sets the width of the focus state.",
+              "fieldName": "block"
+            },
+            {
+              "name": "heading-level",
+              "type": {
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
+              },
+              "default": "2",
+              "description": "Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level | level of the\nheading element.",
+              "fieldName": "headinglevel",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Expands or collapses the item.",
+              "fieldName": "expanded",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables an accordion item",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "BaseAccordionItem",
+            "module": "/src/accordion-item/accordion-item.base.js"
+          },
+          "tagName": "fluent-accordion-item",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "Content positioned before heading in the collapsed state",
+              "name": "start",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            },
+            {
+              "description": "Content which serves as the accordion item heading and text of the expand button",
+              "name": "heading",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            },
+            {
+              "description": "The default slot for accordion item content",
+              "name": "",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            },
+            {
+              "description": "The expanded icon",
+              "name": "marker-expanded",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            },
+            {
+              "description": "The collapsed icon",
+              "name": "marker-collapsed",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Wraps the button",
+              "name": "heading",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            },
+            {
+              "description": "The button which serves to invoke the item",
+              "name": "button",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            },
+            {
+              "description": "The wrapper for the accordion item content",
+              "name": "content",
+              "inheritedFrom": {
+                "name": "BaseAccordionItem",
+                "module": "src/accordion-item/accordion-item.base.ts"
+              }
+            }
+          ],
+          "modulePath": "./dist/esm/accordion-item/accordion-item.js",
+          "definitionPath": "./dist/esm/accordion-item/define.js",
+          "cssProperties": [],
+          "cssStates": [],
+          "events": []
+        }
+      ],
+      "exports": [
         {
           "kind": "js",
-          "name": "zIndexDebug",
+          "name": "AccordionItem",
           "declaration": {
-            "name": "zIndexDebug",
-            "module": "src/theme/design-tokens.ts"
+            "name": "AccordionItem",
+            "module": "src/accordion-item/accordion-item.ts"
           }
         }
       ]
@@ -14331,68 +14331,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "./dist/esm/drawer-body/drawer-body.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A DrawerBody component to layout drawer content",
-          "name": "DrawerBody",
-          "cssParts": [
-            {
-              "description": "The header part of the drawer",
-              "name": "header"
-            },
-            {
-              "description": "The content part of the drawer",
-              "name": "content"
-            },
-            {
-              "description": "The footer part of the drawer",
-              "name": "footer"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The title slot",
-              "name": "title"
-            },
-            {
-              "description": "The close button slot",
-              "name": "close"
-            },
-            {
-              "description": "The default content slot",
-              "name": ""
-            },
-            {
-              "description": "The footer slot",
-              "name": "footer"
-            }
-          ],
-          "superclass": {
-            "name": "FASTElement",
-            "package": "@microsoft/fast-element"
-          },
-          "tagName": "fluent-drawer-body",
-          "customElement": true,
-          "summary": "A component that provides a drawer body for displaying content in a side panel.",
-          "modulePath": "./dist/esm/drawer-body/drawer-body.js",
-          "definitionPath": "./dist/esm/drawer-body/define.js"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DrawerBody",
-          "declaration": {
-            "name": "DrawerBody",
-            "module": "src/drawer-body/drawer-body.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/styles/partials/typography.partials.ts",
@@ -14673,6 +14611,68 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "./dist/esm/drawer-body/drawer-body.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A DrawerBody component to layout drawer content",
+          "name": "DrawerBody",
+          "cssParts": [
+            {
+              "description": "The header part of the drawer",
+              "name": "header"
+            },
+            {
+              "description": "The content part of the drawer",
+              "name": "content"
+            },
+            {
+              "description": "The footer part of the drawer",
+              "name": "footer"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The title slot",
+              "name": "title"
+            },
+            {
+              "description": "The close button slot",
+              "name": "close"
+            },
+            {
+              "description": "The default content slot",
+              "name": ""
+            },
+            {
+              "description": "The footer slot",
+              "name": "footer"
+            }
+          ],
+          "superclass": {
+            "name": "FASTElement",
+            "package": "@microsoft/fast-element"
+          },
+          "tagName": "fluent-drawer-body",
+          "customElement": true,
+          "summary": "A component that provides a drawer body for displaying content in a side panel.",
+          "modulePath": "./dist/esm/drawer-body/drawer-body.js",
+          "definitionPath": "./dist/esm/drawer-body/define.js"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DrawerBody",
+          "declaration": {
+            "name": "DrawerBody",
+            "module": "src/drawer-body/drawer-body.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/utils/unique-id.ts",
@@ -28553,7 +28553,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/avatar/avatar.definition-async.ts",
+      "path": "src/accordion-item/accordion-item.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28562,7 +28562,7 @@
             "text": "PartialFASTElementDefinition"
           },
           "default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
-          "description": "The async definition configuration for the fluent-avatar element.",
+          "description": "The async definition configuration for the fluent-accordion-item element.",
           "privacy": "public"
         }
       ],
@@ -28572,20 +28572,20 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/avatar/avatar.definition-async.ts"
+            "module": "src/accordion-item/accordion-item.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/avatar/define-async.ts",
+      "path": "src/accordion-item/define-async.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/badge/badge.definition-async.ts",
+      "path": "src/button/button.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28594,7 +28594,7 @@
             "text": "PartialFASTElementDefinition"
           },
           "default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
-          "description": "The async definition configuration for the fluent-badge element.",
+          "description": "The async definition configuration for the fluent-button element.",
           "privacy": "public"
         }
       ],
@@ -28604,20 +28604,20 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/badge/badge.definition-async.ts"
+            "module": "src/button/button.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/badge/define-async.ts",
+      "path": "src/button/define-async.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/accordion-item/accordion-item.definition-async.ts",
+      "path": "src/badge/badge.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28626,7 +28626,7 @@
             "text": "PartialFASTElementDefinition"
           },
           "default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
-          "description": "The async definition configuration for the fluent-accordion-item element.",
+          "description": "The async definition configuration for the fluent-badge element.",
           "privacy": "public"
         }
       ],
@@ -28636,20 +28636,20 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/accordion-item/accordion-item.definition-async.ts"
+            "module": "src/badge/badge.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/accordion-item/define-async.ts",
+      "path": "src/badge/define-async.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/button.definition-async.ts",
+      "path": "src/avatar/avatar.definition-async.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -28658,7 +28658,7 @@
             "text": "PartialFASTElementDefinition"
           },
           "default": "{ name: tagName, templateOptions: 'defer-and-hydrate', }",
-          "description": "The async definition configuration for the fluent-button element.",
+          "description": "The async definition configuration for the fluent-avatar element.",
           "privacy": "public"
         }
       ],
@@ -28668,14 +28668,14 @@
           "name": "definition",
           "declaration": {
             "name": "definition",
-            "module": "src/button/button.definition-async.ts"
+            "module": "src/avatar/avatar.definition-async.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/button/define-async.ts",
+      "path": "src/avatar/define-async.ts",
       "declarations": [],
       "exports": []
     },