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

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

@@ -0,0 +1,69 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+import { BadgeOptions } from '../badge/badge.options.js';
+/**
+ * CounterBadge options
+ * @public
+ */
+export declare type CounterBadgeOptions = BadgeOptions;
+/**
+ * CounterBadgeAppearance constants
+ * @public
+ */
+export declare const CounterBadgeAppearance: {
+    readonly filled: "filled";
+    readonly ghost: "ghost";
+};
+/**
+ * A CounterBadge can have an appearance of filled or ghost
+ * @public
+ */
+export declare type CounterBadgeAppearance = ValuesOf<typeof CounterBadgeAppearance>;
+/**
+ * CounterBadgeColor constants
+ * @public
+ */
+export declare const CounterBadgeColor: {
+    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 CounterBadge can be one of preset colors
+ * @public
+ */
+export declare type CounterBadgeColor = ValuesOf<typeof CounterBadgeColor>;
+/**
+ * A CounterBadge shape can be circular or rounded.
+ * @public
+ */
+export declare const CounterBadgeShape: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+};
+/**
+ * A CounterBadge can be one of preset colors
+ * @public
+ */
+export declare type CounterBadgeShape = ValuesOf<typeof CounterBadgeShape>;
+/**
+ * A CounterBadge can be square, circular or rounded.
+ * @public
+ */
+export declare const CounterBadgeSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+};
+/**
+ * A CounterBadge can be on of several preset sizes.
+ * @public
+ */
+export declare type CounterBadgeSize = ValuesOf<typeof CounterBadgeSize>;

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

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

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

@@ -0,0 +1,7 @@
+import { ElementViewTemplate } from '@microsoft/fast-element';
+import { CounterBadge } from './counter-badge.js';
+/**
+ * The template for the Counter Badge component.
+ * @public
+ */
+export declare const template: ElementViewTemplate<CounterBadge>;

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

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

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

@@ -0,0 +1,5 @@
+export * from './counter-badge.js';
+export * from './counter-badge.options.js';
+export { template as CounterBadgeTemplate } from './counter-badge.template.js';
+export { styles as CounterBadgeStyles } from './counter-badge.styles.js';
+export { definition as CounterBadgeDefinition } from './counter-badge.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/fluent-design-system.d.ts

@@ -0,0 +1,5 @@
+export declare const FluentDesignSystem: Readonly<{
+    prefix: "fluent";
+    shadowRootMode: "open";
+    registry: CustomElementRegistry;
+}>;

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-rollup.d.ts

@@ -1 +1 @@
-export * from './index';
+export * from './index.js';

package/dist/dts/index.d.ts

@@ -1 +1,12 @@
-export declare const empty = "";
+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/progress-bar/define.d.ts

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

package/dist/dts/progress-bar/index.d.ts

@@ -0,0 +1,5 @@
+export * from './progress-bar.js';
+export * from './progress-bar.options.js';
+export { definition as ProgressBarDefinition } from './progress-bar.definition.js';
+export { styles as ProgressBarStyles } from './progress-bar.styles.js';
+export { template as ProgressBarTemplate } from './progress-bar.template.js';

package/dist/dts/progress-bar/progress-bar.d.ts

@@ -0,0 +1,30 @@
+import { FASTProgress } from '@microsoft/fast-foundation';
+import type { ProgressBarShape, ProgressBarThickness, ProgressBarValidationState } from './progress-bar.options.js';
+/**
+ * The base class used for constructing a fluent-progress-bar custom element
+ * @public
+ */
+export declare class ProgressBar extends FASTProgress {
+    /**
+     * The thickness of the progress bar
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: thickness
+     */
+    thickness?: ProgressBarThickness;
+    /**
+     * The shape of the progress bar
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape?: ProgressBarShape;
+    /**
+     * The validation state of the progress bar
+     * @public
+     * @remarks
+     * HTML Attribute: validation-state
+     */
+    validationState: ProgressBarValidationState | null;
+}

package/dist/dts/progress-bar/progress-bar.definition.d.ts

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

package/dist/dts/progress-bar/progress-bar.options.d.ts

