@fluentui/web-components 3.0.0-alpha.5 → 3.0.0-alpha.6

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Wed, 22 Feb 2023 04:22:33 GMT",
+      "date": "Fri, 24 Feb 2023 04:20:26 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.6",
+      "version": "3.0.0-alpha.6",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "brianbrady@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "2de60aec984eb2802da76c6c67849da358c0db49",
+            "comment": "feat(switch): Add switch web component"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 Feb 2023 04:22:43 GMT",
       "tag": "@fluentui/web-components_v3.0.0-alpha.5",
       "version": "3.0.0-alpha.5",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Wed, 22 Feb 2023 04:22:33 GMT and should not be manually modified.
+This log was last generated on Fri, 24 Feb 2023 04:20:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.6)
+
+Fri, 24 Feb 2023 04:20:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.5..@fluentui/web-components_v3.0.0-alpha.6)
+
+### Changes
+
+- feat(switch): Add switch web component ([PR #26517](https://github.com/microsoft/fluentui/pull/26517) by brianbrady@microsoft.com)
+
 ## [3.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.5)
 
-Wed, 22 Feb 2023 04:22:33 GMT 
+Wed, 22 Feb 2023 04:22:43 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.4..@fluentui/web-components_v3.0.0-alpha.5)
 
 ### Changes

package/dist/dts/index.d.ts

@@ -4,5 +4,6 @@ export * from './badge/index.js';
 export * from './counter-badge/index.js';
 export * from './progress-bar/index.js';
 export * from './spinner/index.js';
+export * from './switch/index.js';
 export * from './text/index.js';
 export * from './theme/index.js';

package/dist/dts/switch/define.d.ts

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

package/dist/dts/switch/index.d.ts

@@ -0,0 +1,5 @@
+export * from './switch.js';
+export * from './switch.options.js';
+export { definition } from './switch.definition.js';
+export { styles as switchStyles } from './switch.styles.js';
+export { template as switchTemplate } from './switch.template.js';

package/dist/dts/switch/switch.d.ts

@@ -0,0 +1,13 @@
+import { FASTSwitch } from '@microsoft/fast-foundation';
+import { SwitchLabelPosition } from './switch.options.js';
+export declare class Switch extends FASTSwitch {
+    /**
+     * The label position of the switch
+     *
+     * @public
+     * @default 'after'
+     * @remarks
+     * HTML Attribute: labelposition
+     */
+    labelPosition: SwitchLabelPosition | undefined;
+}

package/dist/dts/switch/switch.definition.d.ts

@@ -0,0 +1,9 @@
+import { Switch } from './switch.js';
+/**
+ * The Fluent Switch Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-switch\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Switch>;

package/dist/dts/switch/switch.options.d.ts

@@ -0,0 +1,15 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * SwitchLabelPosition Constants
+ * @public
+ */
+export declare const SwitchLabelPosition: {
+    readonly above: "above";
+    readonly after: "after";
+    readonly before: "before";
+};
+/**
+ * Applies label position
+ * @public
+ */
+export declare type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;

package/dist/dts/switch/switch.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/dts/switch/switch.template.d.ts

@@ -0,0 +1,3 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { Switch } from './switch.js';
+export declare const template: ElementViewTemplate<Switch>;

package/dist/esm/index.js

@@ -4,6 +4,7 @@ export * from './badge/index.js';
 export * from './counter-badge/index.js';
 export * from './progress-bar/index.js';
 export * from './spinner/index.js';
+export * from './switch/index.js';
 export * from './text/index.js';
 export * from './theme/index.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,kBAAkB,CAAC"}

package/dist/esm/switch/define.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/switch/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/switch/index.js

@@ -0,0 +1,6 @@
+export * from './switch.js';
+export * from './switch.options.js';
+export { definition } from './switch.definition.js';
+export { styles as switchStyles } from './switch.styles.js';
+export { template as switchTemplate } from './switch.template.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/switch/switch.definition.js

@@ -0,0 +1,17 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Switch } from './switch.js';
+import { template } from './switch.template.js';
+import { styles } from './switch.styles.js';
+/**
+ * The Fluent Switch Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-switch\>
+ */
+export const definition = Switch.compose({
+    name: `${FluentDesignSystem.prefix}-switch`,
+    template,
+    styles,
+});
+//# sourceMappingURL=switch.definition.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.definition.js","sourceRoot":"","sources":["../../../src/switch/switch.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC;IACvC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,SAAS;IAC3C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/switch/switch.js

