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

package/dist/esm/tabs/tab/index.js

@@ -1,26 +0,0 @@
-import { Tab, tabTemplate as template } from '@microsoft/fast-foundation';
-import { tabStyles as styles } from './tab.styles';
-/**
- * The Fluent Tab Custom Element. Implements {@link @microsoft/fast-foundation#Tab},
- * {@link @microsoft/fast-foundation#tabTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tab\>
- */
-export const fluentTab = Tab.compose({
-    baseName: 'tab',
-    template,
-    styles,
-});
-/**
- * Styles for Tab
- * @public
- */
-export const tabStyles = styles;
-/**
- * Tab base class
- * @public
- */
-export { Tab };

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

@@ -1,75 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { heightNumber } from '../../styles';
-import { controlCornerRadius, density, designUnit, neutralForegroundRest, strokeWidth, } from '../../design-tokens';
-import { typeRampBase } from '../../styles/patterns/type-ramp';
-import { focusTreatmentBase } from '../../styles/focus';
-export const tabStyles = (context, definition) => css `
-      ${display('inline-flex')} :host {
-        box-sizing: border-box;
-        ${typeRampBase}
-        height: calc((${heightNumber} + (${designUnit} * 2)) * 1px);
-        padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
-        color: ${neutralForegroundRest};
-        border-radius: calc(${controlCornerRadius} * 1px);
-        border: calc(${strokeWidth} * 1px) solid transparent;
-        align-items: center;
-        justify-content: center;
-        grid-row: 1 / 3;
-        cursor: pointer;
-      }
-
-      :host([aria-selected='true']) {
-        z-index: 2;
-      }
-
-      :host(:hover),
-      :host(:active) {
-        color: ${neutralForegroundRest};
-      }
-
-      :host(:${focusVisible}) {
-        ${focusTreatmentBase}
-      }
-
-      :host(.vertical) {
-        justify-content: start;
-        grid-column: 1 / 3;
-      }
-
-      :host(.vertical[aria-selected='true']) {
-        z-index: 2;
-      }
-
-      :host(.vertical:hover),
-      :host(.vertical:active) {
-        color: ${neutralForegroundRest};
-      }
-
-      :host(.vertical:hover[aria-selected='true']) {
-      }
-    `.withBehaviors(forcedColorsStylesheetBehavior(css `
-          :host {
-            forced-color-adjust: none;
-            border-color: transparent;
-            color: ${SystemColors.ButtonText};
-            fill: currentcolor;
-          }
-          :host(:hover),
-          :host(.vertical:hover),
-          :host([aria-selected='true']:hover) {
-            background: transparent;
-            color: ${SystemColors.Highlight};
-            fill: currentcolor;
-          }
-          :host([aria-selected='true']) {
-            background: transparent;
-            color: ${SystemColors.Highlight};
-            fill: currentcolor;
-          }
-          :host(:${focusVisible}) {
-            background: transparent;
-            outline-color: ${SystemColors.ButtonText};
-          }
-        `));

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

@@ -1,17 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-tab",
-            "title": "Tab",
-            "description": "The Fluent UI tab element",
-            "attributes": [],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/tabs/tab-panel/index.js

@@ -1,26 +0,0 @@
-import { TabPanel, tabPanelTemplate as template } from '@microsoft/fast-foundation';
-import { tabPanelStyles as styles } from './tab-panel.styles';
-/**
- * The Fluent Tab Panel Custom Element. Implements {@link @microsoft/fast-foundation#TabPanel},
- * {@link @microsoft/fast-foundation#tabPanelTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-tab-panel\>
- */
-export const fluentTabPanel = TabPanel.compose({
-    baseName: 'tab-panel',
-    template,
-    styles,
-});
-/**
- * Styles for TabPanel
- * @public
- */
-export const tabPanelStyles = styles;
-/**
- * Tab panel base styles
- * @public
- */
-export { TabPanel };

package/dist/esm/tabs/tab-panel/tab-panel.styles.js

@@ -1,11 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { density, designUnit } from '../../design-tokens';
-import { typeRampBase } from '../../styles/patterns/type-ramp';
-export const tabPanelStyles = (context, definition) => css `
-  ${display('block')} :host {
-    box-sizing: border-box;
-    ${typeRampBase}
-    padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
-  }
-`;

package/dist/esm/tabs/tab-panel/tab-panel.vscode.definition.json

@@ -1,17 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-tab-panel",
-            "title": "Tab panel",
-            "description": "The Fluent UI tab-panel element",
-            "attributes": [],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot"
-                }
-            ]
-        }
-    ]
-}

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)));