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

package/dist/esm/divider/divider.styles.js

@@ -0,0 +1,111 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { colorBrandForeground1, colorBrandStroke1, colorNeutralForeground1, colorNeutralForeground2, colorNeutralForeground3, colorNeutralStroke1, colorNeutralStroke2, colorNeutralStroke3, fontFamilyBase, fontSizeBase200, fontWeightRegular, strokeWidthThin, } from '../theme/design-tokens.js';
+/** Divider styles
+ * @public
+ */
+export const styles = css `
+  ${display('flex')}
+
+  :host::after,
+  :host::before {
+    align-self: center;
+    background: ${colorNeutralStroke2};
+    box-sizing: border-box;
+    content: '';
+    display: flex;
+    flex-grow: 1;
+    height: ${strokeWidthThin};
+  }
+
+  :host([inset]) {
+    padding: 0 12px;
+  }
+
+  :host ::slotted(*) {
+    color: ${colorNeutralForeground2};
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    font-weight: ${fontWeightRegular};
+    margin: 0;
+    padding: 0 12px;
+  }
+
+  :host([align-content='start'])::before,
+  :host([align-content='end'])::after {
+    flex-basis: 12px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  :host([orientation='vertical']) {
+    height: 100%;
+    min-height: 84px;
+  }
+  :host([orientation='vertical']):empty {
+    min-height: 20px;
+  }
+
+  :host([orientation='vertical']) {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  :host([orientation='vertical'][inset])::before {
+    margin-top: 12px;
+  }
+  :host([orientation='vertical'][inset])::after {
+    margin-bottom: 12px;
+  }
+
+  :host([orientation='vertical']):empty::before,
+  :host([orientation='vertical']):empty::after {
+    height: 10px;
+    min-height: 10px;
+    flex-grow: 0;
+  }
+
+  :host([orientation='vertical'])::before,
+  :host([orientation='vertical'])::after {
+    width: ${strokeWidthThin};
+    min-height: 20px;
+    height: 100%;
+  }
+
+  :host([orientation='vertical']) ::slotted(*) {
+    display: flex;
+    flex-direction: column;
+    padding: 12px 0;
+    line-height: 20px;
+  }
+
+  :host([orientation='vertical'][align-content='start'])::before {
+    min-height: 8px;
+  }
+  :host([orientation='vertical'][align-content='end'])::after {
+    min-height: 8px;
+  }
+
+  :host([appearance='strong'])::before,
+  :host([appearance='strong'])::after {
+    background: ${colorNeutralStroke1};
+  }
+  :host([appearance='strong']) ::slotted(*) {
+    color: ${colorNeutralForeground1};
+  }
+  :host([appearance='brand'])::before,
+  :host([appearance='brand'])::after {
+    background: ${colorBrandStroke1};
+  }
+  :host([appearance='brand']) ::slotted(*) {
+    color: ${colorBrandForeground1};
+  }
+  :host([appearance='subtle'])::before,
+  :host([appearance='subtle'])::after {
+    background: ${colorNeutralStroke3};
+  }
+  :host([appearance='subtle']) ::slotted(*) {
+    color: ${colorNeutralForeground3};
+  }
+`;
+//# sourceMappingURL=divider.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../src/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;kBAKD,mBAAmB;;;;;cAKvB,eAAe;;;;;;;;aAQhB,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAyCvB,eAAe;;;;;;;;;;;;;;;;;;;;;kBAqBV,mBAAmB;;;aAGxB,uBAAuB;;;;kBAIlB,iBAAiB;;;aAGtB,qBAAqB;;;;kBAIhB,mBAAmB;;;aAGxB,uBAAuB;;CAEnC,CAAC"}

package/dist/esm/divider/divider.template.js

@@ -0,0 +1,7 @@
+import { dividerTemplate } from '@microsoft/fast-foundation';
+/**
+ * Template for the Divider component
+ * @public
+ */
+export const template = dividerTemplate();
+//# sourceMappingURL=divider.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"divider.template.js","sourceRoot":"","sources":["../../../src/divider/divider.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG7D;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAiC,eAAe,EAAE,CAAC"}

package/dist/esm/divider/index.js

@@ -0,0 +1,6 @@
+export * from './divider.js';
+export * from './divider.options.js';
+export { definition as DividerDefinition } from './divider.definition.js';
+export { template as DividerTemplate } from './divider.template.js';
+export { styles as DividerStyles } from './divider.styles.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,MAAM,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/image/define.js

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

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

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

package/dist/esm/image/image.definition.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.definition.js","sourceRoot":"","sources":["../../../src/image/image.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/image/image.js

@@ -0,0 +1,24 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement } from '@microsoft/fast-element';
+/**
+ * The base class used for constucting a fluent image custom element
+ * @public
+ */
+export class Image extends FASTElement {
+}
+__decorate([
+    attr({ mode: 'boolean' })
+], Image.prototype, "block", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Image.prototype, "bordered", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Image.prototype, "shadow", void 0);
+__decorate([
+    attr
+], Image.prototype, "fit", void 0);
+__decorate([
+    attr
+], Image.prototype, "shape", void 0);
+//# sourceMappingURL=image.js.map

