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

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

package/dist/esm/tooltip/tooltip.styles.js

@@ -1,107 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { AnchoredRegion, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
-import { elevationShadowTooltip } from '../styles/index';
-import { controlCornerRadius, fillColor, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-export const tooltipStyles = (context, definition) => css `
-    :host {
-      position: relative;
-      contain: layout;
-      overflow: visible;
-      height: 0;
-      width: 0;
-      z-index: 10000;
-    }
-
-    .tooltip {
-      box-sizing: border-box;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
-      background: ${fillColor};
-      color: ${neutralForegroundRest};
-      padding: 4px 12px;
-      height: fit-content;
-      width: fit-content;
-      ${typeRampBase}
-      white-space: nowrap;
-      box-shadow: ${elevationShadowTooltip};
-    }
-
-    ${context.tagFor(AnchoredRegion)} {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      overflow: visible;
-      flex-direction: row;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.right,
-    ${context.tagFor(AnchoredRegion)}.left {
-      flex-direction: column;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.top .tooltip::after,
-    ${context.tagFor(AnchoredRegion)}.bottom .tooltip::after,
-    ${context.tagFor(AnchoredRegion)}.left .tooltip::after,
-    ${context.tagFor(AnchoredRegion)}.right .tooltip::after {
-      content: '';
-      width: 12px;
-      height: 12px;
-      background: ${fillColor};
-      border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
-      border-left: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
-      position: absolute;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.top .tooltip::after {
-      transform: translateX(-50%) rotate(225deg);
-      bottom: 5px;
-      left: 50%;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.top .tooltip {
-      margin-bottom: 12px;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.bottom .tooltip::after {
-      transform: translateX(-50%) rotate(45deg);
-      top: 5px;
-      left: 50%;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.bottom .tooltip {
-      margin-top: 12px;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.left .tooltip::after {
-      transform: translateY(-50%) rotate(135deg);
-      top: 50%;
-      right: 5px;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.left .tooltip {
-      margin-right: 12px;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.right .tooltip::after {
-      transform: translateY(-50%) rotate(-45deg);
-      top: 50%;
-      left: 5px;
-    }
-
-    ${context.tagFor(AnchoredRegion)}.right .tooltip {
-      margin-left: 12px;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host([disabled]) {
-          opacity: 1;
-        }
-        ${context.tagFor(AnchoredRegion)}.top .tooltip::after,
-        ${context.tagFor(AnchoredRegion)}.bottom .tooltip::after,
-        ${context.tagFor(AnchoredRegion)}.left .tooltip::after,
-        ${context.tagFor(AnchoredRegion)}.right .tooltip::after {
-          content: '';
-          width: unset;
-          height: unset;
-        }
-      `));

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

@@ -1,56 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-tooltip",
-            "title": "Tooltip",
-            "description": "The Fluent UI tooltip element",
-            "attributes": [
-                {
-                    "name": "visible",
-                    "title": "Visible",
-                    "description": "Sets whether the tooltip is visible or not",
-                    "type": "boolean",
-                    "required": false
-                },
-                {
-                    "name": "anchor",
-                    "title": "Anchor ID",
-                    "description": "The HTML ID of the element the tooltip is positioned relative to",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "delay",
-                    "title": "Delay",
-                    "description": "The delay in milliseconds before a tooltip is shown after a hover event",
-                    "type": "number",
-                    "default": 300,
-                    "required": false
-                },
-                {
-                    "name": "position",
-                    "title": "Position",
-                    "description": "Controls the placement of the tooltip relative to the configured 'Anchor ID'",
-                    "values": [
-                        { "name": "top" },
-                        { "name": "right" },
-                        { "name": "bottom" },
-                        { "name": "left" },
-                        { "name": "start" },
-                        { "name": "end" }
-                    ],
-                    "type": "string",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The tooltip content"
-                }
-            ]
-        }
-    ]
-}

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

@@ -1,32 +0,0 @@
-import { treeItemTemplate as template, TreeItem } from '@microsoft/fast-foundation';
-import { treeItemStyles as styles } from './tree-item.styles';
-/**
- * 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 const fluentTreeItem = TreeItem.compose({
-    baseName: 'tree-item',
-    template,
-    styles,
-    expandCollapseGlyph: `
-    <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 TreeItem
- * @public
- */
-export const treeItemStyles = styles;
-/**
- * Tree item base class
- * @public
- */
-export { TreeItem };

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

@@ -1,34 +0,0 @@
-import { fluentTreeItem } from './index';
-export default {
-    title: 'Components/Tree Item',
-    component: fluentTreeItem,
-    argTypes: {
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        selected: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const TreeItemTemplate = ({ disabled, label, selected }) => `
-  <fluent-tree-item
-    ${disabled ? 'disabled' : ''}
-    ${selected ? 'selected' : ''}
-  >${label}</fluent-tree-item>`;
-export const TreeItem = TreeItemTemplate.bind({});
-TreeItem.args = {
-    label: 'Tree Item',
-    disabled: false,
-    selected: false,
-};
-const example = `
-<fluent-tree-item>Tree item</fluent-tree-item>
-`;
-TreeItem.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};