@fluentui/web-components 2.5.12 → 3.0.0-alpha.10

package/dist/dts/accordion/accordion.d.ts

@@ -0,0 +1,7 @@
+import { FASTAccordion } from '@microsoft/fast-foundation';
+/**
+ * The base class used for constructing a fluent-accordion custom element
+ * @public
+ */
+export declare class Accordion extends FASTAccordion {
+}

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

@@ -0,0 +1,11 @@
+import { Accordion } from './accordion.js';
+/**
+ * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion },
+ * {@link @microsoft/fast-foundation#accordionTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Accordion>;

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

@@ -1,3 +1 @@
-import { ElementStyles } from '@microsoft/fast-element';
-import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const accordionStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

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

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

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

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

@@ -1,22 +1,4 @@
-import { Accordion } from '@microsoft/fast-foundation';
-export * from './accordion-item/index';
-/**
- * The Fluent Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion},
- * {@link @microsoft/fast-foundation#accordionTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-accordion\>
- */
-export declare const fluentAccordion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Accordion>;
-/**
- * Styles for Accordion
- * @public
- */
-export declare const accordionStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles;
-/**
- * Base class for Accordion
- * @public
- */
-export { Accordion };
+export * from './accordion.js';
+export { template as accordionTemplate } from './accordion.template.js';
+export { styles as accordionStyles } from './accordion.styles.js';
+export { definition as accordionDefinition } from './accordion.definition.js';

package/dist/dts/accordion-item/accordion-item.d.ts

@@ -0,0 +1,33 @@
+import { FASTAccordionItem } from '@microsoft/fast-foundation';
+import { AccordionItemExpandIconPosition, AccordionItemSize } from './accordion-item.options.js';
+/**
+ * @internal
+ */
+export declare class AccordionItem extends FASTAccordionItem {
+    /**
+     * Defines accordion header font size.
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: AccordionItemSize;
+    /**
+     * Sets the width of the focus state.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: block
+     */
+    block: boolean;
+    /**
+     * Sets expand and collapsed icon position.
+     *
+     * @public
+     * @default 'start'
+     * @remarks
+     * HTML Attribute: expandIconPosition
+     */
+    expandIconPosition?: AccordionItemExpandIconPosition;
+}

package/dist/dts/accordion-item/accordion-item.definition.d.ts

@@ -0,0 +1,11 @@
+import { AccordionItem } from './accordion-item.js';
+/**
+ * The Fluent AccordionItem Element. Implements {@link @microsoft/fast-foundation#AccordionItem },
+ * {@link @microsoft/fast-foundation#accordionItemTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-accordion-item\>
+ */
+export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof AccordionItem>;

package/dist/dts/accordion-item/accordion-item.options.d.ts

@@ -0,0 +1,27 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * An Accordion Item header font size can be small, medium, large, and extra-large
+ */
+export declare const AccordionItemSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+/**
+ * Applies font size to accordion header
+ * @public
+ */
+export declare type AccordionItemSize = ValuesOf<typeof AccordionItemSize>;
+/**
+ * An Accordion Item expand/collapse icon can appear at the start or end of the accordion
+ */
+export declare const AccordionItemExpandIconPosition: {
+    readonly start: "start";
+    readonly end: "end";
+};
+/**
+ * Applies expand/collapse icon position
+ * @public
+ */
+export declare type AccordionItemExpandIconPosition = ValuesOf<typeof AccordionItemExpandIconPosition>;

package/dist/dts/accordion-item/accordion-item.styles.d.ts

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

package/dist/dts/accordion-item/accordion-item.template.d.ts

