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

package/dist/dts/text-area/text-area.stories.d.ts

@@ -1,41 +0,0 @@
-declare const _default: {
-    title: string;
-    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./index").TextArea>;
-    argTypes: {
-        appearance: {
-            defaultValue: string;
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-        autoFocus: {
-            control: {
-                type: string;
-            };
-        };
-        disabled: {
-            control: {
-                type: string;
-            };
-        };
-        readonly: {
-            control: {
-                type: string;
-            };
-        };
-        resize: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-        required: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const TextArea: any;

package/dist/dts/text-area/text-area.styles.d.ts

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

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

@@ -1,45 +0,0 @@
-import { TextField as FoundationTextField } from '@microsoft/fast-foundation';
-/**
- * Text field appearances
- * @public
- */
-export declare type TextFieldAppearance = 'filled' | 'outline';
-/**
- * The Fluent text field class
- * @internal
- */
-export declare class TextField extends FoundationTextField {
-    /**
-     * The appearance of the element.
-     *
-     * @public
-     * @remarks
-     * HTML Attribute: appearance
-     */
-    appearance: TextFieldAppearance;
-    /**
-     * @internal
-     */
-    appearanceChanged(oldValue: TextFieldAppearance, newValue: TextFieldAppearance): void;
-    /**
-     * @internal
-     */
-    connectedCallback(): void;
-}
-/**
- * The Fluent Text Field Custom Element. Implements {@link @microsoft/fast-foundation#TextField},
- * {@link @microsoft/fast-foundation#textFieldTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-text-field\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
- */
-export declare const fluentTextField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof TextField>;
-/**
- * Styles for TextField
- * @public
- */
-export declare const textFieldStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles;

package/dist/dts/text-field/text-field.stories.d.ts

@@ -1,81 +0,0 @@
-declare const _default: {
-    title: string;
-    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./index").TextField>;
-    argTypes: {
-        appearance: {
-            options: string[];
-            defaultValue: string;
-            control: {
-                type: string;
-            };
-        };
-        autoFocus: {
-            description: string;
-            control: {
-                type: string;
-            };
-        };
-        disabled: {
-            description: string;
-            control: {
-                type: string;
-            };
-        };
-        list: {
-            control: {
-                type: string;
-            };
-        };
-        maxlength: {
-            control: {
-                type: string;
-            };
-        };
-        name: {
-            control: {
-                type: string;
-            };
-        };
-        minlength: {
-            control: {
-                type: string;
-            };
-        };
-        pattern: {
-            description: string;
-            control: {
-                type: string;
-            };
-        };
-        placeholder: {
-            description: string;
-            defaultValue: string;
-            control: {
-                type: string;
-            };
-        };
-        readonly: {
-            control: {
-                type: string;
-            };
-        };
-        required: {
-            control: {
-                type: string;
-            };
-        };
-        spellcheck: {
-            control: {
-                type: string;
-            };
-        };
-        type: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const TextField: any;

package/dist/dts/text-field/text-field.styles.d.ts

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

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

@@ -1,17 +0,0 @@
-import { Toolbar as FoundationToolbar } from '@microsoft/fast-foundation';
-/**
- * The Fluent toolbar class
- * @internal
- */
-export declare class Toolbar extends FoundationToolbar {
-}
-/**
- * The Fluent Toolbar Custom Element. Implements {@link @microsoft/fast-foundation#Toolbar},
- * {@link @microsoft/fast-foundation#toolbarTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-toolbar\>
- */
-export declare const fluentToolbar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Toolbar>;

package/dist/dts/toolbar/toolbar.stories.d.ts

@@ -1,9 +0,0 @@
-import './index';
-import '../button';
-import '../select';
-import '../badge';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const Toolbar: () => string;

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

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

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

@@ -1,21 +0,0 @@
-import { Tooltip as FoundationTooltip } from '@microsoft/fast-foundation';
-/**
- * The Fluent tooltip class
- * @internal
- */
-export declare class Tooltip extends FoundationTooltip {
-    /**
-     * @internal
-     */
-    connectedCallback(): void;
-}
-/**
- * The Fluent Tooltip Custom Element. Implements {@link @microsoft/fast-foundation#Tooltip},
- * {@link @microsoft/fast-foundation#tooltipTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tooltip\>
- */
-export declare const fluentTooltip: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof Tooltip>;

package/dist/dts/tooltip/tooltip.stories.d.ts

@@ -1,14 +0,0 @@
-declare const _default: {
-    title: string;
-    components: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./index").Tooltip>;
-    argTypes: {
-        position: {
-            options: string[];
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const Tooltip: any;

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

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

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

@@ -1,22 +0,0 @@
-import { TreeItem, TreeItemOptions } from '@microsoft/fast-foundation';
-/**
- * The Fluent tree item Custom Element. Implements, {@link @microsoft/fast-foundation#TreeItem}
- * {@link @microsoft/fast-foundation#treeItemTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tree-item\>
- *
- */
-export declare const fluentTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<TreeItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<TreeItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-/**
- * Styles for TreeItem
- * @public
- */
-export declare const treeItemStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: TreeItemOptions) => import("@microsoft/fast-element").ElementStyles;
-/**
- * Tree item base class
- * @public
- */
-export { TreeItem };

package/dist/dts/tree-item/tree-item.stories.d.ts

@@ -1,18 +0,0 @@
-declare const _default: {
-    title: string;
-    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").TreeItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").TreeItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-    argTypes: {
-        disabled: {
-            control: {
-                type: string;
-            };
-        };
-        selected: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const TreeItem: any;

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

@@ -1,4 +0,0 @@
-import { ElementStyles } from '@microsoft/fast-element';
-import { ElementDefinitionContext, TreeItemOptions } from '@microsoft/fast-foundation';
-export declare const expandCollapseButtonSize: import("@microsoft/fast-element").CSSDirective;
-export declare const treeItemStyles: (context: ElementDefinitionContext, definition: TreeItemOptions) => ElementStyles;

package/dist/dts/tree-view/index.d.ts

@@ -1,22 +0,0 @@
-import { TreeView } from '@microsoft/fast-foundation';
-/**
- * The Fluent tree view Custom Element. Implements, {@link @microsoft/fast-foundation#TreeView}
- * {@link @microsoft/fast-foundation#treeViewTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tree-view\>
- *
- */
-export declare const fluentTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof TreeView>;
-/**
- * Styles for TreeView
- * @public
- */
-export declare const treeViewStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles;
-/**
- * Tree View base class
- * @public
- */
-export { TreeView };

package/dist/dts/tree-view/tree-view.stories.d.ts

@@ -1,13 +0,0 @@
-declare const _default: {
-    title: string;
-    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").TreeView>;
-    argTypes: {
-        renderCollapsedNodes: {
-            control: {
-                type: string;
-            };
-        };
-    };
-};
-export default _default;
-export declare const TreeView: any;

package/dist/dts/tree-view/tree-view.styles.d.ts

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

package/dist/dts/utilities/behaviors.d.ts

@@ -1,12 +0,0 @@
-import { ElementStyles } from '@microsoft/fast-element';
-import { PropertyStyleSheetBehavior } from '@microsoft/fast-foundation';
-/**
- * Behavior that will conditionally apply a stylesheet based on the elements
- * appearance property
- *
- * @param value - The value of the appearance property
- * @param styles - The styles to be applied when condition matches
- *
- * @public
- */
-export declare function appearanceBehavior(value: string, styles: ElementStyles): PropertyStyleSheetBehavior;

package/dist/dts/utilities/type-ramp.d.ts

@@ -1,12 +0,0 @@
-/** @public */
-export declare const StandardFontWeight: {
-    readonly Thin: 100;
-    readonly ExtraLight: 200;
-    readonly Light: 300;
-    readonly Normal: 400;
-    readonly Medium: 500;
-    readonly SemiBold: 600;
-    readonly Bold: 700;
-    readonly ExtraBold: 800;
-    readonly Black: 900;
-};

package/dist/esm/_docs/design-system/color-explorer/app.js

@@ -1,247 +0,0 @@
-import { __decorate } from "tslib";
-import { parseColorHexRGB } from '@microsoft/fast-colors';
-import { attr, css, customElement, FASTElement, html, observable, ref, repeat, when } from '@microsoft/fast-element';
-import { accentBaseColor, baseLayerLuminance, neutralBaseColor, neutralLayer1Recipe, neutralLayer2Recipe, neutralLayer3Recipe, neutralLayer4Recipe, neutralLayerCardContainerRecipe, neutralLayerFloatingRecipe, PaletteRGB, StandardLuminance, SwatchRGB, } from '../../../index-rollup';
-import { ComponentTypes } from './component-types';
-import { AppColorBlock } from './components/color-block';
-import { AppControlPane } from './components/control-pane';
-import { AppGradient } from './components/gradient';
-import { AppSampleApp } from './components/sample-app';
-AppColorBlock;
-AppControlPane;
-AppGradient;
-AppSampleApp;
-const sampleTemplate = html `
-  <fluent-design-system-provider
-    neutral-color="${x => x.neutralColor}"
-    accent-color="${x => x.accentColor}"
-    style="display: flex; align-items: stretch; align-content: stretch; justify-content: center; flex-grow: 1;"
-  >
-    <app-layer-background
-      id="light-mode"
-      base-layer-luminance="${StandardLuminance.LightMode}"
-      background-layer-recipe="L4"
-      style="flex-grow: 1; padding: 100px;"
-    >
-      <app-sample-app></app-sample-app>
-    </app-layer-background>
-    <app-layer-background
-      id="dark-mode"
-      base-layer-luminance="${StandardLuminance.DarkMode}"
-      background-layer-recipe="L4"
-      style="flex-grow: 1; padding: 100px;"
-    >
-      <app-sample-app></app-sample-app>
-    </app-layer-background>
-  </fluent-design-system-provider>
-`;
-const colorBlockTemplate = html `
-  ${repeat(x => x.backgrounds(), html `
-      <app-color-block
-        id="${x => x.color.toUpperCase().replace('#', '')}"
-        index="${(x, c) => x.index}"
-        component="${(x, c) => c.parent.componentType}"
-        color="${x => x.color}"
-        layer-name="${x => x.title}"
-      ></app-color-block>
-    `)}
-`;
-const template = html `
-  <div class="container fill">
-    <div class="row fill">
-      <div class="canvas" ${ref('canvasElement')}>
-        <div class="container fill">
-          <div class="row gradient">
-            <app-gradient :colors="${x => x.neutralPalette}" :markedColor="${x => x.neutralColor}"></app-gradient>
-          </div>
-          <div class="row gradient">
-            <app-gradient :colors="${x => x.accentPalette}" :markedColor="${x => x.accentColor}"></app-gradient>
-          </div>
-          <div class="row fill">
-            <div style="display: flex; overflow: auto;">
-              ${when(x => x.componentType === ComponentTypes.sample, sampleTemplate)}
-              ${when(x => x.componentType !== ComponentTypes.sample, colorBlockTemplate)}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <app-layer-background
-          id="control-pane"
-          class="control-pane-container"
-          base-layer-luminance="${StandardLuminance.DarkMode}"
-          background-layer-recipe="L2"
-        >
-          <app-control-pane
-            :componentType="${x => x.componentType}"
-            :neutralColor="${x => x.neutralColor}"
-            :accentColor="${x => x.accentColor}"
-            :showOnlyLayerBackgrounds="${x => x.showOnlyLayerBackgrounds}"
-            @formvaluechange="${(x, c) => x.controlPaneHandler(c.event)}"
-          ></app-control-pane>
-        </app-layer-background>
-      </div>
-    </div>
-  </div>
-`;
-const styles = css `
-  :host {
-  }
-
-  .container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .container.fill {
-    width: 100%;
-    height: 1200px;
-  }
-
-  .row {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    flex-basis: auto;
-  }
-
-  .row.fill {
-    flex: 1;
-    overflow: hidden;
-  }
-
-  .canvas {
-    min-width: 300px;
-    flex-grow: 1;
-  }
-
-  .gradient {
-    height: 20px;
-  }
-
-  .control-pane-container {
-    height: 100%;
-    z-index: 1;
-    padding: 40px;
-    position: relative;
-    overflow: auto;
-    width: 310px;
-    box-sizing: border-box;
-  }
-
-  app-color-block {
-    min-width: 400px;
-  }
-`;
-let App = class App extends FASTElement {
-    constructor() {
-        super(...arguments);
-        this.componentType = ComponentTypes.backplate;
-        this.neutralPalette = [];
-        this.accentPalette = [];
-        this.showOnlyLayerBackgrounds = true;
-        this.layerRecipes = [
-            [neutralLayerFloatingRecipe, 'neutralLayerFloating'],
-            [neutralLayerCardContainerRecipe, 'neutralLayerCardContainer'],
-            [neutralLayer1Recipe, 'neutralLayer1'],
-            [neutralLayer2Recipe, 'neutralLayer2'],
-            [neutralLayer3Recipe, 'neutralLayer3'],
-            [neutralLayer4Recipe, 'neutralLayer4'],
-        ];
-        this.resolveLayerRecipes = (luminance) => {
-            const designSystemElement = document.createElement('div');
-            this.canvasElement.appendChild(designSystemElement);
-            baseLayerLuminance.setValueFor(designSystemElement, luminance);
-            return this.layerRecipes
-                .map((conf) => {
-                const color = conf[0].getValueFor(document.body).evaluate(designSystemElement).toColorString();
-                return {
-                    index: this.neutralPalette.indexOf(color),
-                    color: color,
-                    title: conf[1],
-                };
-            })
-                .reduce((accum, value) => {
-                const colorIndex = accum.findIndex((config) => config.color === value.color);
-                return colorIndex === -1
-                    ? accum.concat(value)
-                    : accum.map((config, index) => index === colorIndex
-                        ? {
-                            index: this.neutralPalette.indexOf(value.color),
-                            color: value.color,
-                            title: value.title.concat(', ', config.title),
-                        }
-                        : config);
-            }, [])
-                .sort((a, b) => a.index - b.index);
-        };
-    }
-    neutralColorChanged(prev, next) {
-        if (this.canvasElement && next) {
-            const swatch = SwatchRGB.from(parseColorHexRGB(next));
-            neutralBaseColor.setValueFor(this.canvasElement, swatch);
-            this.neutralPalette = PaletteRGB.from(swatch).swatches.map((x) => x.toColorString());
-        }
-    }
-    accentColorChanged(prev, next) {
-        if (this.canvasElement && next) {
-            const swatch = SwatchRGB.from(parseColorHexRGB(next));
-            accentBaseColor.setValueFor(this.canvasElement, swatch);
-            this.accentPalette = PaletteRGB.from(swatch).swatches.map((x) => x.toColorString());
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.neutralColorChanged(undefined, this.neutralColor);
-        this.accentColorChanged(undefined, this.accentColor);
-    }
-    backgrounds() {
-        const neutralLayers = this.lightModeLayers.concat(this.darkModeLayers);
-        return this.showOnlyLayerBackgrounds
-            ? neutralLayers
-            : this.neutralPalette.map((color, index) => {
-                const neutralLayerIndex = neutralLayers.findIndex((config) => config.color === color);
-                return {
-                    index,
-                    color,
-                    title: neutralLayerIndex !== -1 ? neutralLayers[neutralLayerIndex].title : undefined,
-                };
-            });
-    }
-    get lightModeLayers() {
-        return this.resolveLayerRecipes(StandardLuminance.LightMode);
-    }
-    get darkModeLayers() {
-        return this.resolveLayerRecipes(StandardLuminance.DarkMode);
-    }
-    controlPaneHandler(e) {
-        const detail = e.detail;
-        this[detail.field] = detail.value;
-    }
-};
-__decorate([
-    attr({ attribute: 'component-type' })
-], App.prototype, "componentType", void 0);
-__decorate([
-    attr({ attribute: 'neutral-color' })
-], App.prototype, "neutralColor", void 0);
-__decorate([
-    observable
-], App.prototype, "neutralPalette", void 0);
-__decorate([
-    attr({ attribute: 'accent-color' })
-], App.prototype, "accentColor", void 0);
-__decorate([
-    observable
-], App.prototype, "accentPalette", void 0);
-__decorate([
-    observable
-], App.prototype, "showOnlyLayerBackgrounds", void 0);
-App = __decorate([
-    customElement({
-        name: 'app-main',
-        template,
-        styles,
-    })
-], App);
-export { App };

package/dist/esm/_docs/design-system/color-explorer/colors.js

@@ -1,24 +0,0 @@
-export var AccentColors;
-(function (AccentColors) {
-    AccentColors["black"] = "#000000";
-    AccentColors["white"] = "#FFFFFF";
-    AccentColors["magenta"] = "#DA1A5F";
-    AccentColors["blue"] = "#0078D4";
-    AccentColors["green"] = "#107C10";
-    AccentColors["purple"] = "#5C2D91";
-    AccentColors["orange"] = "#D83B01";
-    AccentColors["yellow"] = "#F2C812";
-})(AccentColors || (AccentColors = {}));
-export const neutralColors = [
-    '#808080',
-    '#73818C',
-    '#718E71',
-    '#7F738C',
-    '#8C7A73',
-    '#0078D4',
-    '#107C10',
-    '#5C2D91',
-    '#D83B01',
-];
-export const defaultAccentColor = AccentColors.blue;
-export const defaultNeutralColor = neutralColors[0];

package/dist/esm/_docs/design-system/color-explorer/component-types.js

@@ -1,7 +0,0 @@
-export var ComponentTypes;
-(function (ComponentTypes) {
-    ComponentTypes["backplate"] = "backplate";
-    ComponentTypes["text"] = "text";
-    ComponentTypes["form"] = "form";
-    ComponentTypes["sample"] = "sample";
-})(ComponentTypes || (ComponentTypes = {}));