@@ -0,0 +1,9 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { FASTSwitch } from '@microsoft/fast-foundation';
+export class Switch extends FASTSwitch {
+}
+__decorate([
+    attr({ attribute: 'label-position' })
+], Switch.prototype, "labelPosition", void 0);
+//# sourceMappingURL=switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/switch/switch.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGxD,MAAM,OAAO,MAAO,SAAQ,UAAU;CAWrC;AADC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;6CACgB"}

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

@@ -0,0 +1,10 @@
+/**
+ * SwitchLabelPosition Constants
+ * @public
+ */
+export const SwitchLabelPosition = {
+    above: 'above',
+    after: 'after',
+    before: 'before',
+};
+//# sourceMappingURL=switch.options.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,114 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { borderRadiusCircular, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedPressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorTransparentBackground, curveEasyEase, durationNormal, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, spacingHorizontalS, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalS, spacingVerticalXS, } from '../theme/design-tokens.js';
+export const styles = css `
+  ${display('inline-flex')}
+
+  :host {
+    align-items: center;
+    flex-direction: row-reverse;
+    outline: none;
+    user-select: none;
+  }
+  :host([label-position='before']) {
+    flex-direction: row;
+  }
+  :host([label-position='above']) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  :host([disabled]) .label,
+  :host([readonly]) .label,
+  :host([readonly]) .switch,
+  :host([disabled]) .switch {
+    cursor: not-allowed;
+  }
+  .label {
+    position: relative;
+    color: ${colorNeutralForeground1};
+    line-height: ${lineHeightBase300};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    font-family: ${fontFamilyBase};
+    padding: ${spacingVerticalXS} ${spacingHorizontalXS};
+    cursor: pointer;
+  }
+  .label__hidden {
+    display: none;
+  }
+  .switch {
+    display: flex;
+    align-items: center;
+    padding: 0 ${spacingHorizontalXXS};
+    box-sizing: border-box;
+    width: 40px;
+    height: 20px;
+    background-color: ${colorTransparentBackground};
+    border: 1px solid ${colorNeutralStrokeAccessible};
+    border-radius: ${borderRadiusCircular};
+    outline: none;
+    cursor: pointer;
+    margin: ${spacingVerticalS} ${spacingHorizontalS};
+  }
+  :host(:hover) .switch {
+    background: none;
+    border-color: ${colorNeutralStrokeAccessibleHover};
+  }
+  :host(:active) .switch {
+    border-color: ${colorNeutralStrokeAccessiblePressed};
+  }
+  :host([disabled]) .switch,
+  :host([readonly]) .switch {
+    border: 1px solid ${colorNeutralStrokeDisabled};
+    background-color: none;
+    pointer: default;
+  }
+  :host([aria-checked='true']) .switch {
+    background: ${colorCompoundBrandBackground};
+  }
+  :host([aria-checked='true']:hover) .switch {
+    background: ${colorCompoundBrandBackgroundHover};
+    border-color: ${colorCompoundBrandBackgroundHover};
+  }
+  :host([aria-checked='true']:active) .switch {
+    background: ${colorCompoundBrandBackgroundPressed};
+    border-color: ${colorCompoundBrandBackgroundPressed};
+  }
+  :host([aria-checked='true'][disabled]) .switch {
+    background: ${colorNeutralBackgroundDisabled};
+    border-color: ${colorNeutralStrokeDisabled};
+  }
+  .checked-indicator {
+    height: 14px;
+    width: 14px;
+    border-radius: 50%;
+    background-color: ${colorNeutralForeground3};
+    transition-duration: ${durationNormal};
+    transition-timing-function: ${curveEasyEase};
+    transition-property: transform;
+  }
+  :host([aria-checked='true']) .checked-indicator {
+    background-color: ${colorNeutralForegroundInverted};
+    transform: translateX(20px);
+  }
+  :host([aria-checked='true']:hover) .checked-indicator {
+    background: ${colorNeutralForegroundInvertedHover};
+  }
+  :host([aria-checked='true']: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([aria-checked='true'][disabled]) .checked-indicator {
+    background: ${colorNeutralForegroundDisabled};
+  }
+`;
+//# sourceMappingURL=switch.styles.js.map

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

