@fluentui/web-components 3.0.0-alpha.28 → 3.0.0-alpha.29

package/dist/storybook/project.json

@@ -0,0 +1 @@
+{"generatedAt":1692072921100,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"monorepo":"Nx","packageManager":{"type":"yarn","version":"1.23.34"},"storybookVersion":"6.5.15","language":"typescript","storybookPackages":{"@storybook/html":{"version":null}},"framework":{"name":"html"},"addons":{"@storybook/addon-docs":{"version":"6.5.15"},"@storybook/addon-essentials":{"options":{"backgrounds":false,"viewport":false,"toolbars":false,"actions":false},"version":"6.5.15"}}}

package/dist/storybook/runtime~main.5d918fe7.iframe.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>chunkId+"."+{108:"b31ec3a1",316:"bc4aabd3",401:"7edec720",491:"77b24750",709:"22096ad4",721:"46fa9f53",858:"da40ed98",954:"630c5748"}[chunkId]+".iframe.bundle.js",__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.hmd=module=>((module=Object.create(module)).children||(module.children=[]),Object.defineProperty(module,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+module.id)}}),module),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="@fluentui/web-components:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","@fluentui/web-components:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk_fluentui_web_components=self.webpackChunk_fluentui_web_components||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();

package/dist/storybook/runtime~main.8db883e762072830487f.manager.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";var deferred,leafPrototypes,getProto,inProgress,__webpack_modules__={},__webpack_module_cache__={};function __webpack_require__(moduleId){var cachedModule=__webpack_module_cache__[moduleId];if(void 0!==cachedModule)return cachedModule.exports;var module=__webpack_module_cache__[moduleId]={id:moduleId,loaded:!1,exports:{}};return __webpack_modules__[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.loaded=!0,module.exports}__webpack_require__.m=__webpack_modules__,deferred=[],__webpack_require__.O=(result,chunkIds,fn,priority)=>{if(!chunkIds){var notFulfilled=1/0;for(i=0;i<deferred.length;i++){for(var[chunkIds,fn,priority]=deferred[i],fulfilled=!0,j=0;j<chunkIds.length;j++)(!1&priority||notFulfilled>=priority)&&Object.keys(__webpack_require__.O).every((key=>__webpack_require__.O[key](chunkIds[j])))?chunkIds.splice(j--,1):(fulfilled=!1,priority<notFulfilled&&(notFulfilled=priority));if(fulfilled){deferred.splice(i--,1);var r=fn();void 0!==r&&(result=r)}}return result}priority=priority||0;for(var i=deferred.length;i>0&&deferred[i-1][2]>priority;i--)deferred[i]=deferred[i-1];deferred[i]=[chunkIds,fn,priority]},__webpack_require__.n=module=>{var getter=module&&module.__esModule?()=>module.default:()=>module;return __webpack_require__.d(getter,{a:getter}),getter},getProto=Object.getPrototypeOf?obj=>Object.getPrototypeOf(obj):obj=>obj.__proto__,__webpack_require__.t=function(value,mode){if(1&mode&&(value=this(value)),8&mode)return value;if("object"==typeof value&&value){if(4&mode&&value.__esModule)return value;if(16&mode&&"function"==typeof value.then)return value}var ns=Object.create(null);__webpack_require__.r(ns);var def={};leafPrototypes=leafPrototypes||[null,getProto({}),getProto([]),getProto(getProto)];for(var current=2&mode&&value;"object"==typeof current&&!~leafPrototypes.indexOf(current);current=getProto(current))Object.getOwnPropertyNames(current).forEach((key=>def[key]=()=>value[key]));return def.default=()=>value,__webpack_require__.d(ns,def),ns},__webpack_require__.d=(exports,definition)=>{for(var key in definition)__webpack_require__.o(definition,key)&&!__webpack_require__.o(exports,key)&&Object.defineProperty(exports,key,{enumerable:!0,get:definition[key]})},__webpack_require__.f={},__webpack_require__.e=chunkId=>Promise.all(Object.keys(__webpack_require__.f).reduce(((promises,key)=>(__webpack_require__.f[key](chunkId,promises),promises)),[])),__webpack_require__.u=chunkId=>chunkId+"."+{108:"78b731e00015540915a8",401:"c9bdfaf0dda8b194127f",709:"b131e33993a6b94d7ad8",721:"c225c101a0a55a8f98eb",858:"e08e25a6901d2e21e9d8",950:"674e7934b4a26a022608",954:"7f985e2fdf9f15a7748b"}[chunkId]+".manager.bundle.js",__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=(obj,prop)=>Object.prototype.hasOwnProperty.call(obj,prop),inProgress={},__webpack_require__.l=(url,done,key,chunkId)=>{if(inProgress[url])inProgress[url].push(done);else{var script,needAttach;if(void 0!==key)for(var scripts=document.getElementsByTagName("script"),i=0;i<scripts.length;i++){var s=scripts[i];if(s.getAttribute("src")==url||s.getAttribute("data-webpack")=="@fluentui/web-components:"+key){script=s;break}}script||(needAttach=!0,(script=document.createElement("script")).charset="utf-8",script.timeout=120,__webpack_require__.nc&&script.setAttribute("nonce",__webpack_require__.nc),script.setAttribute("data-webpack","@fluentui/web-components:"+key),script.src=url),inProgress[url]=[done];var onScriptComplete=(prev,event)=>{script.onerror=script.onload=null,clearTimeout(timeout);var doneFns=inProgress[url];if(delete inProgress[url],script.parentNode&&script.parentNode.removeChild(script),doneFns&&doneFns.forEach((fn=>fn(event))),prev)return prev(event)},timeout=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:script}),12e4);script.onerror=onScriptComplete.bind(null,script.onerror),script.onload=onScriptComplete.bind(null,script.onload),needAttach&&document.head.appendChild(script)}},__webpack_require__.r=exports=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.nmd=module=>(module.paths=[],module.children||(module.children=[]),module),__webpack_require__.p="",(()=>{var installedChunks={303:0};__webpack_require__.f.j=(chunkId,promises)=>{var installedChunkData=__webpack_require__.o(installedChunks,chunkId)?installedChunks[chunkId]:void 0;if(0!==installedChunkData)if(installedChunkData)promises.push(installedChunkData[2]);else if(303!=chunkId){var promise=new Promise(((resolve,reject)=>installedChunkData=installedChunks[chunkId]=[resolve,reject]));promises.push(installedChunkData[2]=promise);var url=__webpack_require__.p+__webpack_require__.u(chunkId),error=new Error;__webpack_require__.l(url,(event=>{if(__webpack_require__.o(installedChunks,chunkId)&&(0!==(installedChunkData=installedChunks[chunkId])&&(installedChunks[chunkId]=void 0),installedChunkData)){var errorType=event&&("load"===event.type?"missing":event.type),realSrc=event&&event.target&&event.target.src;error.message="Loading chunk "+chunkId+" failed.\n("+errorType+": "+realSrc+")",error.name="ChunkLoadError",error.type=errorType,error.request=realSrc,installedChunkData[1](error)}}),"chunk-"+chunkId,chunkId)}else installedChunks[chunkId]=0},__webpack_require__.O.j=chunkId=>0===installedChunks[chunkId];var webpackJsonpCallback=(parentChunkLoadingFunction,data)=>{var moduleId,chunkId,[chunkIds,moreModules,runtime]=data,i=0;if(chunkIds.some((id=>0!==installedChunks[id]))){for(moduleId in moreModules)__webpack_require__.o(moreModules,moduleId)&&(__webpack_require__.m[moduleId]=moreModules[moduleId]);if(runtime)var result=runtime(__webpack_require__)}for(parentChunkLoadingFunction&&parentChunkLoadingFunction(data);i<chunkIds.length;i++)chunkId=chunkIds[i],__webpack_require__.o(installedChunks,chunkId)&&installedChunks[chunkId]&&installedChunks[chunkId][0](),installedChunks[chunkId]=0;return __webpack_require__.O(result)},chunkLoadingGlobal=self.webpackChunk_fluentui_web_components=self.webpackChunk_fluentui_web_components||[];chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null,0)),chunkLoadingGlobal.push=webpackJsonpCallback.bind(null,chunkLoadingGlobal.push.bind(chunkLoadingGlobal))})(),__webpack_require__.nc=void 0})();