@@ -0,0 +1,41 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * ProgressBarThickness Constants
+ * @public
+ */
+export declare const ProgressBarThickness: {
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * Applies bar thickness to the content
+ * @public
+ */
+export declare type ProgressBarThickness = ValuesOf<typeof ProgressBarThickness>;
+/**
+ * ProgressBarShape Constants
+ * @public
+ */
+export declare const ProgressBarShape: {
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+/**
+ * Applies bar shape to the content
+ * @public
+ */
+export declare type ProgressBarShape = ValuesOf<typeof ProgressBarShape>;
+/**
+ * ProgressBarValidationState Constants
+ * @public
+ */
+export declare const ProgressBarValidationState: {
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+};
+/**
+ * Applies validation state to the content
+ * @public
+ */
+export declare type ProgressBarValidationState = ValuesOf<typeof ProgressBarValidationState>;

package/dist/dts/progress-bar/progress-bar.styles.d.ts

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

package/dist/dts/progress-bar/progress-bar.template.d.ts

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

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

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

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

@@ -0,0 +1,5 @@
+export * from './spinner.js';
+export * from './spinner.options.js';
+export { template as SpinnerTemplate } from './spinner.template.js';
+export { styles as SpinnerStyles } from './spinner.styles.js';
+export { definition as SpinnerDefinition } from './spinner.definition.js';

package/dist/dts/spinner/spinner.d.ts

@@ -0,0 +1,25 @@
+import { FASTProgressRing } from '@microsoft/fast-foundation';
+import type { SpinnerAppearance, SpinnerSize } from './spinner.options.js';
+/**
+ * The base class used for constructing a fluent-spinner custom element
+ * @public
+ */
+export declare class Spinner extends FASTProgressRing {
+    /**
+     * The size of the spinner
+     *
+     * @public
+     * @default 'medium'
+     * @remarks
+     * HTML Attribute: size
+     */
+    size?: SpinnerSize;
+    /**
+     * The appearance of the spinner
+     * @public
+     * @default 'primary'
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance?: SpinnerAppearance;
+}

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

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

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

@@ -0,0 +1,32 @@
+import { ValuesOf } from '@microsoft/fast-foundation';
+/**
+ * SpinnerAppearance constants
+ * @public
+ */
+export declare const SpinnerAppearance: {
+    readonly primary: "primary";
+    readonly inverted: "inverted";
+};
+/**
+ * A Spinner's appearance can be either primary or inverted
+ * @public
+ */
+export declare type SpinnerAppearance = ValuesOf<typeof SpinnerAppearance>;
+/**
+ * SpinnerSize constants
+ * @public
+ */
+export declare const SpinnerSize: {
+    readonly tiny: "tiny";
+    readonly extraSmall: "extra-small";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly extraLarge: "extra-large";
+    readonly huge: "huge";
+};
+/**
+ * A Spinner's size can be either small, tiny, extra-small, medium, large, extra-large, or huge
+ * @public
+ */
+export declare type SpinnerSize = ValuesOf<typeof SpinnerSize>;

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

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

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

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

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

@@ -0,0 +1 @@
+export * from './partials/index.js';

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

@@ -0,0 +1,28 @@
+export declare const badgeBaseStyles: import("@microsoft/fast-element").CSSDirective;
+/**
+ * @public
+ * The badge's size styles
+ */
+export declare const badgeSizeStyles: import("@microsoft/fast-element").CSSDirective;
+/**
+ * The badge's `filled` appearance styles
+ * Filled appearance is default so do not
+ * Include that attribute as it's not present by default
+ * @public
+ */
+export declare const badgeFilledStyles: import("@microsoft/fast-element").CSSDirective;
+/**
+ * The badge's `ghost` appearance styles
+ * @public
+ */
+export declare const badgeGhostStyles: import("@microsoft/fast-element").CSSDirective;
+/**
+ * The badge's `outline` appearance styles
+ * @public
+ */
+export declare const badgeOutlineStyles: import("@microsoft/fast-element").CSSDirective;
+/**
+ * The badge's `tint` appearance styles
+ * @public
+ */
+export declare const badgeTintStyles: import("@microsoft/fast-element").CSSDirective;

package/dist/dts/styles/partials/index.d.ts

@@ -0,0 +1 @@
+export * from './badge.partials.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/dts/text/define.d.ts

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

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

@@ -0,0 +1,5 @@
+export * from './text.js';
+export * from './text.options.js';
+export { template as TextTemplate } from './text.template.js';
+export { styles as TextStyles } from './text.styles.js';
+export { definition as TextDefinition } from './text.definition.js';