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

package/docs/api-report.md

@@ -5,10 +5,13 @@
 ```ts
 
 import { CSSDesignToken } from '@microsoft/fast-foundation';
+import { DividerOrientation } from '@microsoft/fast-foundation';
+import { DividerRole } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTAccordion } from '@microsoft/fast-foundation';
 import { FASTAccordionItem } from '@microsoft/fast-foundation';
+import { FASTDivider } from '@microsoft/fast-foundation';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
 import { FASTProgress } from '@microsoft/fast-foundation';
@@ -34,9 +37,9 @@ export class AccordionItem extends FASTAccordionItem {
     // @public
     block: boolean;
     // @public
-    expandIconPosition: AccordionItemExpandIconPosition;
+    expandIconPosition?: AccordionItemExpandIconPosition;
     // @public
-    size: AccordionItemSize;
+    size?: AccordionItemSize;
 }
 
 // Warning: (ae-incompatible-release-tags) The symbol "definition" is marked as @public, but its signature references "AccordionItem" which is marked as @internal
@@ -78,14 +81,166 @@ export const accordionStyles: ElementStyles;
 // @public (undocumented)
 export const accordionTemplate: ElementViewTemplate<Accordion>;
 
+// @public
+export class Avatar extends FASTElement {
+    active?: AvatarActive | undefined;
+    appearance?: AvatarAppearance | undefined;
+    color?: AvatarColor;
+    colorId?: AvatarNamedColor | undefined;
+    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")[];
+    // @internal
+    generateColor(): AvatarColor | void;
+    // @internal
+    generateInitials(): string | void;
+    initials?: string | undefined;
+    name?: string | undefined;
+    shape?: AvatarShape | undefined;
+    size?: AvatarSize | undefined;
+}
+
+// @public
+export const AvatarActive: {
+    readonly active: "active";
+    readonly inactive: "inactive";
+};
+
+// @public
+export type AvatarActive = ValuesOf<typeof AvatarActive>;
+
+// @public
+export const AvatarAppearance: {
+    readonly ring: "ring";
+    readonly shadow: "shadow";
+    readonly ringShadow: "ring-shadow";
+};
+
+// @public
+export type AvatarAppearance = ValuesOf<typeof AvatarAppearance>;
+
+// @public
+export 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";
+};
+
+// @public
+export type AvatarColor = ValuesOf<typeof AvatarColor>;
+
+// @public
+export const AvatarDefinition: FASTElementDefinition<typeof Avatar>;
+
+// @public
+export 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";
+};
+
+// @public
+export type AvatarNamedColor = ValuesOf<typeof AvatarNamedColor>;
+
+// @public
+export const AvatarShape: {
+    readonly circular: "circular";
+    readonly square: "square";
+};
+
+// @public
+export type AvatarShape = ValuesOf<typeof AvatarShape>;
+
+// @public
+export 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;
+};
+
+// @public
+export type AvatarSize = ValuesOf<typeof AvatarSize>;
+
+// @public
+export const AvatarStyles: ElementStyles;
+
+// @public (undocumented)
+export const AvatarTemplate: ElementViewTemplate<Avatar>;
+
 // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Badge" because one of its declarations is marked as @internal
 //
 // @public
 export class Badge extends FASTElement {
     appearance: BadgeAppearance;
     color: BadgeColor;
-    shape: BadgeShape;
-    size: BadgeSize;
+    shape?: BadgeShape;
+    size?: BadgeSize;
 }
 
 // @internal
@@ -493,9 +648,15 @@ export const colorNeutralShadowKeyLighter: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorNeutralStencil1: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorNeutralStencil1Alpha: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorNeutralStencil2: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorNeutralStencil2Alpha: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorNeutralStroke1: CSSDesignToken<string>;
 
@@ -736,6 +897,9 @@ export const colorPaletteGreenForeground2: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorPaletteGreenForeground3: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorPaletteGreenForegroundInverted: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorPaletteLavenderBackground2: CSSDesignToken<string>;
 
@@ -925,6 +1089,9 @@ export const colorPaletteRedForeground2: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorPaletteRedForeground3: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorPaletteRedForegroundInverted: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorPaletteRoyalBlueBackground2: CSSDesignToken<string>;
 
@@ -988,6 +1155,9 @@ export const colorPaletteYellowForeground2: CSSDesignToken<string>;
 // @public (undocumented)
 export const colorPaletteYellowForeground3: CSSDesignToken<string>;
 
+// @public (undocumented)
+export const colorPaletteYellowForegroundInverted: CSSDesignToken<string>;
+
 // @public (undocumented)
 export const colorScrollbarOverlay: CSSDesignToken<string>;
 
@@ -1055,8 +1225,8 @@ export const colorTransparentStrokeInteractive: CSSDesignToken<string>;
 //
 // @public
 export class CounterBadge extends FASTElement {
-    appearance: CounterBadgeAppearance;
-    color: CounterBadgeColor;
+    appearance?: CounterBadgeAppearance;
+    color?: CounterBadgeColor;
     count: number;
     // (undocumented)
     protected countChanged(): void;
@@ -1066,9 +1236,9 @@ export class CounterBadge extends FASTElement {
     protected overflowCountChanged(): void;
     // @internal
     setCount(): string | void;
-    shape: CounterBadgeShape;
+    shape?: CounterBadgeShape;
     showZero: boolean;
-    size: CounterBadgeSize;
+    size?: CounterBadgeSize;
 }
 
 // @internal
@@ -1165,6 +1335,47 @@ export const curveLinear: CSSDesignToken<string>;
 // @public
 export const definition: FASTElementDefinition<typeof Switch>;
 
+// @public
+export class Divider extends FASTDivider {
+    alignContent?: DividerAlignContent;
+    appearance?: DividerAppearance;
+    inset?: boolean;
+}
+
+// @public
+export const DividerAlignContent: {
+    readonly center: "center";
+    readonly start: "start";
+    readonly end: "end";
+};
+
+// @public
+export type DividerAlignContent = ValuesOf<typeof DividerAlignContent>;
+
+// @public
+export const DividerAppearance: {
+    readonly strong: "strong";
+    readonly brand: "brand";
+    readonly subtle: "subtle";
+    readonly default: "default";
+};
+
+// @public
+export type DividerAppearance = ValuesOf<typeof DividerAppearance>;
+
+// @public
+export const DividerDefinition: FASTElementDefinition<typeof Divider>;
+
+export { DividerOrientation }
+
+export { DividerRole }
+
+// @public
+export const DividerStyles: ElementStyles;
+
+// @public
+export const DividerTemplate: ElementViewTemplate<Divider>;
+
 // @public (undocumented)
 export const durationFast: CSSDesignToken<string>;
 
@@ -1237,6 +1448,47 @@ export const fontWeightRegular: CSSDesignToken<string>;
 // @public (undocumented)
 export const fontWeightSemibold: CSSDesignToken<string>;
 
+// @public
+class Image_2 extends FASTElement {
+    block?: boolean;
+    bordered?: boolean;
+    fit?: ImageFit;
+    shadow?: boolean;
+    shape?: ImageShape;
+}
+export { Image_2 as Image }
+
+// @public
+export const ImageDefinition: FASTElementDefinition<typeof Image_2>;
+
+// @public
+export const ImageFit: {
+    readonly none: "none";
+    readonly center: "center";
+    readonly contain: "contain";
+    readonly cover: "cover";
+    readonly default: "default";
+};
+
+// @public
+export type ImageFit = ValuesOf<typeof ImageFit>;
+
+// @public
+export const ImageShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+
+// @public (undocumented)
+export type ImageShape = ValuesOf<typeof ImageShape>;
+
+// @public
+export const ImageStyles: ElementStyles;
+
+// @public
+export const ImageTemplate: ElementViewTemplate<Image_2>;
+
 // @public (undocumented)
 export const lineHeightBase100: CSSDesignToken<string>;
 
@@ -1269,8 +1521,8 @@ export const lineHeightHero900: CSSDesignToken<string>;
 
 // @public
 class ProgressBar_2 extends FASTProgress {
-    shape: ProgressBarShape;
-    thickness: ProgressBarThickness;
+    shape?: ProgressBarShape;
+    thickness?: ProgressBarThickness;
     validationState: ProgressBarValidationState | null;
 }
 export { ProgressBar_2 as ProgressBar }
@@ -1419,8 +1671,8 @@ export const spacingVerticalXXXL: CSSDesignToken<string>;
 
 // @public
 export class Spinner extends FASTProgressRing {
-    appearance: SpinnerAppearance;
-    size: SpinnerSize;
+    appearance?: SpinnerAppearance;
+    size?: SpinnerSize;
 }
 
 // @public
@@ -1490,16 +1742,16 @@ export const switchTemplate: ElementViewTemplate<Switch>;
 
 // @public
 class Text_2 extends FASTElement {
-    align: TextAlign;
+    align?: TextAlign;
     block: boolean;
-    font: TextFont;
+    font?: TextFont;
     italic: boolean;
     nowrap: boolean;
-    size: TextSize;
+    size?: TextSize;
     strikethrough: boolean;
     truncate: boolean;
     underline: boolean;
-    weight: TextWeight;
+    weight?: TextWeight;
 }
 export { Text_2 as Text }
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
   "sideEffects": false,
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-alpha.8",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -32,6 +32,10 @@
       "types": "./dist/esm/accordion-item/define.d.ts",
       "default": "./dist/esm/accordion-item/define.js"
     },
+    "./avatar": {
+      "types": "./dist/esm/avatar/define.d.ts",
+      "default": "./dist/esm/avatar/define.js"
+    },
     "./badge": {
       "types": "./dist/esm/badge/define.d.ts",
       "default": "./dist/esm/badge/define.js"
@@ -40,6 +44,14 @@
       "types": "./dist/esm/counter-badge/define.d.ts",
       "default": "./dist/esm/counter-badge/define.js"
     },
+    "./divider": {
+      "types": "./dist/esm/divider/define.d.ts",
+      "default": "./dist/esm/divider/define.js"
+    },
+    "./image": {
+      "types": "./dist/esm/image/define.d.ts",
+      "default": "./dist/esm/image/define.js"
+    },
     "./text": {
       "types": "./dist/esm/text/define.d.ts",
       "default": "./dist/esm/text/define.js"