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

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

@@ -1,3 +1,4 @@
-import { ElementStyles } from '@microsoft/fast-element';
-import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const dividerStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+/** 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

@@ -1,21 +1,5 @@
-import { Divider } from '@microsoft/fast-foundation';
-/**
- * The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
- * {@link @microsoft/fast-foundation#dividerTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-divider\>
- */
-export declare const fluentDivider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Divider>;
-/**
- * Styles for Divider
- * @public
- */
-export declare const dividerStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles;
-/**
- * Base class for Fluent Divider
- * @public
- */
-export { Divider };
+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

@@ -1,9 +1,5 @@
-import { DesignSystem } from '@microsoft/fast-foundation';
-/**
- * Provides a design system for the specified element either by returning one that was
- * already created for that element or creating one.
- * @param element - The element to root the design system at. By default, this is the body.
- * @returns A Fluent Design System
- * @public
- */
-export declare function provideFluentDesignSystem(element?: HTMLElement): DesignSystem;
+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,8 +1 @@
-export * from './index';
-/**
- * The global Fluent Design System.
- * @remarks
- * Only available if the components are added through a script tag
- * rather than a module/build system.
- */
-export declare const FluentDesignSystem: import("@microsoft/fast-foundation").DesignSystem;
+export * from './index.js';

package/dist/dts/index.d.ts

@@ -1,49 +1,12 @@
-/**
- * Export all custom element definitions.
- */
-export * from './custom-elements';
-export * from './fluent-design-system';
-export * from './accordion/';
-export * from './anchor/';
-export * from './anchored-region';
-export * from './badge/';
-export * from './breadcrumb';
-export * from './breadcrumb-item';
-export * from './button/';
-export * from './card/';
-export * from './checkbox/';
-export * from './combobox/';
-export * from './data-grid';
-export * from './design-system-provider/';
-export * from './dialog/';
-export * from './divider/';
-export * from './flipper/';
-export * from './horizontal-scroll/';
-export * from './listbox';
-export * from './listbox-option';
-export * from './menu/';
-export * from './menu-item/';
-export * from './number-field/';
-export * from './progress/';
-export * from './radio/';
-export * from './radio-group/';
-export * from './search/';
-export * from './select';
-export * from './skeleton/';
-export * from './slider/';
-export * from './slider-label/';
-export * from './switch/';
-export * from './tabs/';
-export * from './text-area/';
-export * from './text-field/';
-export * from './toolbar';
-export * from './tooltip';
-export * from './tree-item/';
-export * from './tree-view/';
-export * from './design-tokens';
-export * from './styles';
-export { Palette, PaletteRGB } from './color/palette';
-export { InteractiveSwatchSet } from './color/recipe';
-export { Swatch, SwatchRGB } from './color/swatch';
-export { isDark } from './color/utilities/is-dark';
-export { StandardLuminance } from './color/utilities/base-layer-luminance';
+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';