@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.31

package/dist/esm/switch/switch.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.options.js","sourceRoot":"","sources":["../../../src/switch/switch.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC"}
+{"version":3,"file":"switch.options.js","sourceRoot":"","sources":["../../../src/switch/switch.options.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACR,CAAC;AAQX;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,SAAkB,CAAC"}

package/dist/esm/switch/switch.styles.css

@@ -0,0 +1,125 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+
+:host {
+  box-sizing: border-box;
+  align-items: center;
+  flex-direction: row;
+  outline: none;
+  user-select: none;
+  contain: content;
+  padding: 0 var(--spacingHorizontalXXS);
+  width: 40px;
+  height: 20px;
+  background-color: var(--colorTransparentBackground);
+  border: 1px solid var(--colorNeutralStrokeAccessible);
+  border-radius: var(--borderRadiusCircular);
+}
+
+:host(:enabled) {
+  cursor: pointer;
+}
+
+:host(:hover) {
+  background: none;
+  border-color: var(--colorNeutralStrokeAccessibleHover);
+}
+:host(:active) {
+  border-color: var(--colorNeutralStrokeAccessiblePressed);
+}
+:host(:disabled),
+:host([readonly]) {
+  border: 1px solid var(--colorNeutralStrokeDisabled);
+  background-color: none;
+  pointer: default;
+}
+:host(:state(checked)) {
+  background: var(--colorCompoundBrandBackground);
+  border-color: var(--colorCompoundBrandBackground);
+}
+:host(:state(checked):hover) {
+  background: var(--colorCompoundBrandBackgroundHover);
+  border-color: var(--colorCompoundBrandBackgroundHover);
+}
+:host(:state(checked):active) {
+  background: var(--colorCompoundBrandBackgroundPressed);
+  border-color: var(--colorCompoundBrandBackgroundPressed);
+}
+:host(:state(checked):disabled) {
+  background: var(--colorNeutralBackgroundDisabled);
+  border-color: var(--colorNeutralStrokeDisabled);
+}
+.checked-indicator {
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  margin-inline-start: 0;
+  background-color: var(--colorNeutralForeground3);
+  transition-duration: var(--durationNormal);
+  transition-timing-function: var(--curveEasyEase);
+  transition-property: margin-inline-start;
+}
+:host(:state(checked)) .checked-indicator {
+  background-color: var(--colorNeutralForegroundInverted);
+  margin-inline-start: calc(100% - 14px);
+}
+:host(:state(checked):hover) .checked-indicator {
+  background: var(--colorNeutralForegroundInvertedHover);
+}
+:host(:state(checked):active) .checked-indicator {
+  background: var(--colorNeutralForegroundInvertedPressed);
+}
+:host(:hover) .checked-indicator {
+  background-color: var(--colorNeutralForeground3Hover);
+}
+:host(:active) .checked-indicator {
+  background-color: var(--colorNeutralForeground3Pressed);
+}
+:host(:disabled) .checked-indicator,
+:host([readonly]) .checked-indicator {
+  background: var(--colorNeutralForegroundDisabled);
+}
+:host(:state(checked):disabled) .checked-indicator {
+  background: var(--colorNeutralForegroundDisabled);
+}
+
+:host(:focus-visible) {
+  outline: none;
+}
+
+:host(:not([slot='input']):focus-visible) {
+  border-color: var(--colorTransparentStroke);
+  outline: var(--strokeWidthThick) solid var(--colorTransparentStroke);
+  outline-offset: 1px;
+  box-shadow: var(--shadow4), 0 0 0 2px var(--colorStrokeFocus2);
+}
+
+@media (forced-colors: active) {
+  :host {
+    border-color: InactiveBorder;
+  }
+  :host(:state(checked)),
+  :host(:state(checked):active),
+  :host(:state(checked):hover) {
+    background: Highlight;
+    border-color: Highlight;
+  }
+  .checked-indicator,
+  :host(:hover) .checked-indicator,
+  :host(:active) .checked-indicator {
+    background-color: ActiveCaption;
+  }
+  :host(:state(checked)) .checked-indicator,
+  :host(:state(checked):hover) .checked-indicator,
+  :host(:state(checked):active) .checked-indicator {
+    background-color: ButtonFace;
+  }
+  :host(:disabled) .checked-indicator,
+  :host(:state(checked):disabled) .checked-indicator {
+    background-color: GrayText;
+  }
+}

package/dist/esm/switch/switch.styles.js

@@ -1,7 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { checkedState } from '../styles/states/index.js';
 import { borderRadiusCircular, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorNeutralBackgroundDisabled, colorNeutralForeground3, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedPressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorStrokeFocus2, colorTransparentBackground, colorTransparentStroke, curveEasyEase, durationNormal, shadow4, spacingHorizontalXXS, strokeWidthThick, } from '../theme/design-tokens.js';
-import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
 import { display } from '../utils/display.js';
 export const styles = css `
   ${display('inline-flex')}
@@ -98,7 +97,8 @@ export const styles = css `
     outline-offset: 1px;
     box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
   }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
