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

package/dist/esm/tabs/tabs.stories.js

@@ -1,105 +0,0 @@
-import { fluentTabs } from './index';
-export default {
-    title: 'Components/Tabs',
-    components: fluentTabs,
-    argTypes: {
-        activeIndicator: {
-            control: { type: 'boolean' },
-        },
-        orientation: {
-            options: ['horizontal', 'vertical'],
-            control: { type: 'radio' },
-        },
-    },
-};
-const TabsTemplate = ({ activeId, activeIndicator, orientation }) => `
-<fluent-tabs
-  ${orientation ? `orientation="${orientation}"` : ''}
-  ${activeIndicator ? `activeIndicator="${activeIndicator}"` : ''}
-  ${activeId ? `activeId="${activeId}"` : ''}
->
-  <fluent-tab id="TabOne">Tab one</fluent-tab>
-  <fluent-tab id="TabTwo">Tab two</fluent-tab>
-  <fluent-tab id="TabThree">Tab three</fluent-tab>
-  <fluent-tab-panel>
-    Tab one content. This is for testing. Tab three content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-    Tab one content. This is for testing.
-    <br />
-  </fluent-tab-panel>
-  <fluent-tab-panel> Tab two content. This is for testing. </fluent-tab-panel>
-  <fluent-tab-panel>
-    Tab three content. This is for testing. Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-    Tab three content. This is for testing.
-    <br />
-  </fluent-tab-panel>
-</fluent-tabs>`;
-export const Tabs = TabsTemplate.bind({});
-Tabs.args = {
-    activeId: 'TabTwo',
-    activeIndicator: true,
-    orientation: 'horizontal',
-};
-const example = `
-<fluent-tabs id="myTab" activeId="TabTwo" orientation="horizontal">
-  <fluent-tab id="TabOne">Tab one</fluent-tab>
-  <fluent-tab id="TabTwo">Tab two</fluent-tab>
-  <fluent-tab id="TabThree">Tab three</fluent-tab>
-  <fluent-tab-panel id="TabPanelOne"> Tab one content. This is for testing. </fluent-tab-panel>
-  <fluent-tab-panel id="TabPanelTwo"> Tab two content. This is for testing. </fluent-tab-panel>
-  <fluent-tab-panel id="TabPanelThree"> Tab three content. This is for testing. </fluent-tab-panel>
-  <div>Testing</div>
-</fluent-tabs>
-`;
-Tabs.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/tabs/tabs.styles.js

