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

package/dist/esm/styles/patterns/input.styles.js

@@ -1,227 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { DesignToken, disabledCursor, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { accentFillRest, controlCornerRadius, disabledOpacity, focusStrokeWidth, neutralFillInputFocus, neutralFillInputHover, neutralFillInputRecipe, neutralFillInputRest, neutralFillSecondaryFocus, neutralFillSecondaryHover, neutralFillSecondaryRecipe, neutralFillSecondaryRest, neutralForegroundHintRecipe, neutralForegroundRest, neutralStrokeInputHover, neutralStrokeInputRest, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
-import { typeRampBase } from '../patterns/type-ramp';
-import { heightNumber } from '../size';
-import { focusTreatmentBase } from '../focus';
-const placeholderRest = DesignToken.create('input-placeholder-rest').withDefault((target) => {
-    const baseRecipe = neutralFillInputRecipe.getValueFor(target);
-    const hintRecipe = neutralForegroundHintRecipe.getValueFor(target);
-    return hintRecipe.evaluate(target, baseRecipe.evaluate(target).rest);
-});
-const placeholderHover = DesignToken.create('input-placeholder-hover').withDefault((target) => {
-    const baseRecipe = neutralFillInputRecipe.getValueFor(target);
-    const hintRecipe = neutralForegroundHintRecipe.getValueFor(target);
-    return hintRecipe.evaluate(target, baseRecipe.evaluate(target).hover);
-});
-const filledPlaceholderRest = DesignToken.create('input-filled-placeholder-rest').withDefault((target) => {
-    const baseRecipe = neutralFillSecondaryRecipe.getValueFor(target);
-    const hintRecipe = neutralForegroundHintRecipe.getValueFor(target);
-    return hintRecipe.evaluate(target, baseRecipe.evaluate(target).rest);
-});
-const filledPlaceholderHover = DesignToken.create('input-filled-placeholder-hover').withDefault((target) => {
-    const baseRecipe = neutralFillSecondaryRecipe.getValueFor(target);
-    const hintRecipe = neutralForegroundHintRecipe.getValueFor(target);
-    return hintRecipe.evaluate(target, baseRecipe.evaluate(target).hover);
-});
-/**
- * The base styles for input controls, without `appearance` visual differences.
- *
- * @internal
- */
-export const baseInputStyles = (context, definition, logicalControlSelector) => css `
-  :host {
-    ${typeRampBase}
-    color: ${neutralForegroundRest};
-    fill: currentcolor;
-    user-select: none;
-    position: relative;
-  }
-
-  ${logicalControlSelector} {
-    box-sizing: border-box;
-    position: relative;
-    color: inherit;
-    border: calc(${strokeWidth} * 1px) solid transparent;
-    border-radius: calc(${controlCornerRadius} * 1px);
-    height: calc(${heightNumber} * 1px);
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-  }
-
-  .control {
-    width: 100%;
-    outline: none;
-  }
-
-  .label {
-    display: block;
-    color: ${neutralForegroundRest};
-    cursor: pointer;
-    ${typeRampBase}
-    margin-bottom: 4px;
-  }
-
-  .label__hidden {
-    display: none;
-    visibility: hidden;
-  }
-
-  :host([disabled]) ${logicalControlSelector},
-  :host([readonly]) ${logicalControlSelector},
-  :host([disabled]) .label,
-  :host([readonly]) .label,
-  :host([disabled]) .control,
-  :host([readonly]) .control {
-    cursor: ${disabledCursor};
-  }
-
-  :host([disabled]) {
-    opacity: ${disabledOpacity};
-  }
-`;
-/**
- * The styles for active and focus interactions for input controls.
- *
- * @internal
- */
-export const inputStateStyles = (context, definition, logicalControlSelector) => css `
-  @media (forced-colors: none) {
-    :host(:not([disabled]):active)::after {
-      left: 50%;
-      width: 40%;
-      transform: translateX(-50%);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    :host(:not([disabled]):focus-within)::after {
-      left: 0;
-      width: 100%;
-      transform: none;
-    }
-
-    :host(:not([disabled]):active)::after,
-    :host(:not([disabled]):focus-within:not(:active))::after {
-      content: '';
-      position: absolute;
-      height: calc(${focusStrokeWidth} * 1px);
-      bottom: 0;
-      border-bottom: calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};
-      border-bottom-left-radius: calc(${controlCornerRadius} * 1px);
-      border-bottom-right-radius: calc(${controlCornerRadius} * 1px);
-      z-index: 2;
-      transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
-    }
-  }
-`;
-/**
- * The visual styles for inputs with `appearance='outline'`.
- *
- * @internal
- */
-export const inputOutlineStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css `
-  ${logicalControlSelector} {
-    background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
-      border-box ${neutralStrokeInputRest};
-  }
-
-  :host(${interactivitySelector}:hover) ${logicalControlSelector} {
-    background: padding-box linear-gradient(${neutralFillInputHover}, ${neutralFillInputHover}),
-      border-box ${neutralStrokeInputHover};
-  }
-
-  :host(:not([disabled]):focus-within) ${logicalControlSelector} {
-    background: padding-box linear-gradient(${neutralFillInputFocus}, ${neutralFillInputFocus}),
-      border-box ${neutralStrokeInputRest};
-  }
-  
-  :host([disabled]) ${logicalControlSelector} {
-    background: padding-box linear-gradient(${neutralFillInputRest}, ${neutralFillInputRest}),
-      border-box ${neutralStrokeRest};
-  }
-
-  .control::placeholder {
-    color: ${placeholderRest};
-  }
-
-  :host(${interactivitySelector}:hover) .control::placeholder {
-    color: ${placeholderHover};
-  }
-`;
-/**
- * The visual styles for inputs with `appearance='filled'`.
- *
- * @internal
- */
-export const inputFilledStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css `
-  ${logicalControlSelector} {
-    background: ${neutralFillSecondaryRest};
-  }
-
-  :host(${interactivitySelector}:hover) ${logicalControlSelector} {
-    background: ${neutralFillSecondaryHover};
-  }
-
-  :host(:not([disabled]):focus-within) ${logicalControlSelector} {
-    background: ${neutralFillSecondaryFocus};
-  }
-
-  :host([disabled]) ${logicalControlSelector} {
-    background: ${neutralFillSecondaryRest};
-  }
-
-  .control::placeholder {
-    color: ${filledPlaceholderRest};
-  }
-
-  :host(${interactivitySelector}:hover) .control::placeholder {
-    color: ${filledPlaceholderHover};
-  }
-`;
-/**
- * @internal
- */
-export const inputForcedColorStyles = (context, definition, logicalControlSelector, interactivitySelector = ':not([disabled]):not(:focus-within)') => css `
-  :host {
-    color: ${SystemColors.ButtonText};
-  }
-
-  ${logicalControlSelector} {
-    background: ${SystemColors.ButtonFace};
-    border-color: ${SystemColors.ButtonText};
-  }
-
-  :host(${interactivitySelector}:hover) ${logicalControlSelector},
-  :host(:not([disabled]):focus-within) ${logicalControlSelector} {
-    border-color: ${SystemColors.Highlight};
-  }
-
-  :host([disabled]) ${logicalControlSelector} {
-    opacity: 1;
-    background: ${SystemColors.ButtonFace};
-    border-color: ${SystemColors.GrayText};
-  }
-
-  .control::placeholder,
-  :host(${interactivitySelector}:hover) .control::placeholder {
-    color: ${SystemColors.CanvasText};
-  }
-
-  :host(:not([disabled]):focus) ${logicalControlSelector} {
-    ${focusTreatmentBase}
-    outline-color: ${SystemColors.Highlight};
-  }
-
-  :host([disabled]) {
-    opacity: 1;
-    color: ${SystemColors.GrayText};
-  }
-
-  :host([disabled]) ::placeholder,
-  :host([disabled]) ::-webkit-input-placeholder {
-    color: ${SystemColors.GrayText};
-  }
-`;

package/dist/esm/styles/patterns/type-ramp.js

@@ -1,74 +0,0 @@
-import { cssPartial } from '@microsoft/fast-element';
-import { bodyFont, typeRampBaseFontSize, typeRampBaseFontVariations, typeRampBaseLineHeight, typeRampMinus1FontSize, typeRampMinus1FontVariations, typeRampMinus1LineHeight, typeRampMinus2FontSize, typeRampMinus2FontVariations, typeRampMinus2LineHeight, typeRampPlus1FontSize, typeRampPlus1FontVariations, typeRampPlus1LineHeight, typeRampPlus2FontSize, typeRampPlus2FontVariations, typeRampPlus2LineHeight, typeRampPlus3FontSize, typeRampPlus3FontVariations, typeRampPlus3LineHeight, typeRampPlus4FontSize, typeRampPlus4FontVariations, typeRampPlus4LineHeight, typeRampPlus5FontSize, typeRampPlus5FontVariations, typeRampPlus5LineHeight, typeRampPlus6FontSize, typeRampPlus6FontVariations, typeRampPlus6LineHeight, } from '../../design-tokens';
-/** @public */
-export const typeRampBase = cssPartial `
-  font-family: ${bodyFont};
-  font-size: ${typeRampBaseFontSize};
-  line-height: ${typeRampBaseLineHeight};
-  font-weight: initial;
-  font-variation-settings: ${typeRampBaseFontVariations};
-`;
-/** @public */
-export const typeRampMinus1 = cssPartial `
-  font-family: ${bodyFont};
-  font-size: ${typeRampMinus1FontSize};
-  line-height: ${typeRampMinus1LineHeight};
-  font-weight: initial;
-  font-variation-settings: ${typeRampMinus1FontVariations};
-`;
-/** @public */
-export const typeRampMinus2 = cssPartial `
-  font-family: ${bodyFont};
-  font-size: ${typeRampMinus2FontSize};
-  line-height: ${typeRampMinus2LineHeight};
-  font-weight: initial;
-  font-variation-settings: ${typeRampMinus2FontVariations};
-`;
-/** @public */
-export const typeRampPlus1 = cssPartial `
-  font-family: ${bodyFont};
-  font-size: ${typeRampPlus1FontSize};
-  line-height: ${typeRampPlus1LineHeight};
-  font-weight: initial;
-  font-variation-settings: ${typeRampPlus1FontVariations};
-`;
-/** @public */
-export const typeRampPlus2 = cssPartial `
-  font-family: ${bodyFont};
-  font-size: ${typeRampPlus2FontSize};
-  line-height: ${typeRampPlus2LineHeight};
-  font-weight: initial;
-  font-variation-settings: ${typeRampPlus2FontVariations};
-`;
-/** @public */
-export const typeRampPlus3 = cssPartial `
-  font-family: ${bodyFont};
-  font-size: ${typeRampPlus3FontSize};
-  line-height: ${typeRampPlus3LineHeight};
-  font-weight: initial;
-  font-variation-settings: ${typeRampPlus3FontVariations};
-`;
-/** @public */
-export const typeRampPlus4 = cssPartial `
-  font-family: ${bodyFont};
-  font-size: ${typeRampPlus4FontSize};
-  line-height: ${typeRampPlus4LineHeight};
-  font-weight: initial;
-  font-variation-settings: ${typeRampPlus4FontVariations};
-`;
-/** @public */
-export const typeRampPlus5 = cssPartial `
-  font-family: ${bodyFont};
-  font-size: ${typeRampPlus5FontSize};
-  line-height: ${typeRampPlus5LineHeight};
-  font-weight: initial;
-  font-variation-settings: ${typeRampPlus5FontVariations};
-`;
-/** @public */
-export const typeRampPlus6 = cssPartial `
-  font-family: ${bodyFont};
-  font-size: ${typeRampPlus6FontSize};
-  line-height: ${typeRampPlus6LineHeight};
-  font-weight: initial;
-  font-variation-settings: ${typeRampPlus6FontVariations};
-`;

package/dist/esm/styles/size.js

@@ -1,9 +0,0 @@
-import { cssPartial } from '@microsoft/fast-element';
-import { baseHeightMultiplier, density, designUnit } from '../design-tokens';
-/**
- * A formula to retrieve the control height.
- * Use this as the value of any CSS property that
- * accepts a pixel size.
- * @public
- */
-export const heightNumber = cssPartial `(${baseHeightMultiplier} + ${density}) * ${designUnit}`;

package/dist/esm/switch/switch.stories.js

@@ -1,42 +0,0 @@
-import { fluentSwitch } from './index';
-export default {
-    title: 'Components/Switch',
-    component: fluentSwitch,
-    argTypes: {
-        checked: {
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const SwitchTemplate = ({ checked, disabled, label }) => `
-<fluent-switch
-  ${checked ? 'checked' : ''}
-  ${disabled ? 'disabled' : ''}
->${label}
-  <span slot="checked-message">On</span>
-  <span slot="unchecked-message">Off</span>
-</fluent-switch>
-`;
-export const Switch = SwitchTemplate.bind({});
-Switch.args = {
-    label: 'Label',
-    checked: false,
-    disabled: false,
-};
-const example = `
-<fluent-switch>
-  <span slot="checked-message">On</span>
-  <span slot="unchecked-message">Off</span>
-  <label for="direction-switch">Captions:</label>
-</fluent-switch>
-`;
-Switch.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

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

@@ -1,68 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-switch",
-            "title": "Switch",
-            "description": "The Fluent UI switch element",
-            "attributes": [
-                {
-                    "name": "checked",
-                    "title": "Checked",
-                    "description": "Provides the default checked value",
-                    "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 switch",
-                    "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 switch represents its visual label"
-                },
-                {
-                    "name": "checked-message",
-                    "title": "Checked message slot",
-                    "description": "Visible content representing the checked state"
-                },
-                {
-                    "name": "unchecked-message",
-                    "title": "Unchecked message slot",
-                    "description": "Visible content representing the unchecked state"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/tabs/index.js

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

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"
-                }
-            ]
-        }
-    ]
-}