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

package/dist/esm/text-area/text-area.vscode.definition.json

@@ -1,141 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-text-area",
-            "title": "Text area",
-            "description": "The Fluent UI text-area element",
-            "attributes": [
-                {
-                    "name": "appearance",
-                    "title": "Appearance",
-                    "description": "The text area's visual treatment",
-                    "default": "outline",
-                    "required": false,
-                    "type": "string",
-                    "values": [{ "name": "outline" }, { "name": "filled" }]
-                },
-                {
-                    "name": "resize",
-                    "title": "Resize",
-                    "description": "The resize mode of the element",
-                    "required": false,
-                    "type": "string",
-                    "values": [{ "name": "none" }, { "name": "both" }, { "name": "horizontal" }, { "name": "vertical" }],
-                    "default": "none"
-                },
-                {
-                    "name": "autofocus",
-                    "title": "Autofocus",
-                    "description": "Determines if the element should receive document focus on page load",
-                    "required": false,
-                    "type": "boolean",
-                    "default": false
-                },
-                {
-                    "name": "cols",
-                    "title": "Columns",
-                    "description": "Sizes the element vertically by a number of character columns",
-                    "required": false,
-                    "type": "number",
-                    "default": 20
-                },
-                {
-                    "name": "form",
-                    "description": "The form attribute",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "list",
-                    "title": "List ID",
-                    "description": "Allows associating a datalist to the component",
-                    "required": false,
-                    "type": "string",
-                    "default": ""
-                },
-                {
-                    "name": "maxlength",
-                    "title": "Maximum length",
-                    "description": "The maximum number of characters a user can enter",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "minlength",
-                    "title": "Minimum length",
-                    "description": "The minimum number of characters a user can enter",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "placeholder",
-                    "title": "Placeholder",
-                    "description": "Sets the placeholder value of the element, generally used to provide a hint to the user",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "rows",
-                    "title": "Rows",
-                    "description": "Sizes the element vertically by a number of character rows",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "spellcheck",
-                    "title": "Spellcheck",
-                    "description": "Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used",
-                    "required": false,
-                    "type": "boolean"
-                },
-                {
-                    "name": "value",
-                    "title": "Value",
-                    "description": "The HTML value attribute of the text area",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "name",
-                    "title": "Name",
-                    "description": "This element's value will be surfaced during form submission under the provided name",
-                    "type": "string",
-                    "default": "",
-                    "required": false
-                },
-                {
-                    "name": "required",
-                    "title": "Required",
-                    "description": "Require the field to be completed prior to form submission",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Sets the disabled state of the text area",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "readonly",
-                    "title": "Readonly",
-                    "description": "When true, the control will be immutable by user interaction",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the text area represents its visual label"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/text-field/index.js

@@ -1,56 +0,0 @@
-import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation';
-import { textFieldStyles as styles } from './text-field.styles';
-/**
- * The Fluent text field class
- * @internal
- */
-export class TextField extends FoundationTextField {
-    /**
-     * @internal
-     */
-    appearanceChanged(oldValue, newValue) {
-        if (oldValue !== newValue) {
-            this.classList.add(newValue);
-            this.classList.remove(oldValue);
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        if (!this.appearance) {
-            this.appearance = 'outline';
-        }
-    }
-}
-__decorate([
-    attr
-], TextField.prototype, "appearance", void 0);
-/**
- * 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 const fluentTextField = TextField.compose({
-    baseName: 'text-field',
-    baseClass: FoundationTextField,
-    template,
-    styles,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
-});
-/**
- * Styles for TextField
- * @public
- */
-export const textFieldStyles = styles;

package/dist/esm/text-field/text-field.stories.js

@@ -1,88 +0,0 @@
-import { fluentTextField } from './index';
-export default {
-    title: 'Components/Text Field',
-    component: fluentTextField,
-    argTypes: {
-        appearance: {
-            options: ['filled', 'outline'],
-            defaultValue: 'outline',
-            control: { type: 'radio' },
-        },
-        autoFocus: {
-            description: 'Automatically focuses the control',
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            description: 'The text field should be submitted with the form but should not be editable',
-            control: { type: 'boolean' },
-        },
-        list: {
-            control: { type: 'text' },
-        },
-        maxlength: {
-            control: { type: 'number' },
-        },
-        name: {
-            control: { type: 'text' },
-        },
-        minlength: {
-            control: { type: 'number' },
-        },
-        pattern: {
-            description: `A regular expression the input's contents must match in order to be valid`,
-            control: { type: 'text' },
-        },
-        placeholder: {
-            description: 'An exemplar value to display in the input field whenever it is empty',
-            defaultValue: 'Placeholder',
-            control: { type: 'text' },
-        },
-        readonly: {
-            control: { type: 'boolean' },
-        },
-        required: {
-            control: { type: 'boolean' },
-        },
-        spellcheck: {
-            control: { type: 'boolean' },
-        },
-        type: {
-            options: ['text', 'email', 'password', 'tel', 'url'],
-            control: { type: 'radio' },
-        },
-    },
-};
-const TextFieldTemplate = ({ appearance, autoFocus, disabled, list, maxlength, name, minlength, pattern, placeholder, readonly, required, size, spellcheck, type, }) => `<fluent-text-field
-    ${appearance ? `appearance="${appearance}"` : ''}
-    ${autoFocus ? 'autofocus' : ''}
-    ${disabled ? 'disabled' : ''}
-    ${list ? `list="${list}"` : ''}
-    ${maxlength ? `maxlength="${maxlength}"` : ''}
-    ${name ? `name="${name}"` : ''}
-    ${minlength ? `minlength="${minlength}"` : ''}
-    ${pattern ? `pattern="${pattern}"` : ''}
-    ${placeholder ? `placeholder="${placeholder}"` : ''}
-    ${readonly ? 'readonly' : ''}
-    ${required ? 'required' : ''}
-    ${spellcheck ? `spellcheck="${spellcheck}"` : ''}
-    ${size ? `size="${size}"` : ''}
-    ${type ? `type="${type}"` : ''}
-  ></fluent-text-field>`;
-export const TextField = TextFieldTemplate.bind({});
-TextField.args = {
-    placeholder: 'placeholder',
-    autoFocus: false,
-    disabled: false,
-    readonly: false,
-    required: false,
-};
-const example = `
-<fluent-text-field appearance="outline"></fluent-text-field>
-`;
-TextField.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/text-field/text-field.styles.js

@@ -1,48 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { baseInputStyles, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, } from '../styles';
-import { appearanceBehavior } from '../utilities/behaviors';
-import { designUnit } from '../design-tokens';
-const logicalControlSelector = '.root';
-export const textFieldStyles = (context, definition) => css `
-    ${display('inline-block')}
-
-    ${baseInputStyles(context, definition, logicalControlSelector)}
-
-    ${inputStateStyles(context, definition, logicalControlSelector)}
-
-    .root {
-      display: flex;
-      flex-direction: row;
-    }
-
-    .control {
-      -webkit-appearance: none;
-      color: inherit;
-      background: transparent;
-      border: 0;
-      height: calc(100% - 4px);
-      margin-top: auto;
-      margin-bottom: auto;
-      padding: 0 calc(${designUnit} * 2px + 1px);
-      font-family: inherit;
-      font-size: inherit;
-      line-height: inherit;
-    }
-
-    .start,
-    .end {
-      display: flex;
-      margin: auto;
-    }
-
-    .start {
-      display: flex;
-      margin-inline-start: 11px;
-    }
-
-    .end {
-      display: flex;
-      margin-inline-end: 11px;
-    }
-  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));

package/dist/esm/text-field/text-field.vscode.definition.json

@@ -1,150 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-text-field",
-            "title": "Text field",
-            "description": "The Fluent UI text-field element",
-            "attributes": [
-                {
-                    "name": "value",
-                    "title": "Value",
-                    "description": "The HTML value attribute of the text field",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "appearance",
-                    "title": "Appearance",
-                    "description": "The text field's visual treatment",
-                    "default": "outline",
-                    "values": [{ "name": "outline" }, { "name": "filled" }],
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "autofocus",
-                    "title": "Autofocus",
-                    "description": "Determines if the element should receive document focus on page load",
-                    "required": false,
-                    "type": "boolean",
-                    "default": false
-                },
-                {
-                    "name": "placeholder",
-                    "title": "Placeholder",
-                    "description": "Sets the placeholder value of the element, generally used to provide a hint to the user",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "type",
-                    "title": "Type",
-                    "description": "Specifies the type of text input for the field",
-                    "default": "text",
-                    "values": [
-                        { "name": "email" },
-                        { "name": "password" },
-                        { "name": "tel" },
-                        { "name": "text" },
-                        { "name": "url" }
-                    ],
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "list",
-                    "title": "List ID",
-                    "description": "Allows associating a datalist to the component",
-                    "required": false,
-                    "type": "string",
-                    "default": ""
-                },
-                {
-                    "name": "maxlength",
-                    "title": "Maximum length",
-                    "description": "The maximum number of characters a user can enter",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "minlength",
-                    "title": "Minimum length",
-                    "description": "The minimum number of characters a user can enter",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "pattern",
-                    "title": "Validation pattern",
-                    "description": "A regular expression that the value must match to pass validation",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "size",
-                    "title": "Size",
-                    "description": "Sets the width of the element to a specified number of characters",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "spellcheck",
-                    "title": "Spellcheck",
-                    "description": "Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used",
-                    "required": false,
-                    "type": "boolean"
-                },
-                {
-                    "name": "name",
-                    "title": "Name",
-                    "description": "This element's value will be surfaced during form submission under the provided name",
-                    "type": "string",
-                    "default": "",
-                    "required": false
-                },
-                {
-                    "name": "required",
-                    "title": "Required",
-                    "description": "Require the field to be completed prior to form submission",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Sets the disabled state of the number field",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "readonly",
-                    "title": "Readonly",
-                    "description": "When true, the control will be immutable by user interaction",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the radio represents its visual label"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned before the option content"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the option content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/toolbar/index.js

@@ -1,23 +0,0 @@
-import { Toolbar as FoundationToolbar, toolbarTemplate as template } from '@microsoft/fast-foundation';
-import { toolbarStyles as styles } from './toolbar.styles';
-/**
- * The Fluent toolbar class
- * @internal
- */
-export 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 const fluentToolbar = Toolbar.compose({
-    baseName: 'toolbar',
-    baseClass: FoundationToolbar,
-    template,
-    styles,
-});

package/dist/esm/toolbar/toolbar.stories.js

@@ -1,9 +0,0 @@
-import './index';
-import '../button';
-import '../select';
-import '../badge';
-import ToolbarTemplate from './fixtures/toolbar.html';
-export default {
-    title: 'Components/Toolbar',
-};
-export const Toolbar = () => ToolbarTemplate;

package/dist/esm/toolbar/toolbar.styles.js

@@ -1,73 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { designUnit, fillColor } from '../design-tokens';
-import { focusTreatmentBase } from '../styles/focus';
-export const toolbarStyles = (context, definition) => css `
-    ${display('inline-flex')} :host {
-      --toolbar-item-gap: calc(${designUnit} * 1px);
-      background: ${fillColor};
-      fill: currentcolor;
-      padding: var(--toolbar-item-gap);
-      box-sizing: border-box;
-      align-items: center;
-    }
-
-    :host(${focusVisible}) {
-      ${focusTreatmentBase}
-    }
-
-    .positioning-region {
-      align-items: center;
-      display: inline-flex;
-      flex-flow: row wrap;
-      justify-content: flex-start;
-      flex-grow: 1;
-    }
-
-    :host([orientation='vertical']) .positioning-region {
-      flex-direction: column;
-      align-items: start;
-    }
-
-    ::slotted(:not([slot])) {
-      flex: 0 0 auto;
-      margin: 0 var(--toolbar-item-gap);
-    }
-
-    :host([orientation='vertical']) ::slotted(:not([slot])) {
-      margin: var(--toolbar-item-gap) 0;
-    }
-
-    :host([orientation='vertical']) {
-      display: inline-flex;
-      flex-direction: column;
-    }
-
-    .start,
-    .end {
-      display: flex;
-      align-items: center;
-    }
-
-    .end {
-      margin-inline-start: auto;
-    }
-
-    .start__hidden,
-    .end__hidden {
-      display: none;
-    }
-
-    ::slotted(svg) {
-      ${ /* Glyph size is temporary - replace when adaptive typography is figured out */''}
-      width: 16px;
-      height: 16px;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host(:${focusVisible}) {
-          outline-color: ${SystemColors.Highlight};
-          color: ${SystemColors.ButtonText};
-          forced-color-adjust: none;
-        }
-      `));

package/dist/esm/tooltip/index.js

@@ -1,31 +0,0 @@
-import { Tooltip as FoundationTooltip, tooltipTemplate as template } from '@microsoft/fast-foundation';
-import { fillColor, neutralLayerFloating } from '../design-tokens';
-import { tooltipStyles as styles } from './tooltip.styles';
-/**
- * The Fluent tooltip class
- * @internal
- */
-export class Tooltip extends FoundationTooltip {
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        fillColor.setValueFor(this, neutralLayerFloating);
-    }
-}
-/**
- * The Fluent Tooltip Custom Element. Implements {@link @microsoft/fast-foundation#Tooltip},
- * {@link @microsoft/fast-foundation#tooltipTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tooltip\>
- */
-export const fluentTooltip = Tooltip.compose({
-    baseName: 'tooltip',
-    baseClass: FoundationTooltip,
-    template,
-    styles,
-});

package/dist/esm/tooltip/tooltip.stories.js

@@ -1,34 +0,0 @@
-import { fluentTooltip } from './index';
-export default {
-    title: 'Components/Tooltip',
-    components: fluentTooltip,
-    argTypes: {
-        position: {
-            options: ['top', 'right', 'bottom', 'left'],
-            control: { type: 'radio' },
-        },
-    },
-};
-const TooltipTemplate = ({ label, position }) => `
-  <fluent-tooltip 
-    anchor="button" 
-    ${position ? `position="${position}"` : ''}
-  >
-    ${label}
-  </fluent-tooltip>
-  <fluent-button id="button">Reveal Tooltip</fluent-button>
-`;
-export const Tooltip = TooltipTemplate.bind({});
-Tooltip.args = {
-    label: `I'm helping!`,
-};
-const example = `
-<fluent-tooltip anchor="anchor-default"> Helpful text is helpful </fluent-tooltip>
-`;
-Tooltip.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};