@@ -1,98 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { accentFillRest, controlCornerRadius, focusStrokeWidth, neutralForegroundRest, } from '../design-tokens';
-import { heightNumber } from '../styles';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-export const tabsStyles = (context, definition) => css `
-      ${display('grid')} :host {
-        box-sizing: border-box;
-        ${typeRampBase}
-        color: ${neutralForegroundRest};
-        grid-template-columns: auto 1fr auto;
-        grid-template-rows: auto 1fr;
-      }
-
-      .tablist {
-        display: grid;
-        grid-template-rows: calc(${heightNumber} * 1px); auto;
-        grid-template-columns: auto;
-        position: relative;
-        width: max-content;
-        align-self: end;
-      }
-
-      .start,
-      .end {
-        align-self: center;
-      }
-
-      .activeIndicator {
-        grid-row: 2;
-        grid-column: 1;
-        width: 20px;
-        height: 3px;
-        border-radius: calc(${controlCornerRadius} * 1px);
-        justify-self: center;
-        background: ${accentFillRest};
-      }
-
-      .activeIndicatorTransition {
-        transition: transform 0.2s ease-in-out;
-      }
-
-      .tabpanel {
-        grid-row: 2;
-        grid-column-start: 1;
-        grid-column-end: 4;
-        position: relative;
-      }
-
-      :host(.vertical) {
-        grid-template-rows: auto 1fr auto;
-        grid-template-columns: auto 1fr;
-      }
-
-      :host(.vertical) .tablist {
-        grid-row-start: 2;
-        grid-row-end: 2;
-        display: grid;
-        grid-template-rows: auto;
-        grid-template-columns: auto 1fr;
-        position: relative;
-        width: max-content;
-        justify-self: end;
-        align-self: flex-start;
-        width: 100%;
-      }
-
-      :host(.vertical) .tabpanel {
-        grid-column: 2;
-        grid-row-start: 1;
-        grid-row-end: 4;
-      }
-
-      :host(.vertical) .end {
-        grid-row: 3;
-      }
-
-      :host(.vertical) .activeIndicator {
-        grid-column: 1;
-        grid-row: 1;
-        width: 3px;
-        height: 20px;
-        margin-inline-start: calc(${focusStrokeWidth} * 1px);
-        border-radius: calc(${controlCornerRadius} * 1px);
-        align-self: center;
-        background: ${accentFillRest};
-      }
-
-      :host(.vertical) .activeIndicatorTransition {
-        transition: transform 0.2s linear;
-      }
-    `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .activeIndicator,
-        :host(.vertical) .activeIndicator {
-          background: ${SystemColors.Highlight};
-        }
-      `));

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

@@ -1,50 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-tabs",
-            "title": "Tabs",
-            "description": "The Fluent UI tabs element",
-            "attributes": [
-                {
-                    "name": "orientation",
-                    "title": "Orientation",
-                    "description": "The orientation of the tabs",
-                    "default": "horizontal",
-                    "required": false,
-                    "type": "string",
-                    "values": [{ "name": "horizontal" }, { "name": "vertical" }]
-                },
-                {
-                    "name": "activeid",
-                    "title": "Active ID",
-                    "description": "The HTML ID of the active tab",
-                    "required": false,
-                    "type": "string"
-                }
-            ],
-            "slots": [
-                {
-                    "name": "tab",
-                    "title": "Tab slot",
-                    "description": "Slotted tabs are rendered and associated to their respective tab panel by their order in the DOM"
-                },
-                {
-                    "name": "tabpanel",
-                    "title": "Tabpanel slot",
-                    "description": "Slotted tab panels are rendered and associated to their respective tabs by their order in the DOM"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned before the tablist"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the tablist"
-                }
-            ]
-        }
-    ]
-}

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

@@ -1,56 +0,0 @@
-import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { TextArea as FoundationTextArea, textAreaTemplate as template } from '@microsoft/fast-foundation';
-import { textAreaStyles as styles } from './text-area.styles';
-/**
- * The Fluent TextArea class
- * @internal
- */
-export class TextArea extends FoundationTextArea {
-    /**
-     * @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
-], TextArea.prototype, "appearance", void 0);
-/**
- * The Fluent Text Area Custom Element. Implements {@link @microsoft/fast-foundation#TextArea},
- * {@link @microsoft/fast-foundation#textAreaTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-text-area\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
- */
-export const fluentTextArea = TextArea.compose({
-    baseName: 'text-area',
-    baseClass: FoundationTextArea,
-    template,
-    styles,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
-});
-/**
- * Styles for TextArea
- * @public
- */
-export const textAreaStyles = styles;

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

@@ -1,56 +0,0 @@
-import { fluentTextArea } from './index';
-export default {
-    title: 'Components/Text Area',
-    component: fluentTextArea,
-    argTypes: {
-        appearance: {
-            defaultValue: 'outline',
-            options: ['filled', 'outline'],
-            control: { type: 'radio' },
-        },
-        autoFocus: {
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        readonly: {
-            control: { type: 'boolean' },
-        },
-        resize: {
-            options: ['both', 'horizontal', 'vertical'],
-            control: { type: 'select' },
-        },
-        required: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const TextAreaTemplate = ({ appearance, autoFocus, disabled, placeholder, readonly, resize, required }) => `
-<fluent-text-area
-  ${appearance ? `appearance="${appearance}"` : ''}
-  ${autoFocus ? 'autofocus' : ''}
-  ${disabled ? 'disabled' : ''}
-  ${placeholder ? `placeholder="${placeholder}"` : ''}
-  ${readonly ? 'readonly' : ''}
-  ${resize ? `resize="${resize}"` : ''}
-  ${required ? 'required' : ''}
-></fluent-text-area>`;
-export const TextArea = TextAreaTemplate.bind({});
-TextArea.args = {
-    placeholder: '',
-    autoFocus: false,
-    disabled: false,
-    readonly: false,
-    required: false,
-};
-const example = `
-<fluent-text-area appearance="outline"></fluent-text-area>
-`;
-TextArea.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

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

@@ -1,39 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { baseInputStyles, heightNumber, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, } from '../styles';
-import { appearanceBehavior } from '../utilities/behaviors';
-import { designUnit } from '../design-tokens';
-const logicalControlSelector = '.control';
-export const textAreaStyles = (context, definition) => css `
-    ${display('inline-flex')}
-
-    ${baseInputStyles(context, definition, logicalControlSelector)}
-
-    ${inputStateStyles(context, definition, logicalControlSelector)}
-
-    :host {
-      flex-direction: column;
-      vertical-align: bottom;
-    }
-
-    .control {
-      height: calc((${heightNumber} * 2) * 1px);
-      padding: calc(${designUnit} * 1.5px) calc(${designUnit} * 2px + 1px);
-    }
-
-    :host .control {
-      resize: none;
-    }
-
-    :host(.resize-both) .control {
-      resize: both;
-    }
-
-    :host(.resize-horizontal) .control {
-      resize: horizontal;
-    }
-
-    :host(.resize-vertical) .control {
-      resize: vertical;
-    }
-  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));

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,
-        },
-    },
-};