package/dist/esm/image/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/image/image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;CA8CrC;AArCC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACH;AASvB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACA;AAS1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACF;AASxB;IADC,IAAI;kCACiB;AAStB;IADC,IAAI;oCACqB"}

package/dist/esm/image/image.options.js

@@ -0,0 +1,21 @@
+/**
+ * Image fit
+ * @public
+ */
+export const ImageFit = {
+    none: 'none',
+    center: 'center',
+    contain: 'contain',
+    cover: 'cover',
+    default: 'default',
+};
+/**
+ * Image shape
+ * @public
+ */
+export const ImageShape = {
+    circular: 'circular',
+    rounded: 'rounded',
+    square: 'square',
+};
+//# sourceMappingURL=image.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.options.js","sourceRoot":"","sources":["../../../src/image/image.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,SAAS;CACV,CAAC;AAOX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC"}

package/dist/esm/image/image.styles.js

@@ -0,0 +1,52 @@
+import { css } from '@microsoft/fast-element';
+import { borderRadiusCircular, colorNeutralStroke2, shadow4, strokeWidthThin } from '../theme/design-tokens.js';
+/** Image styles
+ *
+ * @public
+ */
+export const styles = css `
+  :host ::slotted(img) {
+    box-sizing: border-box;
+    min-height: 8px;
+    min-width: 8px;
+    display: inline-block;
+  }
+  :host([block]) ::slotted(img) {
+    width: 100%;
+    height: auto;
+  }
+  :host([bordered]) ::slotted(img) {
+    border: ${strokeWidthThin} solid ${colorNeutralStroke2};
+  }
+  :host([fit='none']) ::slotted(img) {
+    object-fit: none;
+    object-position: top left;
+    height: 100%;
+    width: 100%;
+  }
+  :host([fit='center']) ::slotted(img) {
+    object-fit: none;
+    object-position: center;
+    height: 100%;
+    width: 100%;
+  }
+  :host([fit='contain']) ::slotted(img) {
+    object-fit: contain;
+    object-position: center;
+    height: 100%;
+    width: 100%;
+  }
+  :host([fit='cover']) ::slotted(img) {
+    object-fit: cover;
+    object-position: center;
+    height: 100%;
+    width: 100%;
+  }
+  :host([shadow]) ::slotted(img) {
+    box-shadow: ${shadow4};
+  }
+  :host([shape='circular']) ::slotted(img) {
+    border-radius: ${borderRadiusCircular};
+  }
+`;
+//# sourceMappingURL=image.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../src/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEhH;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;cAYX,eAAe,UAAU,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2BxC,OAAO;;;qBAGJ,oBAAoB;;CAExC,CAAC"}

package/dist/esm/image/image.template.js

@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Template for the Image component
+ * @public
+ */
+export const template = html `<slot></slot>`;
+//# sourceMappingURL=image.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.template.js","sourceRoot":"","sources":["../../../src/image/image.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA+B,IAAI,CAAO,eAAe,CAAC"}

package/dist/esm/image/index.js

@@ -0,0 +1,6 @@
+export * from './image.js';
+export * from './image.options.js';
+export { definition as ImageDefinition } from './image.definition.js';
+export { template as ImageTemplate } from './image.template.js';
+export { styles as ImageStyles } from './image.styles.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/image/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/esm/index.js

@@ -1,9 +1,13 @@
 export * from './accordion/index.js';
 export * from './accordion-item/index.js';
+export * from './avatar/index.js';
 export * from './badge/index.js';
 export * from './counter-badge/index.js';
+export * from './divider/index.js';
+export * from './image/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,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,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/esm/utils/get-initials.js

