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

package/dist/esm/badge/badge.vscode.definition.json

@@ -1,60 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-badge",
-            "title": "Badge",
-            "description": "The Fluent UI badge element",
-            "attributes": [
-                {
-                    "name": "circular",
-                    "title": "Circular",
-                    "description": "Sets the visual appearance of the badge to circular",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "fill",
-                    "title": "Fill",
-                    "description": "Sets the background color to a CSS custom property of the attribute value - var(--badge-fill-[value])",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "color",
-                    "title": "Color",
-                    "description": "Sets the color to a CSS custom property of the attribute value - var(--badge-color-[value])",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "appearance",
-                    "title": "Appearance",
-                    "description": "The badge's visual treatment",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "accent"
-                        },
-                        {
-                            "name": "lightweight"
-                        },
-                        {
-                            "name": "neutral"
-                        }
-                    ],
-                    "default": "lightweight",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the badge"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/badge/index.js

@@ -1,45 +0,0 @@
-import { __decorate } from "tslib";
-import { attr, DOM } from '@microsoft/fast-element';
-import { Badge as FoundationBadge, badgeTemplate as template } from '@microsoft/fast-foundation';
-import { badgeStyles as styles } from './badge.styles';
-/**
- * The Fluent Badge class
- * @internal
- */
-export class Badge extends FoundationBadge {
-    constructor() {
-        super(...arguments);
-        this.appearance = 'lightweight';
-    }
-    appearanceChanged(oldValue, newValue) {
-        if (oldValue !== newValue) {
-            DOM.queueUpdate(() => {
-                this.classList.add(newValue);
-                this.classList.remove(oldValue);
-            });
-        }
-    }
-}
-__decorate([
-    attr({ mode: 'fromView' })
-], Badge.prototype, "appearance", void 0);
-/**
- * The Fluent Badge Element. Implements {@link @microsoft/fast-foundation#Badge},
- * {@link @microsoft/fast-foundation#badgeTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-badge\>
- */
-export const fluentBadge = Badge.compose({
-    baseName: 'badge',
-    baseClass: FoundationBadge,
-    template,
-    styles,
-});
-/**
- * Styles for Badge
- * @public
- */
-export const badgeStyles = styles;

package/dist/esm/breadcrumb/breadcrumb.stories.js

@@ -1,20 +0,0 @@
-import BreadcrumbTemplate from './fixtures/breadcrumb.html';
-import './index';
-export default {
-    title: 'Components/Breadcrumb',
-};
-export const Breadcrumb = () => BreadcrumbTemplate;
-const example = `
-<fluent-breadcrumb>
-  <fluent-breadcrumb-item href="#"> Breadcrumb item 1 </fluent-breadcrumb-item>
-  <fluent-breadcrumb-item href="#"> Breadcrumb item 2 </fluent-breadcrumb-item>
-  <fluent-breadcrumb-item>Breadcrumb item 3</fluent-breadcrumb-item>
-</fluent-breadcrumb>
-`;
-Breadcrumb.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/breadcrumb/breadcrumb.styles.js

@@ -1,13 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-export const breadcrumbStyles = (context, definition) => css `
-  ${display('inline-block')} :host {
-    box-sizing: border-box;
-    ${typeRampBase};
-  }
-
-  .list {
-    display: flex;
-  }
-`;

package/dist/esm/breadcrumb/breadcrumb.vscode.definition.json

@@ -1,18 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-breadcrumb",
-            "title": "Breadcrumb",
-            "description": "The Fluent UI breadcrumb element",
-            "attributes": [],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the breadcrumb, typically composed of fluent-breadcrumb-items or anchors"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/breadcrumb/index.js

@@ -1,26 +0,0 @@
-import { Breadcrumb, breadcrumbTemplate as template } from '@microsoft/fast-foundation';
-import { breadcrumbStyles as styles } from './breadcrumb.styles';
-/**
- * The Fluent Breadcrumb Element. Implements {@link @microsoft/fast-foundation#Breadcrumb},
- * {@link @microsoft/fast-foundation#breadcrumbTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-breadcrumb\>
- */
-export const fluentBreadcrumb = Breadcrumb.compose({
-    baseName: 'breadcrumb',
-    template,
-    styles,
-});
-/**
- * Styles for Breadcrumb
- * @public
- */
-export const breadcrumbStyles = styles;
-/**
- * Base class for Breadcrumb
- * @public
- */
-export { Breadcrumb };

package/dist/esm/breadcrumb-item/breadcrumb-item.stories.js

@@ -1,16 +0,0 @@
-import BreadcrumbItemTemplate from './fixtures/breadcrumb-item.html';
-import './index';
-export default {
-    title: 'Components/Breadcrumb Item',
-};
-export const BreadcrumbItem = () => BreadcrumbItemTemplate;
-const example = `
-<fluent-breadcrumb-item href="#"> Breadcrumb item </fluent-breadcrumb-item>
-`;
-BreadcrumbItem.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/breadcrumb-item/breadcrumb-item.styles.js

