@fluentui/web-components 3.0.0-beta.123 → 3.0.0-beta.124

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Fri, 05 Sep 2025 04:09:42 GMT and should not be manually modified.
+This log was last generated on Thu, 18 Sep 2025 04:07:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-beta.124](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.124)
+
+Thu, 18 Sep 2025 04:07:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.123..@fluentui/web-components_v3.0.0-beta.124)
+
+### Changes
+
+- fix: bug in switch checked story in forced-colors mode ([PR #35204](https://github.com/microsoft/fluentui/pull/35204) by rupertdavid@microsoft.com)
+
 ## [3.0.0-beta.123](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-beta.123)
 
-Fri, 05 Sep 2025 04:09:42 GMT 
+Fri, 05 Sep 2025 04:09:54 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-beta.122..@fluentui/web-components_v3.0.0-beta.123)
 
 ### Changes

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

@@ -95,6 +95,7 @@ export const styles = css `
   :host(:not([slot='input']):focus-visible) {
     border-color: ${colorTransparentStroke};
     outline: ${strokeWidthThick} solid ${colorTransparentStroke};
+    outline-offset: 1px;
     box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `

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;kBAC7C,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,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"}

package/dist/web-components.js

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

package/dist/web-components.min.js

@@ -525,7 +525,7 @@ const p=Object.freeze({prefix:"fluent",shadowRootMode:"open",registry:customElem
     .background{display:none}.indicator{border-color:Canvas;border-block-start-color:Highlight;border-right-color:Highlight}`)),kg=b`<slot name="indicator"><div class="background"></div><div class="progress"><div class="spinner"><div class="start"><div class="indicator"></div></div><div class="end"><div class="indicator"></div></div></div></div></slot>`,wg=Wr.compose({name:`${p.prefix}-spinner`,template:kg,styles:xg});wg.define(p.registry);class Cg extends Pe{constructor(){super(),this.elementInternals.role="switch"}}function Sg(o={}){return b`<template @click="${(e,t)=>e.clickHandler(t.event)}" @input="${(e,t)=>e.inputHandler(t.event)}" @keydown="${(e,t)=>e.keydownHandler(t.event)}" @keyup="${(e,t)=>e.keyupHandler(t.event)}"><slot name="switch">${fe(o.switch)}</slot></template>`}const Ig=Sg({switch:'<span class="checked-indicator" part="checked-indicator"></span>'}),Pg=u`
   ${k("inline-flex")}
 
-  :host{box-sizing:border-box;align-items:center;flex-direction:row;outline:none;user-select:none;contain:content;padding:0 ${H};width:40px;height:20px;background-color:${me};border:1px solid ${Ve};border-radius:${$e}}:host(:enabled){cursor:pointer}:host(:hover){background:none;border-color:${mt}}:host(:active){border-color:${vt}}:host(:disabled),:host([readonly]){border:1px solid ${Ce};background-color:none;pointer:default}:host(${x}){background:${ft};border-color:${ft}}:host(${x}:hover){background:${Ht};border-color:${Ht}}:host(${x}:active){background:${Vt};border-color:${Vt}}:host(${x}:disabled){background:${it};border-color:${Ce}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${Z};transition-duration:${$i};transition-timing-function:${xi};transition-property:margin-inline-start}:host(${x}) .checked-indicator{background-color:${bt};margin-inline-start:calc(100% - 14px)}:host(${x}:hover) .checked-indicator{background:${Ll}}:host(${x}:active) .checked-indicator{background:${jl}}:host(:hover) .checked-indicator{background-color:${Ol}}:host(:active) .checked-indicator{background-color:${_l}}:host(:disabled) .checked-indicator,:host([readonly]) .checked-indicator{background:${S}}:host(${x}:disabled) .checked-indicator{background:${S}}:host(:focus-visible){outline:none}:host(:not([slot='input']):focus-visible){border-color:${J};outline:${ue} solid ${J};box-shadow:${fi},0 0 0 2px ${ve}}`.withBehaviors(U(u`
+  :host{box-sizing:border-box;align-items:center;flex-direction:row;outline:none;user-select:none;contain:content;padding:0 ${H};width:40px;height:20px;background-color:${me};border:1px solid ${Ve};border-radius:${$e}}:host(:enabled){cursor:pointer}:host(:hover){background:none;border-color:${mt}}:host(:active){border-color:${vt}}:host(:disabled),:host([readonly]){border:1px solid ${Ce};background-color:none;pointer:default}:host(${x}){background:${ft};border-color:${ft}}:host(${x}:hover){background:${Ht};border-color:${Ht}}:host(${x}:active){background:${Vt};border-color:${Vt}}:host(${x}:disabled){background:${it};border-color:${Ce}}.checked-indicator{height:14px;width:14px;border-radius:50%;margin-inline-start:0;background-color:${Z};transition-duration:${$i};transition-timing-function:${xi};transition-property:margin-inline-start}:host(${x}) .checked-indicator{background-color:${bt};margin-inline-start:calc(100% - 14px)}:host(${x}:hover) .checked-indicator{background:${Ll}}:host(${x}:active) .checked-indicator{background:${jl}}:host(:hover) .checked-indicator{background-color:${Ol}}:host(:active) .checked-indicator{background-color:${_l}}:host(:disabled) .checked-indicator,:host([readonly]) .checked-indicator{background:${S}}:host(${x}:disabled) .checked-indicator{background:${S}}:host(:focus-visible){outline:none}:host(:not([slot='input']):focus-visible){border-color:${J};outline:${ue} solid ${J};outline-offset:1px;box-shadow:${fi},0 0 0 2px ${ve}}`.withBehaviors(U(u`
     :host{border-color:InactiveBorder}:host(${x}),:host(${x}:active),:host(${x}:hover){background:Highlight;border-color:Highlight}.checked-indicator,:host(:hover) .checked-indicator,:host(:active) .checked-indicator{background-color:ActiveCaption}:host(${x}) .checked-indicator,:host(${x}:hover) .checked-indicator,:host(${x}:active) .checked-indicator{background-color:ButtonFace}:host(:disabled) .checked-indicator,:host(${x}:disabled) .checked-indicator{background-color:GrayText}`)),zg=Cg.compose({name:`${p.prefix}-switch`,template:Ig,styles:Pg});zg.define(p.registry);class Tg extends ${}function Bg(){return b`<template slot="tabpanel" role="tabpanel"><slot></slot></template>`}const Og=Bg(),_g=u`
   ${k("block")}
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
-  "version": "3.0.0-beta.123",
+  "version": "3.0.0-beta.124",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -67,6 +67,7 @@
     "start": "yarn start-storybook -p 6006 --docs",
     "start-storybook": "storybook dev",
     "build-storybook": "storybook build -o ./dist/storybook --docs",
+    "build-storybook:docsite": "cross-env DEPLOY_PATH=/web-components/ storybook build -o ./dist/storybook --docs",
     "e2e": "node ./scripts/e2e.js",
     "e2e:local": "node ./scripts/e2e.js --ui"
   },