@@ -0,0 +1,83 @@
+/* TODO: This file is a direct copy of the React Avatar utils */
+/**
+ * Regular expressions matching characters to ignore when calculating the initials.
+ */
+/**
+ * Regular expression matching characters within various types of enclosures, including the enclosures themselves
+ *  so for example, (xyz) [xyz] {xyz} all would be ignored
+ */
+const UNWANTED_ENCLOSURES_REGEX = /[\(\[\{][^\)\]\}]*[\)\]\}]/g;
+/**
+ * Regular expression matching special ASCII characters except space, plus some unicode special characters.
+ * Applies after unwanted enclosures have been removed
+ */
+// eslint-disable-next-line no-control-regex
+const UNWANTED_CHARS_REGEX = /[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
+/**
+ * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
+ * and number has been trimmed for whitespaces
+ */
+const PHONENUMBER_REGEX = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
+/** Regular expression matching one or more spaces. */
+const MULTIPLE_WHITESPACES_REGEX = /\s+/g;
+/**
+ * Regular expression matching languages for which we currently don't support initials.
+ * Arabic:   Arabic, Arabic Supplement, Arabic Extended-A.
+ * Korean:   Hangul Jamo, Hangul Compatibility Jamo, Hangul Jamo Extended-A, Hangul Syllables, Hangul Jamo Extended-B.
+ * Japanese: Hiragana, Katakana.
+ * CJK:      CJK Unified Ideographs Extension A, CJK Unified Ideographs, CJK Compatibility Ideographs,
+ *             CJK Unified Ideographs Extension B
+ */
+// eslint-disable-next-line
+const UNSUPPORTED_TEXT_REGEX = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\u1100-\u11FF\u3130-\u318F\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\u3040-\u309F\u30A0-\u30FF\u3400-\u4DBF\u4E00-\u9FFF\uF900-\uFAFF]|[\uD840-\uD869][\uDC00-\uDED6]/;
+function getInitialsLatin(displayName, isRtl, firstInitialOnly) {
+    let initials = '';
+    const splits = displayName.split(' ');
+    if (splits.length !== 0) {
+        initials += splits[0].charAt(0).toUpperCase();
+    }
+    if (!firstInitialOnly) {
+        if (splits.length === 2) {
+            initials += splits[1].charAt(0).toUpperCase();
+        }
+        else if (splits.length === 3) {
+            initials += splits[2].charAt(0).toUpperCase();
+        }
+    }
+    if (isRtl && initials.length > 1) {
+        return initials.charAt(1) + initials.charAt(0);
+    }
+    return initials;
+}
+function cleanupDisplayName(displayName) {
+    displayName = displayName.replace(UNWANTED_ENCLOSURES_REGEX, '');
+    displayName = displayName.replace(UNWANTED_CHARS_REGEX, '');
+    displayName = displayName.replace(MULTIPLE_WHITESPACES_REGEX, ' ');
+    displayName = displayName.trim();
+    return displayName;
+}
+/**
+ * Get (up to 2 characters) initials based on display name of the persona.
+ *
+ * @param displayName - The full name of the person or entity
+ * @param isRtl - Whether the display is in RTL
+ * @param options - Extra options to control the behavior of getInitials
+ *
+ * @returns The 1 or 2 character initials based on the name. Or an empty string if no initials
+ * could be derived from the name.
+ *
+ * @internal
+ */
+export function getInitials(displayName, isRtl, options) {
+    if (!displayName) {
+        return '';
+    }
+    displayName = cleanupDisplayName(displayName);
+    // For names containing CJK characters, and phone numbers, we don't display initials
+    if (UNSUPPORTED_TEXT_REGEX.test(displayName) ||
+        (!(options === null || options === void 0 ? void 0 : options.allowPhoneInitials) && PHONENUMBER_REGEX.test(displayName))) {
+        return '';
+    }
+    return getInitialsLatin(displayName, isRtl, options === null || options === void 0 ? void 0 : options.firstInitialOnly);
+}
+//# sourceMappingURL=get-initials.js.map

package/dist/esm/utils/get-initials.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-initials.js","sourceRoot":"","sources":["../../../src/utils/get-initials.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAEhE;;GAEG;AAEH;;;GAGG;AACH,MAAM,yBAAyB,GAAW,6BAA6B,CAAC;AAExE;;;GAGG;AACH,4CAA4C;AAC5C,MAAM,oBAAoB,GAAW,4DAA4D,CAAC;AAElG;;;GAGG;AACH,MAAM,iBAAiB,GAAW,+BAA+B,CAAC;AAElE,sDAAsD;AACtD,MAAM,0BAA0B,GAAW,MAAM,CAAC;AAElD;;;;;;;GAOG;AACH,2BAA2B;AAC3B,MAAM,sBAAsB,GAAW,4MAA4M,CAAC;AAEpP,SAAS,gBAAgB,CAAC,WAAmB,EAAE,KAAc,EAAE,gBAA0B;IACvF,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,MAAM,MAAM,GAAa,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAChD,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;QACvB,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;KAC/C;IAED,IAAI,CAAC,gBAAgB,EAAE;QACrB,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YACvB,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;SAC/C;aAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YAC9B,QAAQ,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;SAC/C;KACF;IAED,IAAI,KAAK,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;QAChC,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;KAChD;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,SAAS,kBAAkB,CAAC,WAAmB;IAC7C,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC,CAAC;IACjE,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;IAC5D,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,0BAA0B,EAAE,GAAG,CAAC,CAAC;IACnE,WAAW,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC;IAEjC,OAAO,WAAW,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,WAAW,CACzB,WAAsC,EACtC,KAAc,EACd,OAMC;IAED,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,EAAE,CAAC;KACX;IAED,WAAW,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAE9C,oFAAoF;IACpF,IACE,sBAAsB,CAAC,IAAI,CAAC,WAAW,CAAC;QACxC,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,kBAAkB,CAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EACrE;QACA,OAAO,EAAE,CAAC;KACX;IAED,OAAO,gBAAgB,CAAC,WAAW,EAAE,KAAK,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,gBAAgB,CAAC,CAAC;AACzE,CAAC"}