package/dist/storybook/shell.css

@@ -0,0 +1,83 @@
+/*
+ * HEADS UP!
+ * This file is used by both React v9 and Web Components Storybooks.
+ * All CSS must apply to both implementations.
+ */
+
+/* sidebar logo (React uses an SVG, Web Components uses text) */
+.sidebar-header > div:first-of-type {
+  font-size: 20px; /* for Web Components */
+  white-space: break-spaces; /* allow line breaks "\n" in Storybook theme */
+  margin-right: 0;
+}
+
+/* remove sidebar shortcuts menu */
+.sidebar-header > div:last-child {
+  display: none;
+}
+
+/* Add left side background color splash */
+/* colors become distracting in mobile layout so scoped to where sidebar is visible */
+@media (min-width: 600px) {
+  #root > div:before {
+    content: '';
+    position: absolute;
+    top: -200px;
+    left: -200px;
+    width: 400px;
+    height: 400px;
+    background: #c989e8;
+    opacity: 0.5;
+    filter: blur(150px);
+  }
+
+  /* Add right side background color splash */
+  #root > div:after {
+    content: '';
+    position: absolute;
+    top: -200px;
+    right: -200px;
+    width: 400px;
+    height: 400px;
+    background: #b3d4ff;
+    opacity: 0.5;
+    filter: blur(150px);
+  }
+}
+
+/* Give sidebar a transparent white background to match design */
+.sidebar-container {
+  background: rgba(255, 255, 255, 0.6);
+}
+
+/* remove background preventing color splash from showing */
+#storybook-preview-wrapper {
+  background: transparent;
+}
+
+/* remove Storybook's 10px top on the main (right hand side) of the docs */
+/* this affects only whitespace in React v9 docs, but the theme switcher in Web Components */
+[role='main'] {
+  top: 0 !important;
+}
+
+/* remove box shadow style from storybooks wrapper div */
+[role='main'] > div {
+  box-shadow: none;
+}
+
+/* permanently hide toolbar so animation never appears on page load */
+[role='main'] .os-host {
+  display: none;
+}
+
+/* stop offset from changing page dimensions when 't' is pressed and toolbar opened */
+[role='main'] > div > div > div {
+  top: 0 !important;
+  height: 100% !important;
+}
+
+/* Remove 'Published on Chromatic' banner */
+#back-to-chromatic {
+  display: none !important;
+}