@@ -0,0 +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,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,mCAAmC,EACnC,qCAAqC,EACrC,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;aAuBb,uBAAuB;mBACjB,iBAAiB;iBACnB,eAAe;mBACb,iBAAiB;mBACjB,cAAc;eAClB,iBAAiB,IAAI,mBAAmB;;;;;;;;;iBAStC,oBAAoB;;;;wBAIb,0BAA0B;wBAC1B,4BAA4B;qBAC/B,oBAAoB;;;cAG3B,gBAAgB,IAAI,kBAAkB;;;;oBAIhC,iCAAiC;;;oBAGjC,mCAAmC;;;;wBAI/B,0BAA0B;;;;;kBAKhC,4BAA4B;;;kBAG5B,iCAAiC;oBAC/B,iCAAiC;;;kBAGnC,mCAAmC;oBACjC,mCAAmC;;;kBAGrC,8BAA8B;oBAC5B,0BAA0B;;;;;;wBAMtB,uBAAuB;2BACpB,cAAc;kCACP,aAAa;;;;wBAIvB,8BAA8B;;;;kBAIpC,mCAAmC;;;kBAGnC,qCAAqC;;;wBAG/B,4BAA4B;;;wBAG5B,8BAA8B;;;;kBAIpC,8BAA8B;;;kBAG9B,8BAA8B;;CAE/C,CAAC"}

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

@@ -0,0 +1,5 @@
+import { switchTemplate } from '@microsoft/fast-foundation';
+export const template = switchTemplate({
+    switch: `<span class="checked-indicator" part="checked-indicator"></span>`,
+});
+//# sourceMappingURL=switch.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.template.js","sourceRoot":"","sources":["../../../src/switch/switch.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG5D,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,CAAC;IAClE,MAAM,EAAE,kEAAkE;CAC3E,CAAC,CAAC"}

package/dist/fluent-web-components.api.json

@@ -11242,6 +11242,46 @@
             "endIndex": 4
           }
         },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!definition:var",
+          "docComment": "/**\n * The Fluent Switch Element.\n *\n * @remarks\n *\n * HTML Element: \\<fluent-switch\\>\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "definition: "
+            },
+            {
+              "kind": "Content",
+              "text": "import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "FASTElementDefinition",
+              "canonicalReference": "@microsoft/fast-element!FASTElementDefinition:class"
+            },
+            {
+              "kind": "Content",
+              "text": "<typeof "
+            },
+            {
+              "kind": "Reference",
+              "text": "Switch",
+              "canonicalReference": "@fluentui/web-components!Switch:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            }
+          ],
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "definition",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 6
+          }
+        },
         {
           "kind": "Variable",
           "canonicalReference": "@fluentui/web-components!durationFast:var",
@@ -14230,6 +14270,194 @@
             "endIndex": 4
           }
         },
