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

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

@@ -0,0 +1,12 @@
+import type { Args, Meta } from '@storybook/html';
+import type { Badge as FluentBadge } from './badge.js';
+import './define.js';
+declare type BadgeStoryArgs = Args & FluentBadge;
+declare type BadgeStoryMeta = Meta<BadgeStoryArgs>;
+declare const _default: BadgeStoryMeta;
+export default _default;
+export declare const Badge: any;
+export declare const Appearance: (args: Args) => Element | DocumentFragment | null;
+export declare const Color: (args: Args) => Element | DocumentFragment | null;
+export declare const Shape: (args: Args) => Element | DocumentFragment | null;
+export declare const Size: BadgeStoryMeta;

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

@@ -0,0 +1,4 @@
+/** 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

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

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

@@ -0,0 +1,90 @@
+import { FASTElement } from '@microsoft/fast-element';
+import { StartEnd } from '@microsoft/fast-foundation';
+import { CounterBadgeAppearance, CounterBadgeColor, CounterBadgeShape, CounterBadgeSize } from './counter-badge.options.js';
+/**
+ * The base class used for constructing a fluent-badge custom element
+ * @public
+ */
+export declare class CounterBadge extends FASTElement {
+    /**
+     * The appearance the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: CounterBadgeAppearance;
+    /**
+     * The color the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: color
+     */
+    color: CounterBadgeColor;
+    /**
+     * The shape the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: shape
+     */
+    shape: CounterBadgeShape;
+    /**
+     * The size the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: size
+     */
+    size: CounterBadgeSize;
+    /**
+     * The count the badge should have.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: count
+     */
+    count: number;
+    protected countChanged(): void;
+    /**
+     * Max number to be displayed
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: overflow-count
+     */
+    overflowCount: number;
+    protected overflowCountChanged(): void;
+    /**
+     * If the badge should be shown when count is 0
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: show-zero
+     */
+    showZero: boolean;
+    /**
+     * If a dot should be displayed without the count
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: dot
+     */
+    dot: boolean;
+    /**
+     * @internal
+     * Function to set the count
+     * This is the default slotted content for the counter badge
+     * If children are slotted, that will override the value returned
+     */
+    setCount(): string | void;
+}
+/**
+ * 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 CounterBadge extends StartEnd {
+}

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

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

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

@@ -0,0 +1,14 @@
+import type { Args, Meta } from '@storybook/html';
+import type { CounterBadge as FluentCounterBadge } from './counter-badge.js';
+import './define.js';
+declare type CounterBadgeStoryArgs = Args & FluentCounterBadge;
+declare type CounterBadgeStoryMeta = Meta<CounterBadgeStoryArgs>;
+declare const _default: CounterBadgeStoryMeta;
+export default _default;
+export declare const CounterBadge: any;
+export declare const Appearance: (args: Args) => Element | DocumentFragment | null;
+export declare const Color: (args: Args) => Element | DocumentFragment | null;
+export declare const Shape: (args: Args) => Element | DocumentFragment | null;
+export declare const Size: CounterBadgeStoryMeta;
+export declare const Dot: (args: Args) => Element | DocumentFragment | null;
+export declare const ShowZero: (args: Args) => Element | DocumentFragment | null;

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/fluent-design-system.d.ts

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

package/dist/dts/index-rollup.d.ts

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

package/dist/dts/index.d.ts

@@ -1 +1,6 @@
-export declare const empty = "";
+export * from './badge/index.js';
+export * from './counter-badge/index.js';
+export * from './progress-bar/index.js';
+export * from './spinner/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.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Args, Meta } from '@storybook/html';
+import type { ProgressBar as FluentProgressBar } from './progress-bar.js';
+import './define.js';
+declare type ProgressStoryArgs = Args & FluentProgressBar;
+declare type ProgressStoryMeta = Meta<ProgressStoryArgs>;
+declare const _default: ProgressStoryMeta;
+export default _default;
+export declare const Progress: any;
+export declare const ProgressIndeterminate: (args: Args) => Element | DocumentFragment | null;

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

@@ -0,0 +1,8 @@
+import type { Args, Meta } from '@storybook/html';
+import './define.js';
+declare type SpinnerStoryArgs = Args;
+declare type SpinnerStoryMeta = Meta<SpinnerStoryArgs>;
+declare const _default: SpinnerStoryMeta;
+export default _default;
+export declare const Spinner: any;
+export declare const SpinnerInverted: (args: Args) => Element | DocumentFragment | null;

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