package/dist/storybook/theme-switch.ts

@@ -0,0 +1,13 @@
+import { teamsDarkTheme, teamsLightTheme, webDarkTheme, webLightTheme } from '@fluentui/tokens';
+import { setTheme } from '@fluentui/web-components';
+
+const themes = {
+  'web-light': webLightTheme,
+  'web-dark': webDarkTheme,
+  'teams-light': teamsLightTheme,
+  'teams-dark': teamsDarkTheme,
+};
+
+export function switchTheme(themeName: keyof typeof themes) {
+  setTheme(themes[themeName]);
+}

package/dist/web-components.js

@@ -526,7 +526,7 @@ const SourceLifetime = Object.freeze({
  */
 const Observable = FAST.getById(KernelServiceId.observable, () => {
   const queueUpdate = Updates.enqueue;
-  const volatileRegex = /(:|&&|\|\||if)/;
+  const volatileRegex = /(:|&&|\|\||if|\?\.)/;
   const notifierLookup = new WeakMap();
   let watcher = void 0;
   let createArrayObserver = array => {
@@ -1978,6 +1978,9 @@ const Compiler = {
     } else {
       template = html;
     }
+    if (!template.content.firstChild && !template.content.lastChild) {
+      template.content.appendChild(document.createComment(""));
+    }
     // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
     const fragment = document.adoptNode(template.content);
     const context = new CompilationContext(fragment, factories, policy);
@@ -2239,17 +2242,24 @@ HTMLDirective.define(RefDirective);
  */
 const ref = propertyName => new RefDirective(propertyName);
 
+const noTemplate = () => null;
+function normalizeBinding(value) {
+  return value === undefined ? noTemplate : isFunction(value) ? value : () => value;
+}
 /**
  * A directive that enables basic conditional rendering in a template.
  * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
+ * @param elseTemplateOrTemplateBinding - Optional template or binding that that
+ * gets the template to render when the conditional is false.
  * @public
  */
-function when(condition, templateOrTemplateBinding) {
+function when(condition, templateOrTemplateBinding, elseTemplateOrTemplateBinding) {
   const dataBinding = isFunction(condition) ? condition : () => condition;
-  const templateBinding = isFunction(templateOrTemplateBinding) ? templateOrTemplateBinding : () => templateOrTemplateBinding;
-  return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
+  const templateBinding = normalizeBinding(templateOrTemplateBinding);
+  const elseBinding = normalizeBinding(elseTemplateOrTemplateBinding);
+  return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : elseBinding(source, context);
 }
 
 const selectElements = value => value.nodeType === 1;
@@ -2934,7 +2944,7 @@ class ElementController extends PropertyChangeNotifier {
       styles.removeStylesFrom(source);
       if (sourceBehaviors !== null) {
         for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
-          this.addBehavior(sourceBehaviors[i]);
+          this.removeBehavior(sourceBehaviors[i]);
         }
       }
     }
@@ -3121,13 +3131,10 @@ class AdoptedStyleSheetsStrategy {
     });
   }
   addStylesTo(target) {
-    const t = normalizeStyleTarget(target);
-    t.adoptedStyleSheets = [...t.adoptedStyleSheets, ...this.sheets];
+    addAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
   }
   removeStylesFrom(target) {
-    const t = normalizeStyleTarget(target);
-    const sheets = this.sheets;
-    t.adoptedStyleSheets = t.adoptedStyleSheets.filter(x => sheets.indexOf(x) === -1);
+    removeAdoptedStyleSheets(normalizeStyleTarget(target), this.sheets);
   }
 }
 AdoptedStyleSheetsStrategy.styleSheetCache = new Map();
@@ -3163,7 +3170,40 @@ class StyleElementStrategy {
     }
   }
 }