+
+  @media (forced-colors: active) {
     :host {
       border-color: InactiveBorder;
     }
@@ -122,5 +122,6 @@ export const styles = css `
     :host(${checkedState}:disabled) .checked-indicator {
       background-color: GrayText;
     }
-  `));
+  }
+`;
 //# sourceMappingURL=switch.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,mCAAmC,EACnC,qCAAqC,EACrC,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,OAAO,EACP,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,8BAA8B,EAAE,MAAM,uDAAuD,CAAC;AACvG,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;iBAST,oBAAoB;;;wBAGb,0BAA0B;wBAC1B,4BAA4B;qBAC/B,oBAAoB;;;;;;;;;oBASrB,iCAAiC;;;oBAGjC,mCAAmC;;;;wBAI/B,0BAA0B;;;;UAIxC,YAAY;kBACJ,4BAA4B;oBAC1B,4BAA4B;;UAEtC,YAAY;kBACJ,iCAAiC;oBAC/B,iCAAiC;;UAE3C,YAAY;kBACJ,mCAAmC;oBACjC,mCAAmC;;UAE7C,YAAY;kBACJ,8BAA8B;oBAC5B,0BAA0B;;;;;;;wBAOtB,uBAAuB;2BACpB,cAAc;kCACP,aAAa;;;UAGrC,YAAY;wBACE,8BAA8B;;;UAG5C,YAAY;kBACJ,mCAAmC;;UAE3C,YAAY;kBACJ,qCAAqC;;;wBAG/B,4BAA4B;;;wBAG5B,8BAA8B;;;;kBAIpC,8BAA8B;;UAEtC,YAAY;kBACJ,8BAA8B;;;;;;;;oBAQ5B,sBAAsB;eAC3B,gBAAgB,UAAU,sBAAsB;;kBAE7C,OAAO,eAAe,iBAAiB;;CAExD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;YAIxB,YAAY;YACZ,YAAY;YACZ,YAAY;;;;;;;;;YASZ,YAAY;YACZ,YAAY;YACZ,YAAY;;;;YAIZ,YAAY;;;GAGrB,CAAC,CACH,CAAC"}
+{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,mCAAmC,EACnC,qCAAqC,EACrC,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,OAAO,EACP,oBAAoB,EACpB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;iBAST,oBAAoB;;;wBAGb,0BAA0B;wBAC1B,4BAA4B;qBAC/B,oBAAoB;;;;;;;;;oBASrB,iCAAiC;;;oBAGjC,mCAAmC;;;;wBAI/B,0BAA0B;;;;UAIxC,YAAY;kBACJ,4BAA4B;oBAC1B,4BAA4B;;UAEtC,YAAY;kBACJ,iCAAiC;oBAC/B,iCAAiC;;UAE3C,YAAY;kBACJ,mCAAmC;oBACjC,mCAAmC;;UAE7C,YAAY;kBACJ,8BAA8B;oBAC5B,0BAA0B;;;;;;;wBAOtB,uBAAuB;2BACpB,cAAc;kCACP,aAAa;;;UAGrC,YAAY;wBACE,8BAA8B;;;UAG5C,YAAY;kBACJ,mCAAmC;;UAE3C,YAAY;kBACJ,qCAAqC;;;wBAG/B,4BAA4B;;;wBAG5B,8BAA8B;;;;kBAIpC,8BAA8B;;UAEtC,YAAY;kBACJ,8BAA8B;;;;;;;;oBAQ5B,sBAAsB;eAC3B,gBAAgB,UAAU,sBAAsB;;kBAE7C,OAAO,eAAe,iBAAiB;;;;;;;YAO7C,YAAY;YACZ,YAAY;YACZ,YAAY;;;;;;;;;YASZ,YAAY;YACZ,YAAY;YACZ,YAAY;;;;YAIZ,YAAY;;;;CAIvB,CAAC"}

package/dist/esm/switch/switch.template.html

@@ -0,0 +1,11 @@
+<f-template name="fluent-switch" shadowrootmode="open">
+  <template
+    @click="{clickHandler($e)}"
+    @input="{inputHandler($e)}"
+    @keydown="{keydownHandler($e)}"
+    @keyup="{keyupHandler($e)}"
+  >
+    {{styles}}
+    <slot name="switch"><span class="checked-indicator" part="checked-indicator"></span></slot>
+  </template>
+</f-template>

package/dist/esm/switch/switch.template.js

@@ -1,5 +1,5 @@
 import { html } from '@microsoft/fast-element';
-import { staticallyCompose } from '../utils/index.js';
+import { staticallyCompose } from '../utils/template-helpers.js';
 export function switchTemplate(options = {}) {
     return html `
     <template