+        {
+          "kind": "Class",
+          "canonicalReference": "@fluentui/web-components!Switch:class",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare class Switch extends "
+            },
+            {
+              "kind": "Reference",
+              "text": "FASTSwitch",
+              "canonicalReference": "@microsoft/fast-foundation!FASTSwitch:class"
+            },
+            {
+              "kind": "Content",
+              "text": " "
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "Switch",
+          "preserveMemberOrder": false,
+          "members": [
+            {
+              "kind": "Property",
+              "canonicalReference": "@fluentui/web-components!Switch#labelPosition:member",
+              "docComment": "/**\n * The label position of the switch\n *\n * @default 'after'\n *\n * @remarks\n *\n * HTML Attribute: labelposition\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "labelPosition: "
+                },
+                {
+                  "kind": "Reference",
+                  "text": "SwitchLabelPosition",
+                  "canonicalReference": "@fluentui/web-components!SwitchLabelPosition:type"
+                },
+                {
+                  "kind": "Content",
+                  "text": " | undefined"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "labelPosition",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 3
+              },
+              "isStatic": false,
+              "isProtected": false
+            }
+          ],
+          "extendsTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          },
+          "implementsTokenRanges": []
+        },
+        {
+          "kind": "TypeAlias",
+          "canonicalReference": "@fluentui/web-components!SwitchLabelPosition:type",
+          "docComment": "/**\n * Applies label position\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "export declare type SwitchLabelPosition = "
+            },
+            {
+              "kind": "Reference",
+              "text": "ValuesOf",
+              "canonicalReference": "@microsoft/fast-foundation!ValuesOf:type"
+            },
+            {
+              "kind": "Content",
+              "text": "<typeof "
+            },
+            {
+              "kind": "Reference",
+              "text": "SwitchLabelPosition",
+              "canonicalReference": "@fluentui/web-components!SwitchLabelPosition:var"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            },
+            {
+              "kind": "Content",
+              "text": ";"
+            }
+          ],
+          "releaseTag": "Public",
+          "name": "SwitchLabelPosition",
+          "typeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 5
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!SwitchLabelPosition:var",
+          "docComment": "/**\n * SwitchLabelPosition Constants\n *\n * @public\n */\n",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "SwitchLabelPosition: "
+            },
+            {
+              "kind": "Content",
+              "text": "{\n    readonly above: \"above\";\n    readonly after: \"after\";\n    readonly before: \"before\";\n}"
+            }
+          ],
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "SwitchLabelPosition",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 2
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!switchStyles:var",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "styles: "
+            },
+            {
+              "kind": "Content",
+              "text": "import(\"@microsoft/fast-element\")."
+            },
+            {
+              "kind": "Reference",
+              "text": "ElementStyles",
+              "canonicalReference": "@microsoft/fast-element!ElementStyles:class"
+            }
+          ],
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "switchStyles",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 3
+          }
+        },
+        {
+          "kind": "Variable",
+          "canonicalReference": "@fluentui/web-components!switchTemplate:var",
+          "docComment": "",
+          "excerptTokens": [
+            {
+              "kind": "Content",
+              "text": "template: "
+            },
+            {
+              "kind": "Reference",
+              "text": "ElementViewTemplate",
+              "canonicalReference": "@microsoft/fast-element!ElementViewTemplate:interface"
+            },
+            {
+              "kind": "Content",
+              "text": "<"
+            },
+            {
+              "kind": "Reference",
+              "text": "Switch",
+              "canonicalReference": "@fluentui/web-components!Switch:class"
+            },
+            {
+              "kind": "Content",
+              "text": ">"
+            }
+          ],
+          "isReadonly": true,
+          "releaseTag": "Public",
+          "name": "switchTemplate",
+          "variableTypeTokenRange": {
+            "startIndex": 1,
+            "endIndex": 5
+          }
+        },
         {
           "kind": "Class",
           "canonicalReference": "@fluentui/web-components!Text_2:class",

package/dist/web-components.d.ts

@@ -7,6 +7,7 @@ import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
 import { FASTProgress } from '@microsoft/fast-foundation';
 import { FASTProgressRing } from '@microsoft/fast-foundation';
+import { FASTSwitch } from '@microsoft/fast-foundation';
 import { StartEnd } from '@microsoft/fast-foundation';
 import { StartEndOptions } from '@microsoft/fast-foundation';
 import { StaticallyComposableHTML } from '@microsoft/fast-foundation';
@@ -1063,6 +1064,15 @@ export declare const curveEasyEaseMax: CSSDesignToken<string>;
 
 export declare const curveLinear: CSSDesignToken<string>;
 
+/**
+ * The Fluent Switch Element.
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-switch\>
+ */
+export declare const definition: FASTElementDefinition<typeof Switch>;
+
 export declare const durationFast: CSSDesignToken<string>;
 
 export declare const durationFaster: CSSDesignToken<string>;
@@ -1380,6 +1390,38 @@ export declare const strokeWidthThickest: CSSDesignToken<string>;
 
 export declare const strokeWidthThin: CSSDesignToken<string>;
 
+export declare class Switch extends FASTSwitch {
+    /**
+     * The label position of the switch
+     *
+     * @public
+     * @default 'after'
+     * @remarks
+     * HTML Attribute: labelposition
+     */
+    labelPosition: SwitchLabelPosition | undefined;
+}
+
+/**
+ * SwitchLabelPosition Constants
+ * @public
+ */
+export declare const SwitchLabelPosition: {
+    readonly above: "above";
+    readonly after: "after";
+    readonly before: "before";
+};
+
+/**
+ * Applies label position
+ * @public
+ */
+export declare type SwitchLabelPosition = ValuesOf<typeof SwitchLabelPosition>;
+
+export declare const switchStyles: ElementStyles;
+
+export declare const switchTemplate: ElementViewTemplate<Switch>;
+
 /**
  * The base class used for constructing a fluent-text custom element
  * @public