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

package/dist/esm/number-field/number-field.styles.js

@@ -1,71 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { baseInputStyles, inputFilledStyles, inputForcedColorStyles, inputOutlineStyles, inputStateStyles, } from '../styles/index';
-import { appearanceBehavior } from '../utilities/behaviors';
-import { designUnit } from '../design-tokens';
-const logicalControlSelector = '.root';
-export const numberFieldStyles = (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 {
-      margin: auto;
-      fill: currentcolor;
-    }
-
-    .start {
-      display: flex;
-      margin-inline-start: 11px;
-    }
-
-    .end {
-      display: flex;
-      margin-inline-end: 11px;
-    }
-
-    .controls {
-      opacity: 0;
-      position: relative;
-      top: -1px;
-      z-index: 3;
-    }
-
-    :host(:hover:not([disabled])) .controls,
-    :host(:focus-within:not([disabled])) .controls {
-      opacity: 1;
-    }
-
-    .step-up,
-    .step-down {
-      display: flex;
-      padding: 0 8px;
-      cursor: pointer;
-    }
-
-    .step-up {
-      padding-top: 3px;
-    }
-  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));

package/dist/esm/number-field/number-field.vscode.definition.json

@@ -1,167 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-number-field",
-            "title": "Number field",
-            "description": "The Fluent UI number-field element",
-            "attributes": [
-                {
-                    "name": "appearance",
-                    "title": "Appearance",
-                    "description": "The number field's visual treatment",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "filled"
-                        },
-                        {
-                            "name": "outline"
-                        }
-                    ],
-                    "default": "outline",
-                    "required": false
-                },
-                {
-                    "name": "value",
-                    "title": "Value",
-                    "description": "The HTML value attribute of the number field",
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "name": "appearance",
-                    "title": "Appearance",
-                    "description": "The number 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": "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": "size",
-                    "title": "Size",
-                    "description": "Sets the width of the element to a specified number of characters",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "name",
-                    "title": "Name",
-                    "description": "This element's value will be surfaced during form submission under the provided name",
-                    "type": "string",
-                    "default": ""
-                },
-                {
-                    "name": "required",
-                    "title": "Required",
-                    "description": "Require the field to be completed prior to form submission",
-                    "type": "boolean",
-                    "default": false
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Sets the disabled state of the text field",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "hide-step",
-                    "title": "Hide step",
-                    "description": "Hides the step controls",
-                    "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
-                },
-                {
-                    "name": "max",
-                    "title": "Maximum",
-                    "description": "The maximum value",
-                    "type": "string",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "min",
-                    "title": "Minimum",
-                    "description": "The minimum value",
-                    "type": "string",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "step",
-                    "title": "Increment",
-                    "description": "Amount to increment or decrement the value by",
-                    "type": "string",
-                    "default": false,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the number field 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/progress/index.js

@@ -1,2 +0,0 @@
-export * from './progress/';
-export * from './progress-ring/';

package/dist/esm/progress/progress/index.js

@@ -1,33 +0,0 @@
-import { BaseProgress, progressTemplate as template } from '@microsoft/fast-foundation';
-import { progressStyles as styles } from './progress.styles';
-/**
- * Progress base class
- * @public
- */
-export class Progress extends BaseProgress {
-}
-/**
- * The Fluent Progress Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
- * {@link @microsoft/fast-foundation#progressTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-progress\>
- */
-export const fluentProgress = Progress.compose({
-    baseName: 'progress',
-    template,
-    styles,
-    indeterminateIndicator1: `
-    <span class="indeterminate-indicator-1" part="indeterminate-indicator-1"></span>
-  `,
-    indeterminateIndicator2: `
-    <span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>
-  `,
-});
-/**
- * Styles for Progress
- * @public
- */
-export const progressStyles = styles;

package/dist/esm/progress/progress/progress.stories.js

@@ -1,59 +0,0 @@
-import { fluentProgress } from './index';
-export default {
-    title: 'Components/Progress',
-    component: fluentProgress,
-    argTypes: {
-        paused: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const ProgressTemplate = ({ paused, value }) => `
-  <fluent-progress
-    ${paused ? `paused="${paused}"` : ''}
-    ${value ? `value=${value}` : ''}
-  ></fluent-progress>
-`;
-export const Progress = ProgressTemplate.bind({});
-Progress.args = {
-    paused: false,
-    value: 50,
-};
-const defaultExample = `
-<fluent-progress min="0" max="100" value="${Progress.args.value}"></fluent-progress>
-`;
-Progress.parameters = {
-    docs: {
-        source: {
-            code: defaultExample,
-        },
-    },
-};
-export const ProgressAnimated = ProgressTemplate.bind({});
-ProgressAnimated.args = {
-    paused: false,
-};
-export const ProgressPaused = ProgressTemplate.bind({});
-ProgressPaused.args = {
-    paused: true,
-};
-const animatedExample = `
-<fluent-progress></fluent-progress>
-`;
-const pausedExample = `
-<fluent-progress paused></fluent-progress>
-`;
-ProgressAnimated.parameters = {
-    docs: {
-        source: {
-            code: animatedExample,
-        },
-    },
-};
-ProgressPaused.parameters = {
-    docs: {
-        source: {
-            code: pausedExample,
-        },
-    },
-};

package/dist/esm/progress/progress/progress.styles.js

@@ -1,119 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { accentFillRest, designUnit, neutralForegroundHint, neutralStrokeStrongRest, strokeWidth, } from '../../design-tokens';
-export const progressStyles = (context, definition) => css `
-    ${display('flex')} :host {
-      align-items: center;
-      height: calc((${strokeWidth} * 3) * 1px);
-    }
-
-    .progress {
-      background-color: ${neutralStrokeStrongRest};
-      border-radius: calc(${designUnit} * 1px);
-      width: 100%;
-      height: calc(${strokeWidth} * 1px);
-      display: flex;
-      align-items: center;
-      position: relative;
-    }
-
-    .determinate {
-      background-color: ${accentFillRest};
-      border-radius: calc(${designUnit} * 1px);
-      height: calc((${strokeWidth} * 3) * 1px);
-      transition: all 0.2s ease-in-out;
-      display: flex;
-    }
-
-    .indeterminate {
-      height: calc((${strokeWidth} * 3) * 1px);
-      border-radius: calc(${designUnit} * 1px);
-      display: flex;
-      width: 100%;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .indeterminate-indicator-1 {
-      position: absolute;
-      opacity: 0;
-      height: 100%;
-      background-color: ${accentFillRest};
-      border-radius: calc(${designUnit} * 1px);
-      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-      width: 40%;
-      animation: indeterminate-1 2s infinite;
-    }
-
-    .indeterminate-indicator-2 {
-      position: absolute;
-      opacity: 0;
-      height: 100%;
-      background-color: ${accentFillRest};
-      border-radius: calc(${designUnit} * 1px);
-      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-      width: 60%;
-      animation: indeterminate-2 2s infinite;
-    }
-
-    :host(.paused) .indeterminate-indicator-1,
-    :host(.paused) .indeterminate-indicator-2 {
-      animation: none;
-      background-color: ${neutralForegroundHint};
-      width: 100%;
-      opacity: 1;
-    }
-
-    :host(.paused) .determinate {
-      background-color: ${neutralForegroundHint};
-    }
-
-    @keyframes indeterminate-1 {
-      0% {
-        opacity: 1;
-        transform: translateX(-100%);
-      }
-      70% {
-        opacity: 1;
-        transform: translateX(300%);
-      }
-      70.01% {
-        opacity: 0;
-      }
-      100% {
-        opacity: 0;
-        transform: translateX(300%);
-      }
-    }
-
-    @keyframes indeterminate-2 {
-      0% {
-        opacity: 0;
-        transform: translateX(-150%);
-      }
-      29.99% {
-        opacity: 0;
-      }
-      30% {
-        opacity: 1;
-        transform: translateX(-150%);
-      }
-      100% {
-        transform: translateX(166.66%);
-        opacity: 1;
-      }
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .indeterminate-indicator-1,
-        .indeterminate-indicator-2,
-        .determinate,
-        .progress {
-          background-color: ${SystemColors.ButtonText};
-        }
-        :host(.paused) .indeterminate-indicator-1,
-        :host(.paused) .indeterminate-indicator-2,
-        :host(.paused) .determinate {
-          background-color: ${SystemColors.GrayText};
-        }
-      `));

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

@@ -1,56 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-progress",
-            "title": "Progress",
-            "description": "The Fluent UI progress element",
-            "attributes": [
-                {
-                    "name": "value",
-                    "title": "Value",
-                    "description": "Value between 1 and 100 to represent the progress visually and to assistive technologies",
-                    "default": "",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "min",
-                    "title": "Minimum",
-                    "description": "The minimum value",
-                    "default": 0,
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "max",
-                    "title": "Maximum",
-                    "description": "The maximum value",
-                    "default": 100,
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "name": "paused",
-                    "title": "Paused",
-                    "description": "Sets the paused state of the progress component",
-                    "default": false,
-                    "required": false,
-                    "type": "boolean"
-                }
-            ],
-            "slots": [
-                {
-                    "name": "determinate",
-                    "title": "Determinate slot",
-                    "description": "Slot to provide custom visual representations of the determinate progress bar"
-                },
-                {
-                    "name": "indeterminate",
-                    "title": "Indeterminate slot",
-                    "description": "Slot to provide custom visual representations of the indeterminate progress bar"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/progress/progress-ring/index.js

@@ -1,45 +0,0 @@
-import { BaseProgress, progressRingTemplate as template } from '@microsoft/fast-foundation';
-import { progressRingStyles as styles } from './progress-ring.styles';
-/**
- * Progress Ring base class
- * @public
- */
-export class ProgressRing extends BaseProgress {
-}
-/**
- * The Fluent Progress Ring Element. Implements {@link @microsoft/fast-foundation#BaseProgress},
- * {@link @microsoft/fast-foundation#progressRingTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-progress-ring\>
- */
-export const fluentProgressRing = ProgressRing.compose({
-    baseName: 'progress-ring',
-    template,
-    styles,
-    indeterminateIndicator: `
-    <svg class="progress" part="progress" viewBox="0 0 16 16">
-        <circle
-            class="background"
-            part="background"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-        <circle
-            class="indeterminate-indicator-1"
-            part="indeterminate-indicator-1"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-    </svg>
-  `,
-});
-/**
- * Styles for ProgressRing
- * @public
- */
-export const progressRingStyles = styles;

package/dist/esm/progress/progress-ring/progress-ring.stories.js

@@ -1,59 +0,0 @@
-import { fluentProgressRing } from './index';
-export default {
-    title: 'Components/Progress Ring',
-    component: fluentProgressRing,
-    argTypes: {
-        paused: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const ProgressRingTemplate = ({ paused, value }) => `
-  <fluent-progress-ring
-    ${value ? `value="${value}"` : ''}
-    ${paused ? `paused="${paused}"` : ''}
-  ></fluent-progress-ring>
-`;
-export const ProgressRing = ProgressRingTemplate.bind({});
-ProgressRing.args = {
-    paused: false,
-    value: 65,
-};
-const defaultExample = `
-<fluent-progress-ring min="0" max="100" value="${ProgressRing.args.value}"></fluent-progress-ring>
-`;
-ProgressRing.parameters = {
-    docs: {
-        source: {
-            code: defaultExample,
-        },
-    },
-};
-export const ProgressRingAnimated = ProgressRingTemplate.bind({});
-ProgressRingAnimated.args = {
-    paused: false,
-};
-export const ProgressRingPaused = ProgressRingTemplate.bind({});
-ProgressRingPaused.args = {
-    paused: true,
-};
-const animatedExample = `
-<fluent-progress-ring></fluent-progress-ring>
-`;
-const pausedExample = `
-<fluent-progress-ring paused></fluent-progress-ring>
-`;
-ProgressRingAnimated.parameters = {
-    docs: {
-        source: {
-            code: animatedExample,
-        },
-    },
-};
-ProgressRingPaused.parameters = {
-    docs: {
-        source: {
-            code: pausedExample,
-        },
-    },
-};

package/dist/esm/progress/progress-ring/progress-ring.styles.js

@@ -1,79 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { heightNumber } from '../../styles';
-import { accentFillRest, neutralForegroundHint } from '../../design-tokens';
-export const progressRingStyles = (context, definition) => css `
-    ${display('flex')} :host {
-      align-items: center;
-      height: calc(${heightNumber} * 1px);
-      width: calc(${heightNumber} * 1px);
-    }
-
-    .progress {
-      height: 100%;
-      width: 100%;
-    }
-
-    .background {
-      fill: none;
-      stroke-width: 2px;
-    }
-
-    .determinate {
-      stroke: ${accentFillRest};
-      fill: none;
-      stroke-width: 2px;
-      stroke-linecap: round;
-      transform-origin: 50% 50%;
-      transform: rotate(-90deg);
-      transition: all 0.2s ease-in-out;
-    }
-
-    .indeterminate-indicator-1 {
-      stroke: ${accentFillRest};
-      fill: none;
-      stroke-width: 2px;
-      stroke-linecap: round;
-      transform-origin: 50% 50%;
-      transform: rotate(-90deg);
-      transition: all 0.2s ease-in-out;
-      animation: spin-infinite 2s linear infinite;
-    }
-
-    :host(.paused) .indeterminate-indicator-1 {
-      animation: none;
-      stroke: ${neutralForegroundHint};
-    }
-
-    :host(.paused) .determinate {
-      stroke: ${neutralForegroundHint};
-    }
-
-    @keyframes spin-infinite {
-      0% {
-        stroke-dasharray: 0.01px 43.97px;
-        transform: rotate(0deg);
-      }
-      50% {
-        stroke-dasharray: 21.99px 21.99px;
-        transform: rotate(450deg);
-      }
-      100% {
-        stroke-dasharray: 0.01px 43.97px;
-        transform: rotate(1080deg);
-      }
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .background {
-          stroke: ${SystemColors.Field};
-        }
-        .determinate,
-        .indeterminate-indicator-1 {
-          stroke: ${SystemColors.ButtonText};
-        }
-        :host(.paused) .determinate,
-        :host(.paused) .indeterminate-indicator-1 {
-          stroke: ${SystemColors.GrayText};
-        }
-      `));