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

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/index.js

@@ -1,31 +0,0 @@
-import { Switch, switchTemplate as template } from '@microsoft/fast-foundation';
-import { switchStyles as styles } from './switch.styles';
-/**
- * The Fluent Switch Custom Element. Implements {@link @microsoft/fast-foundation#Switch},
- * {@link @microsoft/fast-foundation#SwitchTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-switch\>
- */
-export const fluentSwitch = Switch.compose({
-    baseName: 'switch',
-    template,
-    styles,
-    switch: `
-    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-      <rect x="2" y="2" width="12" height="12" rx="6"/>
-    </svg>
-  `,
-});
-/**
- * Styles for Switch
- * @public
- */
-export const switchStyles = styles;
-/**
- * Switch Base class
- * @public
- */
-export { Switch };

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.styles.js

@@ -1,213 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { DirectionalStyleSheetBehavior, heightNumber } from '../styles';
-import { accentFillActive, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { focusTreatmentTight } from '../styles/focus';
-export const switchStyles = (context, definition) => css `
-    :host([hidden]) {
-      display: none;
-    }
-
-    ${display('inline-flex')} :host {
-      align-items: center;
-      outline: none;
-      font-family: ${bodyFont};
-      ${
-/*
- * Chromium likes to select label text or the default slot when
- * the checkbox is clicked. Maybe there is a better solution here?
- */ ''} user-select: none;
-    }
-
-    :host(.disabled) {
-      opacity: ${disabledOpacity};
-    }
-
-    :host(.disabled) .label,
-    :host(.readonly) .label,
-    :host(.disabled) .switch,
-    :host(.readonly) .switch,
-    :host(.disabled) .status-message,
-    :host(.readonly) .status-message {
-      cursor: ${disabledCursor};
-    }
-
-    .switch {
-      position: relative;
-      box-sizing: border-box;
-      width: calc(((${heightNumber} / 2) + ${designUnit}) * 2px);
-      height: calc(((${heightNumber} / 2) + ${designUnit}) * 1px);
-      background: ${neutralFillInputAltRest};
-      border-radius: calc(${heightNumber} * 1px);
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};
-      cursor: pointer;
-    }
-
-    :host(:not(.disabled):hover) .switch {
-      background: ${neutralFillInputAltHover};
-      border-color: ${neutralStrokeStrongHover};
-    }
-
-    :host(:not(.disabled):active) .switch {
-      background: ${neutralFillInputAltActive};
-      border-color: ${neutralStrokeStrongActive};
-    }
-
-    :host(:${focusVisible}) .switch {
-      ${focusTreatmentTight}
-      background: ${neutralFillInputAltFocus};
-    }
-
-    :host(.checked) .switch {
-      background: ${accentFillRest};
-      border-color: transparent;
-    }
-
-    :host(.checked:not(.disabled):hover) .switch {
-      background: ${accentFillHover};
-      border-color: transparent;
-    }
-
-    :host(.checked:not(.disabled):active) .switch {
-      background: ${accentFillActive};
-      border-color: transparent;
-    }
-
-    slot[name='switch'] {
-      position: absolute;
-      display: flex;
-      border: 1px solid transparent; /* Spacing included in the transform reference box */
-      fill: ${neutralForegroundRest};
-      transition: all 0.2s ease-in-out;
-    }
-
-    .status-message {
-      color: ${neutralForegroundRest};
-      cursor: pointer;
-      ${typeRampBase}
-    }
-
-    .label__hidden {
-      display: none;
-      visibility: hidden;
-    }
-
-    .label {
-      color: ${neutralForegroundRest};
-      ${typeRampBase}
-      margin-inline-end: calc(${designUnit} * 2px + 2px);
-      cursor: pointer;
-    }
-
-    ::slotted([slot="checked-message"]),
-    ::slotted([slot="unchecked-message"]) {
-        margin-inline-start: calc(${designUnit} * 2px + 2px);
-    }
-
-    :host(.checked) .switch {
-      background: ${accentFillRest};
-    }
-
-    :host(.checked) .switch slot[name='switch'] {
-      fill: ${foregroundOnAccentRest};
-      filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15));
-    }
-
-    :host(.checked:not(.disabled)) .switch:hover {
-      background: ${accentFillHover};
-    }
-
-    :host(.checked:not(.disabled)) .switch:hover slot[name='switch'] {
-      fill: ${foregroundOnAccentHover};
-    }
-
-    :host(.checked:not(.disabled)) .switch:active {
-      background: ${accentFillActive};
-    }
-
-    :host(.checked:not(.disabled)) .switch:active slot[name='switch'] {
-      fill: ${foregroundOnAccentActive};
-    }
-
-    .unchecked-message {
-      display: block;
-    }
-
-    .checked-message {
-      display: none;
-    }
-
-    :host(.checked) .unchecked-message {
-      display: none;
-    }
-
-    :host(.checked) .checked-message {
-      display: block;
-    }
-  `.withBehaviors(new DirectionalStyleSheetBehavior(css `
-        slot[name='switch'] {
-          left: 0;
-        }
-
-        :host(.checked) slot[name='switch'] {
-          left: 100%;
-          transform: translateX(-100%);
-        }
-      `, css `
-        slot[name='switch'] {
-          right: 0;
-        }
-
-        :host(.checked) slot[name='switch'] {
-          right: 100%;
-          transform: translateX(100%);
-        }
-      `), forcedColorsStylesheetBehavior(css `
-        :host(:not(.disabled)) .switch slot[name='switch'] {
-          forced-color-adjust: none;
-          fill: ${SystemColors.FieldText};
-        }
-        .switch {
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.FieldText};
-        }
-        :host(.checked) .switch {
-          background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.Highlight};
-        }
-        :host(:not(.disabled):hover) .switch ,
-        :host(:not(.disabled):active) .switch,
-        :host(.checked:not(.disabled):hover) .switch {
-          background: ${SystemColors.HighlightText};
-          border-color: ${SystemColors.Highlight};
-        }
-        :host(.checked:not(.disabled)) .switch slot[name="switch"] {
-          fill: ${SystemColors.HighlightText};
-        }
-        :host(.checked:not(.disabled):hover) .switch slot[name='switch'] {
-          fill: ${SystemColors.Highlight};
-        }
-        :host(:${focusVisible}) .switch {
-          forced-color-adjust: none;
-          background: ${SystemColors.Field}; 
-          border-color: ${SystemColors.Highlight};
-          outline-color: ${SystemColors.FieldText};
-        }
-        :host(.disabled) {
-          opacity: 1;
-        }
-        :host(.disabled) slot[name='switch'] {
-          forced-color-adjust: none;
-          fill: ${SystemColors.GrayText};
-        }
-        :host(.disabled) .switch {
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.GrayText};
-        }
-        .status-message,
-        .label {
-          color: ${SystemColors.FieldText};
-        }
-      `));

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