@@ -1,96 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { controlCornerRadius, neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { heightNumber } from '../styles/index';
-import { focusTreatmentTight } from '../styles/focus';
-export const breadcrumbItemStyles = (context, definition) => css `
-    ${display('inline-flex')} :host {
-      background: transparent;
-      color: ${neutralForegroundRest};
-      fill: currentcolor;
-      box-sizing: border-box;
-      ${typeRampBase};
-      min-width: calc(${heightNumber} * 1px);
-      border-radius: calc(${controlCornerRadius} * 1px);
-    }
-
-    .listitem {
-      display: flex;
-      align-items: center;
-      border-radius: inherit;
-    }
-
-    .control {
-      position: relative;
-      align-items: center;
-      box-sizing: border-box;
-      color: inherit;
-      fill: inherit;
-      cursor: pointer;
-      display: flex;
-      outline: none;
-      text-decoration: none;
-      white-space: nowrap;
-      border-radius: inherit;
-    }
-
-    .control:hover {
-      color: ${neutralForegroundHover};
-    }
-
-    .control:active {
-      color: ${neutralForegroundActive};
-    }
-
-    .control:${focusVisible} {
-      ${focusTreatmentTight}
-    }
-
-    :host(:not([href])),
-    :host([aria-current]) .control {
-      color: ${neutralForegroundRest};
-      fill: currentcolor;
-      cursor: default;
-    }
-
-    .start {
-      display: flex;
-      margin-inline-end: 6px;
-    }
-
-    .end {
-      display: flex;
-      margin-inline-start: 6px;
-    }
-
-    .separator {
-      display: flex;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host(:not([href])),
-        .start,
-        .end,
-        .separator {
-          background: ${SystemColors.ButtonFace};
-          color: ${SystemColors.ButtonText};
-          fill: currentcolor;
-        }
-        .separator {
-          fill: ${SystemColors.ButtonText};
-        }
-        :host([href]) {
-          forced-color-adjust: none;
-          background: ${SystemColors.ButtonFace};
-          color: ${SystemColors.LinkText};
-        }
-        :host([href]) .control:hover {
-          background: ${SystemColors.LinkText};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-        .control:${focusVisible} {
-          outline-color: ${SystemColors.LinkText};
-        }
-      `));

package/dist/esm/breadcrumb-item/breadcrumb-item.vscode.definition.json