package/dist/esm/switch/switch.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.template.js","sourceRoot":"","sources":["../../../src/switch/switch.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAGtD,MAAM,UAAU,cAAc,CAAmB,UAAyB,EAAE;IAC1E,OAAO,IAAI,CAAG;;gBAEA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;kBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;gBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAsB,CAAC;;4BAEtC,iBAAiB,CAAC,OAAO,CAAC,MAAM,CAAC;;GAE1D,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,CAAC;IAClE,MAAM,EAAE,kEAAkE;CAC3E,CAAC,CAAC"}
+{"version":3,"file":"switch.template.js","sourceRoot":"","sources":["../../../src/switch/switch.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAGjE,MAAM,UAAU,cAAc,CAAmB,UAAyB,EAAE;IAC1E,OAAO,IAAI,CAAG;;gBAEA,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;gBAC/C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;kBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;gBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAsB,CAAC;;4BAEtC,iBAAiB,CAAC,OAAO,CAAC,MAAM,CAAC;;GAE1D,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,CAAC;IAClE,MAAM,EAAE,kEAAkE;CAC3E,CAAC,CAAC"}

package/dist/esm/tab/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/tab/define-async.js

@@ -0,0 +1,4 @@
+import { declarativeDefinition } from './tab.definition-async.js';
+import { Tab } from './tab.js';
+Tab.define(declarativeDefinition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/tab/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/tab/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,GAAG,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/tab/define.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './tab.definition.js';
-definition.define(FluentDesignSystem.registry);
+import { Tab } from './tab.js';
+Tab.define(definition);
 //# sourceMappingURL=define.js.map

package/dist/esm/tab/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/tab/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/tab/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/tab/index.d.ts

@@ -4,3 +4,4 @@ export { Tab } from './tab.js';
 export type { TabOptions } from './tab.js';
 export { styles as TabStyles } from './tab.styles.js';
 export { template as TabTemplate } from './tab.template.js';
+export { tagName as TabTagName } from './tab.options.js';

package/dist/esm/tab/index.js

@@ -3,4 +3,5 @@ export { isTab } from './tab.options.js';
 export { Tab } from './tab.js';
 export { styles as TabStyles } from './tab.styles.js';
 export { template as TabTemplate } from './tab.template.js';
+export { tagName as TabTagName } from './tab.options.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,QAAQ,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/esm/tab/tab.bench.d.ts

@@ -1,3 +1,4 @@
+import './define.js';
 declare const itemRenderer: () => HTMLElement;
 export default itemRenderer;
 export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/tab/tab.bench.js

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './tab.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const tab = document.createElement('fluent-tab');
     tab.appendChild(document.createTextNode('tab'));

package/dist/esm/tab/tab.bench.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.bench.js","sourceRoot":"","sources":["../../../src/tab/tab.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACjD,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"tab.bench.js","sourceRoot":"","sources":["../../../src/tab/tab.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACjD,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/tab/tab.d.ts

@@ -19,8 +19,22 @@ export declare class Tab extends FASTElement {
      * HTML Attribute: disabled
      */
     disabled: boolean;
-    private styles;
+    protected disabledChanged(prev: boolean, next: boolean): void;
+    /**
+     * Internal text content stylesheet, used to set the content of the `::after`
+     * pseudo element to prevent layout shift when the font weight changes on selection.
+     * @internal
+     */
+    private styles?;
+    /**
+     * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+     *
+     * @internal
+     */
+    elementInternals: ElementInternals;
+    constructor();
     connectedCallback(): void;
+    private setDisabledSideEffect;
 }
 export interface Tab extends StartEnd {
 }

package/dist/esm/tab/tab.definition-async.d.ts

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-tab>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const declarativeDefinition: PartialFASTElementDefinition;

package/dist/esm/tab/tab.definition-async.js

@@ -0,0 +1,17 @@
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './tab.options.js';
+/**
+ * The async definition configuration for the `<fluent-tab>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const declarativeDefinition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
+    template: declarativeTemplate(),
+};
+//# sourceMappingURL=tab.definition-async.js.map

package/dist/esm/tab/tab.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.definition-async.js","sourceRoot":"","sources":["../../../src/tab/tab.definition-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAqC,MAAM,wCAAwC,CAAC;AAChH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiC;IACjE,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,QAAQ,EAAE,mBAAmB,EAAE;CAChC,CAAC"}

package/dist/esm/tab/tab.definition.d.ts

@@ -1,2 +1,7 @@
-import { Tab } from './tab.js';
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Tab>;
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
+/**
+ * The definition for the `<fluent-tab>` element.
+ *
+ * @public
+ */
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/tab/tab.definition.js

@@ -1,10 +1,16 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { Tab } from './tab.js';
-import { template } from './tab.template.js';
+import { tagName } from './tab.options.js';
 import { styles } from './tab.styles.js';
-export const definition = Tab.compose({
-    name: `${FluentDesignSystem.prefix}-tab`,
-    template,
+import { template } from './tab.template.js';
+/**
+ * The definition for the `<fluent-tab>` element.
+ *
+ * @public
+ */
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     styles,
-});
+    template,
+};
 //# sourceMappingURL=tab.definition.js.map

package/dist/esm/tab/tab.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.definition.js","sourceRoot":"","sources":["../../../src/tab/tab.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC;IACpC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,MAAM;IACxC,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"tab.definition.js","sourceRoot":"","sources":["../../../src/tab/tab.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}

package/dist/esm/tab/tab.js

@@ -2,23 +2,49 @@ import { __decorate } from "tslib";
 import { attr, css, FASTElement } from '@microsoft/fast-element';
 import { StartEnd } from '../patterns/start-end.js';
 import { applyMixins } from '../utils/apply-mixins.js';
+import { maybeSetAutoFocus } from '../utils/autofocus.js';
 /**
  * Tab extends the FASTTab and is a child of the TabList
  *
  * @tag fluent-tab
  */
 export class Tab extends FASTElement {
+    disabledChanged(prev, next) {
+        this.setDisabledSideEffect(next);
+    }
+    constructor() {
+        super();
+        /**
+         * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
+         *
+         * @internal
+         */
+        this.elementInternals = this.attachInternals();
+        this.elementInternals.role = 'tab';
+    }
     connectedCallback() {
         super.connectedCallback();
-        if (this.styles !== undefined) {
+        this.slot ||= 'tab';
+        this.setDisabledSideEffect(this.disabled);
+        if (this.styles) {
             this.$fastController.removeStyles(this.styles);
         }
-        this.styles = css /**css*/ `
+        this.styles = css `
       :host {
         --textContent: '${this.textContent}';
       }
     `;
         this.$fastController.addStyles(this.styles);
+        maybeSetAutoFocus(this);
+    }
+    setDisabledSideEffect(disabled) {
+        if (disabled) {
+            this.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.removeAttribute('aria-disabled');
+        }
+        this.tabIndex = disabled && this.getAttribute('aria-selected') !== 'true' ? -1 : 0;
     }
 }
 __decorate([

package/dist/esm/tab/tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/tab/tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAsB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAErF,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAQvD;;;;GAIG;AACH,MAAM,OAAO,GAAI,SAAQ,WAAW;IAYlC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,EAAE,CAAC;YAC9B,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACjD,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,GAAG,CAAA,QAAQ,CAAC;;0BAEJ,IAAI,CAAC,WAAkB;;KAE5C,CAAC;QAEF,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;CACF;AAnBQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACA;AAuB5B,WAAW,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/tab/tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAsB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAErF,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAQ1D;;;;GAIG;AACH,MAAM,OAAO,GAAI,SAAQ,WAAW;IASxB,eAAe,CAAC,IAAa,EAAE,IAAa;QACpD,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAgBD;QACE,KAAK,EAAE,CAAC;QARV;;;;WAIG;QACI,qBAAgB,GAAqB,IAAI,CAAC,eAAe,EAAE,CAAC;QAKjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,GAAG,KAAK,CAAC;IACrC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;QAEpB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE1C,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACjD,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,GAAG,CAAA;;0BAEK,IAAI,CAAC,WAAqB;;KAE/C,CAAC;QAEF,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE5C,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC;IAEO,qBAAqB,CAAC,QAAiB;QAC7C,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrF,CAAC;CACF;AAvDQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACA;AA2D5B,WAAW,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC"}

package/dist/esm/tab/tab.options.d.ts

@@ -8,3 +8,9 @@ import type { Tab } from './tab.js';
  * @public
  */
 export declare function isTab(element?: Node | null, tagName?: string): element is Tab;
+/**
+ * The tag name for the tab element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-tab";

package/dist/esm/tab/tab.options.js

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
  * Predicate function that determines if the element should be considered a tab.
  *
@@ -12,4 +13,10 @@ export function isTab(element, tagName = '-tab') {
     }
     return element.tagName.toLowerCase().endsWith(tagName);
 }
+/**
+ * The tag name for the tab element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-tab`;
 //# sourceMappingURL=tab.options.js.map

package/dist/esm/tab/tab.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.options.js","sourceRoot":"","sources":["../../../src/tab/tab.options.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,OAAqB,EAAE,UAAkB,MAAM;IACnE,IAAI,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,OAAmB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACtE,CAAC"}
+{"version":3,"file":"tab.options.js","sourceRoot":"","sources":["../../../src/tab/tab.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,OAAqB,EAAE,UAAkB,MAAM;IACnE,IAAI,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAQ,OAAmB,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AACtE,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,MAAe,CAAC"}

package/dist/esm/tab/tab.styles.css

@@ -0,0 +1,122 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-flex;
+}
+
+:host {
+  position: relative;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
+  justify-content: center;
+  line-height: var(--lineHeightBase300);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  color: var(--colorNeutralForeground2);
+  fill: currentcolor;
+  grid-row: 1;
+  padding: var(--spacingHorizontalM) var(--spacingHorizontalMNudge);
+  border-radius: var(--borderRadiusMedium);
+  gap: 4px;
+}
+:host .tab-content {
+  display: inline-flex;
+  flex-direction: column;
+  padding: 0 2px;
+}
+
+:host([aria-selected='true']) {
+  color: var(--colorNeutralForeground1);
+  font-weight: var(--fontWeightSemibold);
+}
+
+/* adds hidden textContent to prevent shifting ui on bold / unbolding of text */
+:host .tab-content::after {
+  content: var(--textContent);
+  visibility: hidden;
+  height: 0;
+  line-height: var(--lineHeightBase300);
+  font-weight: var(--fontWeightSemibold);
+}
+
+:host([aria-selected='true'])::after {
+  background-color: var(--colorCompoundBrandStroke);
+  border-radius: var(--borderRadiusCircular);
+  content: '';
+  inset: 0;
+  position: absolute;
+  z-index: 2;
+}
+
+:host([aria-selected='false']:hover)::after {
+  background-color: var(--colorNeutralStroke1Hover);
+  border-radius: var(--borderRadiusCircular);
+  content: '';
+  inset: 0;
+  position: absolute;
+  z-index: 1;
+}
+
+/*
+   * TODO: Remove '(text-size-adjust: auto)' after this bug is fixed:
+   * https://bugs.webkit.org/show_bug.cgi?id=298646
+   * Also remove the same trick from tablist.styles.ts.
+   * Using '@supports (text-size-adjust: auto)' here to exclude Safari 26 from
+   * using CSS Anchor Positioning here because it crashes.
+   */
+@supports (anchor-name: --a) and (text-size-adjust: auto) {
+  :host([aria-selected='true'])::after {
+    background-color: transparent;
+  }
+
+  :host([aria-selected='true']:hover)::after {
+    background-color: var(--colorNeutralStroke1Hover);
+  }
+}
+
+:host([aria-selected='true'][disabled])::after {
+  background-color: var(--colorNeutralForegroundDisabled);
+}
+
+::slotted([slot='start']),
+::slotted([slot='end']) {
+  display: flex;
+}
+:host([disabled]) {
+  cursor: not-allowed;
+  fill: var(--colorNeutralForegroundDisabled);
+  color: var(--colorNeutralForegroundDisabled);
+  pointer-events: none;
+}
+
+:host([disabled]:hover)::after {
+  background-color: unset;
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+:host(:focus-visible) {
+  border-radius: var(--borderRadiusSmall);
+  box-shadow: 0 0 0 3px var(--colorStrokeFocus2);
+  outline: 1px solid var(--colorStrokeFocus1);
+}
+
+:host([data-hasIndent]) {
+  display: grid;
+  grid-template-columns: 20px 1fr auto;
+}
+
+:host([data-hasIndent]) .tab-content {
+  grid-column: 2;
+}
+
+@media (forced-colors: active) {
+  :host([aria-selected='true'])::after {
+    background-color: Highlight;
+  }
+}

package/dist/esm/tab/tab.styles.js

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { display } from '../utils/display.js';
 import { borderRadiusCircular, borderRadiusMedium, borderRadiusSmall, colorCompoundBrandStroke, colorNeutralForeground1, colorNeutralForeground2, colorNeutralForegroundDisabled, colorNeutralStroke1Hover, colorStrokeFocus1, colorStrokeFocus2, fontFamilyBase, fontSizeBase300, fontWeightSemibold, lineHeightBase300, spacingHorizontalM, spacingHorizontalMNudge, } from '../theme/design-tokens.js';
 export const styles = css `
   ${display('inline-flex')}
@@ -59,6 +59,23 @@ export const styles = css `
     z-index: 1;
   }
 
+  /*
+   * TODO: Remove '(text-size-adjust: auto)' after this bug is fixed:
+   * https://bugs.webkit.org/show_bug.cgi?id=298646
+   * Also remove the same trick from tablist.styles.ts.
+   * Using '@supports (text-size-adjust: auto)' here to exclude Safari 26 from
+   * using CSS Anchor Positioning here because it crashes.
+   */
+  @supports (anchor-name: --a) and (text-size-adjust: auto) {
+    :host([aria-selected='true'])::after {
+      background-color: transparent;
+    }
+
+    :host([aria-selected='true']:hover)::after {
+      background-color: ${colorNeutralStroke1Hover};
+    }
+  }
+
   :host([aria-selected='true'][disabled])::after {
     background-color: ${colorNeutralForegroundDisabled};
   }
@@ -71,6 +88,7 @@ export const styles = css `
     cursor: not-allowed;
     fill: ${colorNeutralForegroundDisabled};
     color: ${colorNeutralForegroundDisabled};
+    pointer-events: none;
   }
 
   :host([disabled]:hover)::after {
@@ -95,9 +113,11 @@ export const styles = css `
   :host([data-hasIndent]) .tab-content {
     grid-column: 2;
   }
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
+
+  @media (forced-colors: active) {
     :host([aria-selected='true'])::after {
       background-color: Highlight;
     }
-  `));
+  }
+`;
 //# sourceMappingURL=tab.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../../src/tab/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,wBAAwB,EACxB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;mBASP,iBAAiB;mBACjB,cAAc;iBAChB,eAAe;aACnB,uBAAuB;;;eAGrB,kBAAkB,IAAI,uBAAuB;qBACvC,kBAAkB;;;;;;;;;;aAU1B,uBAAuB;mBACjB,kBAAkB;;;;;;;;mBAQlB,iBAAiB;mBACjB,kBAAkB;;;;wBAIb,wBAAwB;qBAC3B,oBAAoB;;;;;;;;wBAQjB,wBAAwB;qBAC3B,oBAAoB;;;;;;;;wBAQjB,8BAA8B;;;;;;;;;YAS1C,8BAA8B;aAC7B,8BAA8B;;;;;;;;;;;;qBAYtB,iBAAiB;4BACV,iBAAiB;yBACpB,iBAAiB;;;;;;;;;;;CAWzC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../../src/tab/tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,wBAAwB,EACxB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;mBASP,iBAAiB;mBACjB,cAAc;iBAChB,eAAe;aACnB,uBAAuB;;;eAGrB,kBAAkB,IAAI,uBAAuB;qBACvC,kBAAkB;;;;;;;;;;aAU1B,uBAAuB;mBACjB,kBAAkB;;;;;;;;mBAQlB,iBAAiB;mBACjB,kBAAkB;;;;wBAIb,wBAAwB;qBAC3B,oBAAoB;;;;;;;;wBAQjB,wBAAwB;qBAC3B,oBAAoB;;;;;;;;;;;;;;;;;;;;0BAoBf,wBAAwB;;;;;wBAK1B,8BAA8B;;;;;;;;;YAS1C,8BAA8B;aAC7B,8BAA8B;;;;;;;;;;;;;qBAatB,iBAAiB;4BACV,iBAAiB;yBACpB,iBAAiB;;;;;;;;;;;;;;;;;CAiBzC,CAAC"}

package/dist/esm/tab/tab.template.html

@@ -0,0 +1,8 @@
+<f-template name="fluent-tab" shadowrootmode="open">
+  <template slot="tab" role="tab">
+    {{styles}}
+    <slot name="start" f-ref="{start}"></slot>
+    <span class="tab-content"><slot></slot></span>
+    <slot name="end" f-ref="{end}"></slot>
+  </template>
+</f-template>