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

package/dist/esm/skeleton/index.js

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

package/dist/esm/skeleton/skeleton.stories.js

@@ -1,37 +0,0 @@
-import { fluentSkeleton } from './index';
-export default {
-    title: 'Components/Skeleton',
-    component: fluentSkeleton,
-    argTypes: {
-        shape: {
-            defaultValue: 'rect',
-            options: ['circle', 'rect'],
-            control: { type: 'radio' },
-        },
-        shimmer: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const SkeletonTemplate = ({ shape, shimmer }) => `
-  <fluent-skeleton 
-    ${shape ? `shape="${shape}"` : ''}
-    ${shimmer ? 'shimmer' : ''} 
-    style="margin-top: 10px; height: 50px; width: 50px"
-  ></fluent-skeleton>
-`;
-export const Skeleton = SkeletonTemplate.bind({});
-Skeleton.args = {
-    shape: 'rect',
-    shimmer: false,
-};
-const example = `
-<fluent-skeleton style="height: 50px; width: 50px" shape="rect"></fluent-skeleton>
-`;
-Skeleton.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/skeleton/skeleton.styles.js

@@ -1,77 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
-import { SystemColors } from "@microsoft/fast-web-utilities";
-import { controlCornerRadius, neutralFillSecondaryHover, neutralFillSecondaryRest } from '../design-tokens';
-export const skeletonStyles = (context, definition) => css `
-    ${display('block')} :host {
-      --skeleton-fill-default: ${neutralFillSecondaryRest};
-      overflow: hidden;
-      width: 100%;
-      position: relative;
-      background-color: var(--skeleton-fill, var(--skeleton-fill-default));
-      --skeleton-animation-gradient-default: linear-gradient(
-        270deg,
-        var(--skeleton-fill, var(--skeleton-fill-default)) 0%,
-        ${neutralFillSecondaryHover} 51%,
-        var(--skeleton-fill, var(--skeleton-fill-default)) 100%
-      );
-      --skeleton-animation-timing-default: ease-in-out;
-    }
-
-    :host(.rect) {
-      border-radius: calc(${controlCornerRadius} * 1px);
-    }
-
-    :host(.circle) {
-      border-radius: 100%;
-      overflow: hidden;
-    }
-
-    object {
-      position: absolute;
-      width: 100%;
-      height: auto;
-      z-index: 2;
-    }
-
-    object img {
-      width: 100%;
-      height: auto;
-    }
-
-    ${display('block')} span.shimmer {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background-image: var(--skeleton-animation-gradient, var(--skeleton-animation-gradient-default));
-      background-size: 0px 0px / 90% 100%;
-      background-repeat: no-repeat;
-      background-color: var(--skeleton-animation-fill, ${neutralFillSecondaryRest});
-      animation: shimmer 2s infinite;
-      animation-timing-function: var(--skeleton-animation-timing, var(--skeleton-timing-default));
-      animation-direction: normal;
-      z-index: 1;
-    }
-
-    ::slotted(svg) {
-      z-index: 2;
-    }
-
-    ::slotted(.pattern) {
-      width: 100%;
-      height: 100%;
-    }
-
-    @keyframes shimmer {
-      0% {
-        transform: translateX(-100%);
-      }
-      100% {
-        transform: translateX(100%);
-      }
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host{
-          background-color: ${SystemColors.CanvasText};
-        }
-      `));

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