@@ -1,50 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-breadcrumb-item",
-            "title": "Breadcrumb item",
-            "description": "The Fluent UI breadcrumb item element",
-            "attributes": [
-                {
-                    "name": "href",
-                    "title": "URL",
-                    "description": "The URL the item points to",
-                    "type": "string",
-                    "default": "",
-                    "required": false
-                },
-                {
-                    "name": "separator",
-                    "title": "Separator",
-                    "description": "Determines whether the visual separator should be rendered",
-                    "type": "boolean",
-                    "default": true,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the item"
-                },
-                {
-                    "name": "separator",
-                    "title": "Separator slot",
-                    "description": "Slot to provide a custom icon to represent the visual separator"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned before the default content"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the default content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/breadcrumb-item/index.js

@@ -1,34 +0,0 @@
-import { BreadcrumbItem, breadcrumbItemTemplate as template } from '@microsoft/fast-foundation';
-import { breadcrumbItemStyles as styles } from './breadcrumb-item.styles';
-/**
- * The Fluent BreadcrumbItem Element. Implements {@link @microsoft/fast-foundation#BreadcrumbItem},
- * {@link @microsoft/fast-foundation#breadcrumbItemTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-breadcrumb-item\>
- */
-export const fluentBreadcrumbItem = BreadcrumbItem.compose({
-    baseName: 'breadcrumb-item',
-    template,
-    styles,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
-    separator: `
-    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-      <path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"/>
-    </svg>
-  `,
-});
-/**
- * Styles for BreadcrumbItem
- * @public
- */
-export const breadcrumbItemStyles = styles;
-/**
- * Base class for BreadcrumbItem
- * @public
- */
-export { BreadcrumbItem };

package/dist/esm/button/button.stories.js

@@ -1,40 +0,0 @@
-import { fluentButton } from './index';
-export default {
-    title: 'Components/Button',
-    component: fluentButton,
-    argTypes: {
-        appearance: {
-            description: 'This controls the basic appearances',
-            control: { type: 'select' },
-            options: ['neutral', 'accent', 'lightweight', 'outline', 'stealth'],
-            default: 'neutral',
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const ButtonTemplate = ({ appearance, disabled, label }) => `
-    <fluent-button
-      ${disabled ? 'disabled' : ''}
-      ${appearance ? `appearance="${appearance}"` : ''}
-    >
-      ${label}
-    </fluent-button>
-  `;
-export const Button = ButtonTemplate.bind({});
-Button.args = {
-    label: 'Button',
-    disabled: false,
-    appearance: 'accent',
-};
-const example = `
-<fluent-button appearance="accent">Button</fluent-button>
-`;
-Button.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/button/button.styles.js

@@ -1,24 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, } from '@microsoft/fast-foundation';
-import { AccentButtonStyles, baseButtonStyles, LightweightButtonStyles, NeutralButtonStyles, OutlineButtonStyles, StealthButtonStyles, } from '../styles/';
-import { appearanceBehavior } from '../utilities/behaviors';
-import { disabledOpacity } from '../design-tokens';
-const interactivitySelector = ':not([disabled])';
-const nonInteractivitySelector = '[disabled]';
-export const buttonStyles = (context, definition) => css `
-    :host(${interactivitySelector}) .control {
-      cursor: pointer;
-    }
-
-    :host(${nonInteractivitySelector}) .control {
-      cursor: ${disabledCursor};
-    }
-
-    @media (forced-colors: none) {
-      :host(${nonInteractivitySelector}) .control {
-        opacity: ${disabledOpacity};
-      }
-    }
-
-    ${baseButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-  `.withBehaviors(appearanceBehavior('neutral', NeutralButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)));

package/dist/esm/button/button.vscode.definition.json

@@ -1,158 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-button",
-            "title": "Button",
-            "description": "The Fluent UI button element",
-            "attributes": [
-                {
-                    "name": "appearance",
-                    "title": "Appearance",
-                    "description": "The button's visual treatment",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "accent"
-                        },
-                        {
-                            "name": "lightweight"
-                        },
-                        {
-                            "name": "neutral"
-                        },
-                        {
-                            "name": "outline"
-                        },
-                        {
-                            "name": "stealth"
-                        }
-                    ],
-                    "default": "neutral",
-                    "required": false
-                },
-                {
-                    "name": "autofocus",
-                    "title": "Autofocus",
-                    "description": "Determines if the element should receive document focus on page load",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Sets the disabled state of the button",
-                    "type": "boolean",
-                    "required": false
-                },
-                {
-                    "name": "form",
-                    "title": "Form ID",
-                    "description": "The ID of a form to associate the element to",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "formaction",
-                    "title": "Form processing url",
-                    "description": "The HTML formaction attribute of the button",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "formenctype",
-                    "title": "Form encoding",
-                    "description": "The HTML formenctype attribute of the button",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "formmethod",
-                    "title": "Form submit method",
-                    "description": "The HTML formmethod attribute of the button",
-                    "type": "string",
-                    "required": false,
-                    "values": [{ "name": "post" }, { "name": "get" }]
-                },
-                {
-                    "name": "formnovalidate",
-                    "title": "No form validation",
-                    "description": "The HTML formnovalidate attribute of the button",
-                    "type": "boolean",
-                    "required": false
-                },
-                {
-                    "name": "formtarget",
-                    "title": "Form Target",
-                    "description": "The HTML formtarget attribute of the button",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "_self"
-                        },
-                        {
-                            "name": "_blank"
-                        },
-                        {
-                            "name": "_parent"
-                        },
-                        {
-                            "name": "_top"
-                        }
-                    ],
-                    "required": false
-                },
-                {
-                    "name": "name",
-                    "title": "Name",
-                    "description": "The HTML name attribute of the button",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "type",
-                    "title": "Type",
-                    "description": "The HTML type attribute of the button",
-                    "type": "string",
-                    "required": false,
-                    "values": [
-                        {
-                            "name": "submit"
-                        },
-                        {
-                            "name": "reset"
-                        },
-                        {
-                            "name": "button"
-                        }
-                    ]
-                },
-                {
-                    "name": "value",
-                    "title": "Value",
-                    "description": "The HTML value attribute of the button",
-                    "type": "string",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the anchor"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned before the button content"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the button content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/button/index.js

@@ -1,67 +0,0 @@
-import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { Button as FoundationButton, buttonTemplate as template } from '@microsoft/fast-foundation';
-import { buttonStyles as styles } from './button.styles';
-/**
- * The Fluent button class
- * @internal
- */
-export class Button extends FoundationButton {
-    appearanceChanged(oldValue, newValue) {
-        if (oldValue !== newValue) {
-            this.classList.add(newValue);
-            this.classList.remove(oldValue);
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        if (!this.appearance) {
-            this.appearance = 'neutral';
-        }
-    }
-    /**
-     * Applies 'icon-only' class when there is only an SVG in the default slot
-     *
-     * @internal
-     */
-    defaultSlottedContentChanged() {
-        const slottedElements = this.defaultSlottedContent.filter(x => x.nodeType === Node.ELEMENT_NODE);
-        if (slottedElements.length === 1 && slottedElements[0] instanceof SVGElement) {
-            this.control.classList.add('icon-only');
-        }
-        else {
-            this.control.classList.remove('icon-only');
-        }
-    }
-}
-__decorate([
-    attr
-], Button.prototype, "appearance", void 0);
-/**
- * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button},
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-button\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
- */
-export const fluentButton = Button.compose({
-    baseName: 'button',
-    baseClass: FoundationButton,
-    template,
-    styles,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
-});
-/**
- * Styles for Button
- * @public
- */
-export const buttonStyles = styles;