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

package/CHANGELOG.json

@@ -2,7 +2,49 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Wed, 22 Feb 2023 04:22:33 GMT",
+      "date": "Mon, 27 Feb 2023 04:26:56 GMT",
+      "tag": "@fluentui/web-components_v3.0.0-alpha.7",
+      "version": "3.0.0-alpha.7",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "4309a0d5afbe56dab0b1204922a37873fe832c8b",
+            "comment": "feat(avatar): add Avatar web component"
+          },
+          {
+            "author": "harankin@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "7d9573d73b4be010c2b07540fa0c23c27aba2821",
+            "comment": "feat(divider): Add divider web component"
+          },
+          {
+            "author": "harankin@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "e793ad8a7f7ae0239a808439d121cf012dd414e5",
+            "comment": "feat(image): Add image web component"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 24 Feb 2023 04:20:32 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,32 @@
 # 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 Mon, 27 Feb 2023 04:26:56 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [3.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v3.0.0-alpha.7)
+
+Mon, 27 Feb 2023 04:26:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v3.0.0-alpha.6..@fluentui/web-components_v3.0.0-alpha.7)
+
+### Changes
+
+- feat(avatar): add Avatar web component ([PR #26729](https://github.com/microsoft/fluentui/pull/26729) by chhol@microsoft.com)
+- feat(divider): Add divider web component ([PR #26901](https://github.com/microsoft/fluentui/pull/26901) by harankin@microsoft.com)
+- feat(image): Add image web component ([PR #26936](https://github.com/microsoft/fluentui/pull/26936) by harankin@microsoft.com)
+
+## [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:32 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/avatar/avatar.d.ts

@@ -0,0 +1,97 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { AvatarActive, AvatarAppearance, AvatarColor, AvatarNamedColor, AvatarShape, AvatarSize } from './avatar.options.js';
+/**
+ * The base class used for constructing a fluent-avatar custom element
+ * @public
+ */
+export declare class Avatar extends FASTElement {
+    /**
+     * The name of the person or entity represented by this Avatar. This should always be provided if it is available.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
+    name?: string | undefined;
+    /**
+     * Provide custom initials rather than one generated via the name
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: name
+     */
+    initials?: string | undefined;
+    /**
+     * Size of the avatar in pixels.
+     *
+     * Size is restricted to a limited set of supported values recommended for most uses (see `AvatarSizeValue`) and
+     * based on design guidelines for the Avatar control.
+     *
+     * If a non-supported size is neeeded, set `size` to the next-smaller supported size, and set `width` and `height`
+     * to override the rendered size.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     *
+     */
+    size?: AvatarSize | undefined;
+    /**
+     * The avatar can have a circular or square shape.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: AvatarShape | undefined;
+    /**
+     * Optional activity indicator
+     * * active: the avatar will be decorated according to activeAppearance
+     * * inactive: the avatar will be reduced in size and partially transparent
+     * * undefined: normal display
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: active
+     */
+    active?: AvatarActive | undefined;
+    /**
+     * The appearance when `active="active"`
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: AvatarAppearance | undefined;
+    /**
+     * The color when displaying either an icon or initials.
+     * * neutral (default): gray
+     * * brand: color from the brand palette
+     * * colorful: picks a color from a set of pre-defined colors, based on a hash of the name (or colorId if provided)
+     * * [AvatarNamedColor]: a specific color from the theme
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    color?: AvatarColor;
+    /**
+     * Specify a string to be used instead of the name, to determine which color to use when color="colorful".
+     * Use this when a name is not available, but there is another unique identifier that can be used instead.
+     */
+    colorId?: AvatarNamedColor | undefined;
+    /**
+     * Sets the data-color attribute used for the visual presentation
+     * @internal
+     */
+    generateColor(): AvatarColor | void;
+    /**
+     * Generates and sets the initials for the template
+     * @internal
+     */
+    generateInitials(): string | void;
+    /**
+     * An array of the available Avatar named colors
+     */
+    static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
+}

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

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

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

@@ -0,0 +1,142 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * The Avatar "active" state
+ */
+export declare const AvatarActive: {
+    readonly active: "active";
+    readonly inactive: "inactive";
+};
+/**
+ * The types of Avatar active state
+ */
+export declare type AvatarActive = ValuesOf<typeof AvatarActive>;
+/**
+ * The Avatar Shape
+ */
+export declare const AvatarShape: {
+    readonly circular: "circular";
+    readonly square: "square";
+};
+/**
+ * The types of Avatar Shape
+ */
+export declare type AvatarShape = ValuesOf<typeof AvatarShape>;
+/**
+ * The Avatar Appearance when "active"
+ */
+export declare const AvatarAppearance: {
+    readonly ring: "ring";
+    readonly shadow: "shadow";
+    readonly ringShadow: "ring-shadow";
+};
+/**
+ * The appearance when "active"
+ */
+export declare type AvatarAppearance = ValuesOf<typeof AvatarAppearance>;
+/**
+ * A specific named color for the Avatar
+ */
+export declare const AvatarNamedColor: {
+    readonly darkRed: "dark-red";
+    readonly cranberry: "cranberry";
+    readonly red: "red";
+    readonly pumpkin: "pumpkin";
+    readonly peach: "peach";
+    readonly marigold: "marigold";
+    readonly gold: "gold";
+    readonly brass: "brass";
+    readonly brown: "brown";
+    readonly forest: "forest";
+    readonly seafoam: "seafoam";
+    readonly darkGreen: "dark-green";
+    readonly lightTeal: "light-teal";
+    readonly teal: "teal";
+    readonly steel: "steel";
+    readonly blue: "blue";
+    readonly royalBlue: "royal-blue";
+    readonly cornflower: "cornflower";
+    readonly navy: "navy";
+    readonly lavender: "lavender";
+    readonly purple: "purple";
+    readonly grape: "grape";
+    readonly lilac: "lilac";
+    readonly pink: "pink";
+    readonly magenta: "magenta";
+    readonly plum: "plum";
+    readonly beige: "beige";
+    readonly mink: "mink";
+    readonly platinum: "platinum";
+    readonly anchor: "anchor";
+};
+/**
+ * An avatar can be one of named colors
+ * @public
+ */
+export declare type AvatarNamedColor = ValuesOf<typeof AvatarNamedColor>;
+/**
+ * Supported Avatar colors
+ */
+export declare const AvatarColor: {
+    readonly darkRed: "dark-red";
+    readonly cranberry: "cranberry";
+    readonly red: "red";
+    readonly pumpkin: "pumpkin";
+    readonly peach: "peach";
+    readonly marigold: "marigold";
+    readonly gold: "gold";
+    readonly brass: "brass";
+    readonly brown: "brown";
+    readonly forest: "forest";
+    readonly seafoam: "seafoam";
+    readonly darkGreen: "dark-green";
+    readonly lightTeal: "light-teal";
+    readonly teal: "teal";
+    readonly steel: "steel";
+    readonly blue: "blue";
+    readonly royalBlue: "royal-blue";
+    readonly cornflower: "cornflower";
+    readonly navy: "navy";
+    readonly lavender: "lavender";
+    readonly purple: "purple";
+    readonly grape: "grape";
+    readonly lilac: "lilac";
+    readonly pink: "pink";
+    readonly magenta: "magenta";
+    readonly plum: "plum";
+    readonly beige: "beige";
+    readonly mink: "mink";
+    readonly platinum: "platinum";
+    readonly anchor: "anchor";
+    readonly neutral: "neutral";
+    readonly brand: "brand";
+    readonly colorful: "colorful";
+};
+/**
+ * The Avatar Color
+ */
+export declare type AvatarColor = ValuesOf<typeof AvatarColor>;
+/**
+ * The Avatar Sizes
+ * @public
+ */
+export declare const AvatarSize: {
+    readonly _16: 16;
+    readonly _20: 20;
+    readonly _24: 24;
+    readonly _28: 28;
+    readonly _32: 32;
+    readonly _36: 36;
+    readonly _40: 40;
+    readonly _48: 48;
+    readonly _56: 56;
+    readonly _64: 64;
+    readonly _72: 72;
+    readonly _96: 96;
+    readonly _120: 120;
+    readonly _128: 128;
+};
+/**
+ * A Avatar can be on of several preset sizes.
+ * @public
+ */
+export declare type AvatarSize = ValuesOf<typeof AvatarSize>;

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

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

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

@@ -0,0 +1,8 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Avatar } from './avatar.js';
+/**
+ * The template for the Avatar component.
+ * @public
+ */
+export declare function avatarTemplate<T extends Avatar>(): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<Avatar>;

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

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

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

@@ -0,0 +1,5 @@
+export * from './avatar.js';
+export * from './avatar.options.js';
+export { template as AvatarTemplate } from './avatar.template.js';
+export { styles as AvatarStyles } from './avatar.styles.js';
+export { definition as AvatarDefinition } from './avatar.definition.js';

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

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

package/dist/dts/divider/divider.d.ts

@@ -0,0 +1,31 @@
+import { FASTDivider } from '@microsoft/fast-foundation';
+import { DividerAlignContent, DividerAppearance } from './divider.options.js';
+/**
+ * @class Divider component
+ *
+ * @remarks
+ * This class extends the FASTDivider. A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
+ */
+export declare class Divider extends FASTDivider {
+    /**
+     * @property alignContent
+     * @default center
+     * @remarks
+     * Determines the alignment of the content within the divider. Select from start or end. When not specified, the content will be aligned to the center.
+     */
+    alignContent?: DividerAlignContent;
+    /**
+     * @property appearance
+     * @default default
+     * @remarks
+     * A divider can have one of the preset appearances. Select from strong, brand, subtle. When not specified, the divider has its default appearance.
+     */
+    appearance?: DividerAppearance;
+    /**
+     * @property inset
+     * @default false
+     * @remarks
+     * Adds padding to the beginning and end of the divider.
+     */
+    inset?: boolean;
+}

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

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

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

@@ -0,0 +1,40 @@
+import { DividerOrientation, DividerRole, ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * Fast Foundation DividerRole property
+ * @public
+ */
+export { DividerRole };
+/**
+ * Fast Foundation Orientation property
+ * @public
+ */
+export { DividerOrientation };
+/**
+ * Align content within divider
+ * @public
+ */
+export declare const DividerAlignContent: {
+    readonly center: "center";
+    readonly start: "start";
+    readonly end: "end";
+};
+/**
+ * The types for DividerAlignContent
+ * @public
+ */
+export declare type DividerAlignContent = ValuesOf<typeof DividerAlignContent>;
+/**
+ * DividerAppearance - divider color defined by a design token alias.
+ * @public
+ */
+export declare const DividerAppearance: {
+    readonly strong: "strong";
+    readonly brand: "brand";
+    readonly subtle: "subtle";
+    readonly default: "default";
+};
+/**
+ * The types for Appearance
+ * @public
+ */
+export declare type DividerAppearance = ValuesOf<typeof DividerAppearance>;

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

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

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

@@ -0,0 +1,7 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Divider } from './divider.js';
+/**
+ * Template for the Divider component
+ * @public
+ */
+export declare const template: ElementViewTemplate<Divider>;

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

@@ -0,0 +1,5 @@
+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';

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

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

package/dist/dts/image/image.d.ts

@@ -0,0 +1,48 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { ImageFit, ImageShape } from './image.options.js';
+/**
+ * The base class used for constucting a fluent image custom element
+ * @public
+ */
+export declare class Image extends FASTElement {
+    /**
+     * Image layout
+     *
+     * @public
+     * @remarks
+     * HTML attribute: block.
+     */
+    block?: boolean;
+    /**
+     * Image border
+     *
+     * @public
+     * @remarks
+     * HTML attribute: border.
+     */
+    bordered?: boolean;
+    /**
+     * Image shadow
+     *
+     * @public
+     * @remarks
+     * HTML attribute: shadow.
+     */
+    shadow?: boolean;
+    /**
+     * Image fit
+     *
+     * @public
+     * @remarks
+     * HTML attribute: fit.
+     */
+    fit?: ImageFit;
+    /**
+     * Image shape
+     *
+     * @public
+     * @remarks
+     * HTML attribute: shape.
+     */
+    shape?: ImageShape;
+}

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

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

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

@@ -0,0 +1,27 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * Image fit
+ * @public
+ */
+export declare const ImageFit: {
+    readonly none: "none";
+    readonly center: "center";
+    readonly contain: "contain";
+    readonly cover: "cover";
+    readonly default: "default";
+};
+/**
+ * Types for image fit
+ * @public
+ */
+export declare type ImageFit = ValuesOf<typeof ImageFit>;
+/**
+ * Image shape
+ * @public
+ */
+export declare const ImageShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+export declare type ImageShape = ValuesOf<typeof ImageShape>;

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

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

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

@@ -0,0 +1,7 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Image } from './image.js';
+/**
+ * Template for the Image component
+ * @public
+ */
+export declare const template: ElementViewTemplate<Image>;

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

@@ -0,0 +1,5 @@
+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';

package/dist/dts/index.d.ts

@@ -1,8 +1,12 @@
 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';

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>;