@@ -1,49 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-skeleton",
-            "title": "Skeleton",
-            "description": "The Fluent UI skeleton element",
-            "attributes": [
-                {
-                    "name": "fill",
-                    "title": "Fill",
-                    "description": "Indicates the Skeleton should have a filled style",
-                    "type": "boolean",
-                    "required": false
-                },
-                {
-                    "name": "shape",
-                    "title": "Shape",
-                    "description": "The shape of the Skeleton",
-                    "type": "string",
-                    "default": "rect",
-                    "values": [{ "name": "rect" }, { "name": "circle" }],
-                    "required": false
-                },
-                {
-                    "name": "pattern",
-                    "title": "Pattern URL",
-                    "description": "Allows a reference to a hosted asset to be used rather than an inline SVG",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "shimmer",
-                    "title": "Shimmer",
-                    "description": "Indicates that the component has an activated shimmer effect",
-                    "type": "boolean",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The default slot can be used to optionally include inline SVG's rather than a pattern"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/slider/index.js

@@ -1,29 +0,0 @@
-import { Slider, sliderTemplate as template } from '@microsoft/fast-foundation';
-import { sliderStyles as styles } from './slider.styles';
-/**
- * The Fluent Slider Custom Element. Implements {@link @microsoft/fast-foundation#(Slider:class)},
- * {@link @microsoft/fast-foundation#sliderTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-slider\>
- */
-export const fluentSlider = Slider.compose({
-    baseName: 'slider',
-    template,
-    styles,
-    thumb: `
-    <div class="thumb-cursor"></div>
-  `,
-});
-/**
- * Styles for Slider
- * @public
- */
-export const sliderStyles = styles;
-/**
- * Slider base class
- * @public
- */
-export { Slider };

package/dist/esm/slider/slider.stories.js

@@ -1,40 +0,0 @@
-import { fluentSlider } from './index';
-export default {
-    title: 'Components/Slider',
-    component: fluentSlider,
-    argTypes: {
-        orientation: {
-            options: ['horizontal', 'vertical'],
-            control: { type: 'radio' },
-        },
-    },
-};
-const SliderTemplate = ({ orientation }) => `
-  <fluent-slider
-    ${orientation ? `orientation="${orientation}"` : ''}
-    min="0" max="100" step="10" style="width:80%;"
-  >
-    <fluent-slider-label position="0"> 0&#8451; </fluent-slider-label>
-    <fluent-slider-label position="10"> 10&#8451; </fluent-slider-label>
-    <fluent-slider-label position="90"> 90&#8451; </fluent-slider-label>
-    <fluent-slider-label position="100"> 100&#8451; </fluent-slider-label>
-  </fluent-slider>`;
-export const Slider = SliderTemplate.bind({});
-Slider.args = {
-    orientation: 'horizontal',
-};
-const example = `
-<fluent-slider min="0" max="100" step="10" orientation="horizontal" style="width:80%;">
-  <fluent-slider-label position="0"> 0&#8451; </fluent-slider-label>
-  <fluent-slider-label position="10"> 10&#8451; </fluent-slider-label>
-  <fluent-slider-label position="90"> 90&#8451; </fluent-slider-label>
-  <fluent-slider-label position="100"> 100&#8451; </fluent-slider-label>
-</fluent-slider>
-`;
-Slider.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/slider/slider.styles.js

@@ -1,162 +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 { heightNumber } from '../styles';
-import { accentFillActive, accentFillHover, accentFillRest, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, neutralFillRest, neutralFillStrongRest, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
-export const sliderStyles = (context, definition) => css `
-    ${display('inline-grid')} :host {
-      --thumb-size: calc((${heightNumber} / 2) + ${designUnit} + (${strokeWidth} * 2));
-      --thumb-translate: calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);
-      --track-overhang: calc((${designUnit} / 2) * -1);
-      --track-width: ${designUnit};
-      align-items: center;
-      width: 100%;
-      user-select: none;
-      box-sizing: border-box;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      outline: none;
-      cursor: pointer;
-    }
-    :host(.horizontal) .positioning-region {
-      position: relative;
-      margin: 0 8px;
-      display: grid;
-      grid-template-rows: calc(var(--thumb-size) * 1px) 1fr;
-    }
-    :host(.vertical) .positioning-region {
-      position: relative;
-      margin: 0 8px;
-      display: grid;
-      height: 100%;
-      grid-template-columns: calc(var(--thumb-size) * 1px) 1fr;
-    }
-    :host(:${focusVisible}) .thumb-cursor {
-      box-shadow: 0 0 0 2px ${fillColor}, 0 0 0 4px ${focusStrokeOuter};
-    }
-    .thumb-container {
-      position: absolute;
-      height: calc(var(--thumb-size) * 1px);
-      width: calc(var(--thumb-size) * 1px);
-      transition: all 0.2s ease;
-    }
-    .thumb-cursor {
-      display: flex;
-      position: relative;
-      border: none;
-      width: calc(var(--thumb-size) * 1px);
-      height: calc(var(--thumb-size) * 1px);
-      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
-        border-box ${neutralStrokeControlRest};
-      border: calc(${strokeWidth} * 1px) solid transparent;
-      border-radius: 50%;
-      box-sizing: border-box;
-    }
-    .thumb-cursor::after {
-      content: '';
-      display: block;
-      border-radius: 50%;
-      width: 100%;
-      margin: 4px;
-      background: ${accentFillRest};
-    }
-    :host(:not(.disabled)) .thumb-cursor:hover::after {
-      background: ${accentFillHover};
-      margin: 3px;
-    }
-    :host(:not(.disabled)) .thumb-cursor:active::after {
-      background: ${accentFillActive};
-      margin: 5px;
-    }
-    :host(:not(.disabled)) .thumb-cursor:hover {
-      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
-        border-box ${neutralStrokeControlHover};
-    }
-    :host(:not(.disabled)) .thumb-cursor:active {
-      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
-        border-box ${neutralStrokeControlActive};
-    }
-    .track-start {
-      background: ${accentFillRest};
-      position: absolute;
-      height: 100%;
-      left: 0;
-      border-radius: calc(${controlCornerRadius} * 1px);
-    }
-    :host(.horizontal) .thumb-container {
-      transform: translateX(calc(var(--thumb-size) * 0.5px)) translateY(calc(var(--thumb-translate) * 1px));
-    }
-    :host(.vertical) .thumb-container {
-      transform: translateX(calc(var(--thumb-translate) * 1px)) translateY(calc(var(--thumb-size) * 0.5px));
-    }
-    :host(.horizontal) {
-      min-width: calc(var(--thumb-size) * 1px);
-    }
-    :host(.horizontal) .track {
-      right: calc(var(--track-overhang) * 1px);
-      left: calc(var(--track-overhang) * 1px);
-      align-self: start;
-      height: calc(var(--track-width) * 1px);
-    }
-    :host(.vertical) .track {
-      top: calc(var(--track-overhang) * 1px);
-      bottom: calc(var(--track-overhang) * 1px);
-      width: calc(var(--track-width) * 1px);
-      height: 100%;
-    }
-    .track {
-      background: ${neutralFillStrongRest};
-      border: 1px solid ${neutralStrokeStrongRest};
-      border-radius: 2px;
-      box-sizing: border-box;
-      position: absolute;
-    }
-    :host(.vertical) {
-      height: 100%;
-      min-height: calc(${designUnit} * 60px);
-      min-width: calc(${designUnit} * 20px);
-    }
-    :host(.vertical) .track-start {
-      height: auto;
-      width: 100%;
-      top: 0;
-    }
-    :host(.disabled),
-    :host(.readonly) {
-      cursor: ${disabledCursor};
-    }
-    :host(.disabled) {
-      opacity: ${disabledOpacity};
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .thumb-cursor {
-          forced-color-adjust: none;
-          border-color: ${SystemColors.FieldText};
-          background: ${SystemColors.FieldText};
-        }
-        :host(:not(.disabled)) .thumb-cursor:hover,
-        :host(:not(.disabled)) .thumb-cursor:active {
-          background: ${SystemColors.Highlight};
-        }
-        .track {
-          forced-color-adjust: none;
-          background: ${SystemColors.FieldText};
-        }
-        .thumb-cursor::after,
-        :host(:not(.disabled)) .thumb-cursor:hover::after,
-        :host(:not(.disabled)) .thumb-cursor:active::after {
-          background: ${SystemColors.Field};
-        }
-        :host(:${focusVisible}) .thumb-cursor {
-          background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
-        }
-        :host(.disabled) {
-          opacity: 1;
-        }
-        :host(.disabled) .track,
-        :host(.disabled) .thumb-cursor {
-          forced-color-adjust: none;
-          background: ${SystemColors.GrayText};
-        }
-      `));

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

@@ -1,101 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-slider",
-            "title": "Slider",
-            "description": "The Fluent UI slider element",
-            "attributes": [
-                {
-                    "name": "value",
-                    "title": "Value",
-                    "description": "The slider value",
-                    "required": false,
-                    "type": "number"
-                },
-                {
-                    "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
-                },
-                {
-                    "name": "orientation",
-                    "title": "Orientation",
-                    "description": "The orientation of the slider",
-                    "default": "horizontal",
-                    "values": [{ "name": "horizontal" }, { "name": "vertical" }],
-                    "required": false,
-                    "type": "string"
-                },
-                {
-                    "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 slider",
-                    "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": "Default slotted content of the slider represents its visual labels"
-                },
-                {
-                    "name": "track",
-                    "title": "Track slot",
-                    "description": "Slot to replace the slider track"
-                },
-                {
-                    "name": "thumb",
-                    "title": "Thumb slot",
-                    "description": "Slot to replace the slider thumb"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/slider-label/index.js

@@ -1,26 +0,0 @@
-import { SliderLabel, sliderLabelTemplate as template } from '@microsoft/fast-foundation';
-import { sliderLabelStyles as styles } from './slider-label.styles';
-/**
- * The Fluent Slider Label Custom Element. Implements {@link @microsoft/fast-foundation#SliderLabel},
- * {@link @microsoft/fast-foundation#sliderLabelTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-slider-label\>
- */
-export const fluentSliderLabel = SliderLabel.compose({
-    baseName: 'slider-label',
-    template,
-    styles,
-});
-/**
- * Styles for SliderLabel
- * @public
- */
-export const sliderLabelStyles = styles;
-/**
- * Slider label base class
- * @public
- */
-export { SliderLabel };

package/dist/esm/slider-label/slider-label.stories.js

@@ -1,40 +0,0 @@
-import { fluentSlider } from '../slider/index';
-export default {
-    title: 'Components/Slider Label',
-    components: fluentSlider,
-    argTypes: {
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        hideMark: {
-            control: { type: 'boolean' },
-        },
-        position: {
-            control: { type: 'number' },
-        },
-    },
-};
-const SliderLabelTemplate = ({ disabled, hideMark, label, orientation, position }) => `
-  <fluent-slider-label
-    ${disabled ? 'disabled' : ''}
-    ${hideMark ? `hide-mark="${hideMark}"` : ''}
-    ${position ? `position="${position}"` : ''}
-  >
-    ${label}
-  </fluent-slider-label>
-`;
-export const SliderLabel = SliderLabelTemplate.bind({});
-SliderLabel.args = {
-    hideMark: false,
-    label: 'Label',
-};
-const example = `
-<fluent-slider-label> basic </fluent-slider-label>
-`;
-SliderLabel.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/slider-label/slider-label.styles.js

@@ -1,77 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { designUnit, disabledOpacity, neutralStrokeStrongRest, strokeWidth } from '../design-tokens';
-import { typeRampMinus1 } from '../styles/patterns/type-ramp';
-export const sliderLabelStyles = (context, definition) => css `
-    ${display('block')} :host {
-      ${typeRampMinus1}
-    }
-    .root {
-      position: absolute;
-      display: grid;
-    }
-    :host(.horizontal) {
-      align-self: start;
-      grid-row: 2;
-      margin-top: -4px;
-    }
-    :host(.vertical) {
-      justify-self: start;
-      grid-column: 2;
-      margin-left: 2px;
-    }
-    .container {
-      display: grid;
-      justify-self: center;
-    }
-    :host(.horizontal) .container {
-      grid-template-rows: auto auto;
-      grid-template-columns: 0;
-    }
-    :host(.vertical) .container {
-      grid-template-columns: auto auto;
-      grid-template-rows: 0;
-      min-width: calc(var(--thumb-size) * 1px);
-      height: calc(var(--thumb-size) * 1px);
-    }
-    .label {
-      justify-self: center;
-      align-self: center;
-      white-space: nowrap;
-      max-width: 30px;
-      margin: 2px 0;
-    }
-    .mark {
-      width: calc(${strokeWidth} * 1px);
-      height: calc(${designUnit} * 1px);
-      background: ${neutralStrokeStrongRest};
-      justify-self: center;
-    }
-    :host(.vertical) .mark {
-      transform: rotate(90deg);
-      align-self: center;
-    }
-    :host(.vertical) .label {
-      margin-left: calc((${designUnit} / 2) * 2px);
-      align-self: center;
-    }
-    :host(.disabled) {
-      opacity: ${disabledOpacity};
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .mark {
-          forced-color-adjust: none;
-          background: ${SystemColors.FieldText};
-        }
-        :host(.disabled) {
-          forced-color-adjust: none;
-          opacity: 1;
-        }
-        :host(.disabled) .label {
-          color: ${SystemColors.GrayText};
-        }
-        :host(.disabled) .mark {
-          background: ${SystemColors.GrayText};
-        }
-      `));