-ElementStyles.setDefaultStrategy(ElementStyles.supportsAdoptedStyleSheets ? AdoptedStyleSheetsStrategy : StyleElementStrategy);
+let addAdoptedStyleSheets = (target, sheets) => {
+  target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...sheets];
+};
+let removeAdoptedStyleSheets = (target, sheets) => {
+  target.adoptedStyleSheets = target.adoptedStyleSheets.filter(x => sheets.indexOf(x) === -1);
+};
+if (ElementStyles.supportsAdoptedStyleSheets) {
+  try {
+    // Test if browser implementation uses FrozenArray.
+    // If not, use push / splice to alter the stylesheets
+    // in place. This circumvents a bug in Safari 16.4 where
+    // periodically, assigning the array would previously
+    // cause sheets to be removed.
+    document.adoptedStyleSheets.push();
+    document.adoptedStyleSheets.splice();
+    addAdoptedStyleSheets = (target, sheets) => {
+      target.adoptedStyleSheets.push(...sheets);
+    };
+    removeAdoptedStyleSheets = (target, sheets) => {
+      for (const sheet of sheets) {
+        const index = target.adoptedStyleSheets.indexOf(sheet);
+        if (index !== -1) {
+          target.adoptedStyleSheets.splice(index, 1);
+        }
+      }
+    };
+  } catch (e) {
+    // Do nothing if an error is thrown, the default
+    // case handles FrozenArray.
+  }
+  ElementStyles.setDefaultStrategy(AdoptedStyleSheetsStrategy);
+} else {
+  ElementStyles.setDefaultStrategy(StyleElementStrategy);
+}
 
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType) {
@@ -3472,9 +3512,9 @@ function uniqueId(prefix = "") {
 /**
  * Apply mixins to a constructor.
  * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
- * @public
+ * @internal
  */
-function applyMixins(derivedCtor, ...baseCtors) {
+function applyMixins$1(derivedCtor, ...baseCtors) {
   const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
   baseCtors.forEach(baseCtor => {
     Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
@@ -3566,7 +3606,7 @@ __decorate([attr({
   mode: "boolean"
 })], FASTAccordionItem.prototype, "disabled", void 0);
 __decorate([attr], FASTAccordionItem.prototype, "id", void 0);
-applyMixins(FASTAccordionItem, StartEnd);
+applyMixins$1(FASTAccordionItem, StartEnd);
 
 /**
  * Expand mode for {@link FASTAccordion}
@@ -3830,8 +3870,8 @@ class DelegatesARIALink {}
 __decorate([attr({
   attribute: "aria-expanded"
 })], DelegatesARIALink.prototype, "ariaExpanded", void 0);
-applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
-applyMixins(FASTAnchor, StartEnd, DelegatesARIALink);
+applyMixins$1(DelegatesARIALink, ARIAGlobalStatesAndProperties);
+applyMixins$1(FASTAnchor, StartEnd, DelegatesARIALink);
 
 /**
  * The template for the {@link @microsoft/fast-foundation#(FASTAnchor:class)} component.
@@ -4451,8 +4491,8 @@ __decorate([attr({
 __decorate([attr({
   attribute: "aria-pressed"
 })], DelegatesARIAButton.prototype, "ariaPressed", void 0);
-applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
-applyMixins(FASTButton, StartEnd, DelegatesARIAButton);
+applyMixins$1(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
+applyMixins$1(FASTButton, StartEnd, DelegatesARIAButton);
 
 /**
  * The template for the {@link @microsoft/fast-foundation#(FASTButton:class)} component.
@@ -6703,7 +6743,7 @@ const DividerOrientation = Orientation;
  * @public
  */
 function dividerTemplate() {
-  return html`<template role="${x => x.role}" aria-orientation="${x => x.orientation}"><slot></slot></template>`;
+  return html`<template role="${x => x.role}" aria-orientation="${x => x.role !== DividerRole.presentation ? x.orientation : void 0}"><slot></slot></template>`;
 }
 
 /**
@@ -7028,7 +7068,7 @@ __decorate([attr({
 })], FASTMenuItem.prototype, "hidden", void 0);
 __decorate([observable], FASTMenuItem.prototype, "slottedSubmenu", void 0);
 __decorate([observable], FASTMenuItem.prototype, "submenu", void 0);
-applyMixins(FASTMenuItem, StartEnd);
+applyMixins$1(FASTMenuItem, StartEnd);
 
 /**
  * The template for the {@link @microsoft/fast-foundation#FASTMenu} component.
@@ -7492,8 +7532,8 @@ __decorate([observable], FASTTextField.prototype, "defaultSlottedNodes", void 0)
  * @public
  */
 class DelegatesARIATextbox {}
-applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
-applyMixins(FASTTextField, StartEnd, DelegatesARIATextbox);
+applyMixins$1(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
+applyMixins$1(FASTTextField, StartEnd, DelegatesARIATextbox);
 
 /**
  * A base class for progress components.
@@ -7567,7 +7607,7 @@ const progressSegments = 44;
  * @public
  */
 function progressRingTemplate(options = {}) {
-  return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate"><circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle><circle class="determinate" part="determinate" style="stroke-dasharray: ${x => progressSegments * x.percentComplete / 100}px ${progressSegments}px" cx="8px" cy="8px" r="7px"></circle></svg>`)} ${when(x => typeof x.value !== "number", html`<slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator)}</slot>`)}</template>`;
+  return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<svg class="progress" part="progress" viewBox="0 0 16 16" slot="determinate"><circle class="background" part="background" cx="8px" cy="8px" r="7px"></circle><circle class="determinate" part="determinate" style="stroke-dasharray: ${x => progressSegments * x.percentComplete / 100}px ${progressSegments}px" cx="8px" cy="8px" r="7px"></circle></svg>`, html`<slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator)}</slot>`)}</template>`;
 }
 
 /**
@@ -7588,7 +7628,7 @@ class FASTProgress extends FASTBaseProgress {}
  * @public
  */
 function progressTemplate(options = {}) {
-  return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<div class="progress" part="progress" slot="determinate"><div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div></div>`)} ${when(x => typeof x.value !== "number", html`<div class="progress" part="progress" slot="indeterminate"><slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator1)} ${staticallyCompose(options.indeterminateIndicator2)}</slot></div>`)}</template>`;
+  return html`<template role="progressbar" aria-valuenow="${x => x.value}" aria-valuemin="${x => x.min}" aria-valuemax="${x => x.max}">${when(x => typeof x.value === "number", html`<div class="progress" part="progress" slot="determinate"><div class="determinate" part="determinate" style="width: ${x => x.percentComplete}%"></div></div>`, html`<div class="progress" part="progress" slot="indeterminate"><slot name="indeterminate">${staticallyCompose(options.indeterminateIndicator1)} ${staticallyCompose(options.indeterminateIndicator2)}</slot></div>`)}</template>`;
 }
 
 /**
@@ -8630,7 +8670,7 @@ class FASTTab extends FASTElement {}
 __decorate([attr({
   mode: "boolean"
 })], FASTTab.prototype, "disabled", void 0);
-applyMixins(FASTTab, StartEnd);
+applyMixins$1(FASTTab, StartEnd);
 
 /**
  * The orientation of the {@link @microsoft/fast-foundation#(FASTTabs:class)} component
@@ -8677,8 +8717,11 @@ class FASTTabs extends FASTElement {
     this.isDisabledElement = el => {
       return el.getAttribute("aria-disabled") === "true";
     };
+    this.isHiddenElement = el => {
+      return el.hasAttribute("hidden");
+    };
     this.isFocusableElement = el => {
-      return !this.isDisabledElement(el);
+      return !this.isDisabledElement(el) && !this.isHiddenElement(el);
     };
     this.setTabs = () => {
       const gridHorizontalProperty = "gridColumn";
@@ -8698,6 +8741,7 @@ class FASTTabs extends FASTElement {
           tab.setAttribute("tabindex", isActiveTab ? "0" : "-1");
           if (isActiveTab) {
             this.activetab = tab;
+            this.activeid = tabId;
           }
         }
         // If the original property isn't emptied out,
@@ -8883,7 +8927,7 @@ class FASTTabs extends FASTElement {
    * This method allows the active index to be adjusted by numerical increments
    */
   adjust(adjustment) {
-    const focusableTabs = this.tabs.filter(t => !this.isDisabledElement(t));
+    const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
     const currentActiveTabIndex = focusableTabs.indexOf(this.activetab);
     const nextTabIndex = limit(0, focusableTabs.length - 1, currentActiveTabIndex + adjustment);
     // the index of the next focusable tab within the context of all available tabs
@@ -8909,7 +8953,7 @@ __decorate([attr], FASTTabs.prototype, "orientation", void 0);
 __decorate([attr], FASTTabs.prototype, "activeid", void 0);
 __decorate([observable], FASTTabs.prototype, "tabs", void 0);
 __decorate([observable], FASTTabs.prototype, "tabpanels", void 0);
-applyMixins(FASTTabs, StartEnd);
+applyMixins$1(FASTTabs, StartEnd);
 
 /**
  * The template for the {@link @microsoft/fast-foundation#(FASTTextField:class)} component.
@@ -10438,6 +10482,30 @@ const definition$n = Avatar.compose({
   styles: styles$l
 });
 
+/**
+ * Apply mixins to a constructor.
+ * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ *
+ * TODO: Remove with https://github.com/microsoft/fast/pull/6797
+ * This was used for Badge where start/end was not yet implemented.
+ * The method itself was deprecated as it was largely intended to be "internals" for Fast Foundation.
+ * Adding here to avoid breaking of the existing API.
+ * @internal
+ */
+function applyMixins(derivedCtor, ...baseCtors) {
+  const derivedAttributes = AttributeConfiguration.locate(derivedCtor);
+  baseCtors.forEach(baseCtor => {
+    Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
+      if (name !== 'constructor') {
+        Object.defineProperty(derivedCtor.prototype, name, /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+        Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
+      }
+    });
+    const baseAttributes = AttributeConfiguration.locate(baseCtor);
+    baseAttributes.forEach(x => derivedAttributes.push(x));
+  });
+}
+
 /**
  * BadgeAppearance constants
  * @public