@@ -0,0 +1,7 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { AccordionItem } from './accordion-item.js';
+/**
+ * The template for the fluent-accordion component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<AccordionItem>;

package/dist/dts/accordion-item/index.d.ts

@@ -0,0 +1,5 @@
+export * from './accordion-item.js';
+export * from './accordion-item.options.js';
+export { styles as accordionItemStyles } from './accordion-item.styles.js';
+export { definition as accordionItemDefinition } from './accordion-item.definition.js';
+export { template as accordionItemTemplate } from './accordion-item.template.js';

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/badge/badge.d.ts

@@ -0,0 +1,49 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { StartEnd } from '@microsoft/fast-foundation';
+import { BadgeAppearance, BadgeColor, BadgeShape, BadgeSize } from './badge.options.js';
+/**
+ * The base class used for constructing a fluent-badge custom element
+ * @public
+ */
+export declare class Badge extends FASTElement {
+    /**
+     * The appearance the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: BadgeAppearance;
+    /**
+     * The color the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    color: BadgeColor;
+    /**
+     * The shape the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: BadgeShape;
+    /**
+     * The size the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: BadgeSize;
+}
+/**
+ * Mark internal because exporting class and interface of the same name
+ * confuses API extractor.
+ * TODO: Below will be unnecessary when Badge class gets updated
+ * @internal
+ */
+export interface Badge extends StartEnd {
+}

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

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

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

@@ -0,0 +1,73 @@
+import { StartEndOptions, StaticallyComposableHTML, ValuesOf } from '@microsoft/fast-foundation';
+import type { Badge } from './badge.js';
+/**
+ * @internal - marking as internal update when Badge PR for start/end is in
+ */
+export declare type BadgeOptions = StartEndOptions<Badge> & {
+    defaultContent?: StaticallyComposableHTML;
+};
+/**
+ * BadgeAppearance constants
+ * @public
+ */
+export declare const BadgeAppearance: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+    readonly outline: "outline";
+    readonly tint: "tint";
+};
+/**
+ * A Badge can be filled, outline, ghost, inverted
+ * @public
+ */
+export declare type BadgeAppearance = ValuesOf<typeof BadgeAppearance>;
+/**
+ * BadgeColor constants
+ * @public
+ */
+export declare const BadgeColor: {
+    readonly brand: "brand";
+    readonly danger: "danger";
+    readonly important: "important";
+    readonly informative: "informative";
+    readonly severe: "severe";
+    readonly subtle: "subtle";
+    readonly success: "success";
+    readonly warning: "warning";
+};
+/**
+ * A Badge can be one of preset colors
+ * @public
+ */
+export declare type BadgeColor = ValuesOf<typeof BadgeColor>;
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export declare const BadgeShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+/**
+ * A Badge can be one of preset colors
+ * @public
+ */
+export declare type BadgeShape = ValuesOf<typeof BadgeShape>;
+/**
+ * A Badge can be square, circular or rounded.
+ * @public
+ */
+export declare const BadgeSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+/**
+ * A Badge can be on of several preset sizes.
+ * @public
+ */
+export declare type BadgeSize = ValuesOf<typeof BadgeSize>;

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

@@ -1,3 +1,4 @@
-import { ElementStyles } from '@microsoft/fast-element';
-import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const badgeStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+/** Badge styles
+ * @public
+ */
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

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

@@ -0,0 +1,9 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import type { Badge } from './badge.js';
+import type { BadgeOptions } from './badge.options.js';
+/**
+ * The template for the Badge component.
+ * @public
+ */
+export declare function badgeTemplate<T extends Badge>(options?: BadgeOptions): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<Badge>;

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

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

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

@@ -1,29 +1,5 @@
-import { Badge as FoundationBadge } from '@microsoft/fast-foundation';
-/**
- * Badge appearance options.
- * @public
- */
-export declare type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string;
-/**
- * The Fluent Badge class
- * @internal
- */
-export declare class Badge extends FoundationBadge {
-    appearance: BadgeAppearance;
-    private appearanceChanged;
-}
-/**
- * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge},
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-badge\>
- */
-export declare const fluentBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Badge>;
-/**
- * Styles for Badge
- * @public
- */
-export declare const badgeStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles;
+export * from './badge.js';
+export * from './badge.options.js';
+export { template as BadgeTemplate } from './badge.template.js';
+export { styles as BadgeStyles } from './badge.styles.js';
+export { definition as BadgeDefinition } from './badge.definition.js';