@fluentui/web-components 2.5.11 → 3.0.0-alpha.2

package/dist/esm/dialog/dialog.stories.js

@@ -1,36 +0,0 @@
-import DialogTemplate from './fixtures/dialog.html';
-import DialogFastButtonsTemplate from './fixtures/dialog-button-test.html';
-import './index';
-export default {
-    title: 'Components/Dialog',
-};
-export const Dialog = () => DialogTemplate;
-export const DialogButtonTest = () => DialogFastButtonsTemplate;
-const dialogExample = `
-<fluent-dialog id="foo" aria-label="Simple dialog" modal="true">
-  <h2>Dialog with text and button. The button should recieve focus</h2>
-  <button>Button A</button>
-  <button id="element" autofocus>Should autofocus</button>
-</fluent-dialog>
-`;
-Dialog.parameters = {
-    docs: {
-        source: {
-            code: dialogExample,
-        },
-    },
-};
-const dialogButtonTestExample = `
-<fluent-dialog id="foo" aria-label="Simple dialog" modal="true">
-  <h2>Dialog with text and fluent buttons. The first button should receive focus</h2>
-  <fluent-button tabindex="0" id="element">Button Text</fluent-button>
-  <fluent-button tabindex="0" id="element">Button Text</fluent-button>
-</fluent-dialog>
-`;
-DialogButtonTest.parameters = {
-    docs: {
-        source: {
-            code: dialogButtonTestExample,
-        },
-    },
-};

package/dist/esm/dialog/dialog.styles.js

@@ -1,47 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { elevationShadowDialog } from '../styles';
-import { fillColor, layerCornerRadius, strokeWidth } from '../design-tokens';
-export const dialogStyles = (context, definition) => css `
-  :host([hidden]) {
-    display: none;
-  }
-
-  :host {
-    --dialog-height: 480px;
-    --dialog-width: 640px;
-    display: block;
-  }
-
-  .overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.3);
-    touch-action: none;
-  }
-
-  .positioning-region {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: auto;
-  }
-
-  .control {
-    box-shadow: ${elevationShadowDialog};
-    margin-top: auto;
-    margin-bottom: auto;
-    border-radius: calc(${layerCornerRadius} * 1px);
-    width: var(--dialog-width);
-    height: var(--dialog-height);
-    background: ${fillColor};
-    z-index: 1;
-    border: calc(${strokeWidth} * 1px) solid transparent;
-  }
-`;

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

@@ -1,67 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-dialog",
-            "title": "Dialog",
-            "description": "The Fluent UI dialog element",
-            "attributes": [
-                {
-                    "name": "modal",
-                    "title": "Modal",
-                    "type": "boolean",
-                    "description": "When modal, user interaction will be limited to the contents of the element",
-                    "default": true,
-                    "required": false
-                },
-                {
-                    "name": "hidden",
-                    "title": "Hidden",
-                    "description": "The hidden state of the element",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "trap-focus",
-                    "title": "Trap focus",
-                    "description": "Indicates that the dialog should trap focus",
-                    "type": "boolean",
-                    "default": true,
-                    "required": false
-                },
-                {
-                    "name": "aria-describedby",
-                    "title": "Accessibility description ID",
-                    "description": "The HTML aria-describedby attribute",
-                    "type": "string",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "aria-labelledby",
-                    "title": "Accessibility label ID",
-                    "description": "The HTML aria-labelledby attribute",
-                    "type": "string",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "aria-label",
-                    "title": "Accessibility label",
-                    "description": "The HTML aria-label attribute",
-                    "type": "string",
-                    "default": false,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The dialog content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/dialog/index.js

@@ -1,26 +0,0 @@
-import { Dialog, dialogTemplate as template } from '@microsoft/fast-foundation';
-import { dialogStyles as styles } from './dialog.styles';
-/**
- * The Fluent Dialog Element. Implements {@link @microsoft/fast-foundation#Dialog},
- * {@link @microsoft/fast-foundation#dialogTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-dialog\>
- */
-export const fluentDialog = Dialog.compose({
-    baseName: 'dialog',
-    template,
-    styles,
-});
-/**
- * Styles for Dialog
- * @public
- */
-export const dialogStyles = styles;
-/**
- * Base Dialog Class
- * @public
- */
-export { Dialog };

package/dist/esm/divider/divider.stories.js

@@ -1,17 +0,0 @@
-import { fluentDivider } from './index';
-export default {
-    title: 'Components/Divider',
-    component: fluentDivider,
-};
-const DividerTemplate = () => `<fluent-divider role="presentation"></fluent-divider>`;
-export const Divider = DividerTemplate.bind({});
-const example = `
-<fluent-divider></fluent-divider>
-`;
-Divider.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/divider/divider.styles.js

@@ -1,11 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
-export const dividerStyles = (context, definition) => css `
-    ${display('block')} :host {
-      box-sizing: content-box;
-      height: 0;
-      border: none;
-      border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
-    }
-  `;

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

@@ -1,29 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-divider",
-            "title": "Divider",
-            "description": "The Fluent UI divider element",
-            "attributes": [
-                {
-                    "name": "role",
-                    "title": "Role",
-                    "type": "string",
-                    "description": "The ARIA role for the divider",
-                    "values": [
-                        {
-                            "name": "separator"
-                        },
-                        {
-                            "name": "presentation"
-                        }
-                    ],
-                    "default": "separator",
-                    "required": false
-                }
-            ],
-            "slots": []
-        }
-    ]
-}

package/dist/esm/divider/index.js

@@ -1,26 +0,0 @@
-import { Divider, dividerTemplate as template } from '@microsoft/fast-foundation';
-import { dividerStyles as styles } from './divider.styles';
-/**
- * The Fluent Divider Element. Implements {@link @microsoft/fast-foundation#Divider},
- * {@link @microsoft/fast-foundation#dividerTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-divider\>
- */
-export const fluentDivider = Divider.compose({
-    baseName: 'divider',
-    template,
-    styles,
-});
-/**
- * Styles for Divider
- * @public
- */
-export const dividerStyles = styles;
-/**
- * Base class for Fluent Divider
- * @public
- */
-export { Divider };

package/dist/esm/flipper/flipper.stories.js

@@ -1,31 +0,0 @@
-import { fluentFlipper } from './index';
-export default {
-    title: 'Components/Flipper',
-    component: fluentFlipper,
-    argTypes: {
-        direction: {
-            options: ['previous', 'next'],
-            control: { type: 'select' },
-        },
-        disabled: { type: 'boolean' },
-    },
-};
-const FlipperTemplate = ({ direction, disabled, content }) => `<fluent-flipper 
-    ${disabled ? 'disabled' : ''} 
-    ${direction ? `direction="${direction}"` : ''}
-  ></fluent-flipper>`;
-export const Flipper = FlipperTemplate.bind({});
-Flipper.args = {
-    disabled: false,
-    direction: 'next',
-};
-const example = `
-<fluent-flipper direction="previous"></fluent-flipper>
-`;
-Flipper.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/flipper/flipper.styles.js

@@ -1,84 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { heightNumber } from '../styles';
-import { controlCornerRadius, designUnit, disabledOpacity, neutralFillRest, neutralFillStrongActive, neutralFillStrongHover, neutralFillStrongRest, neutralStrokeControlRest, strokeWidth, } from '../design-tokens';
-import { focusTreatmentBase } from '../styles/focus';
-export const flipperStyles = (context, definition) => css `
-    ${display('inline-flex')} :host {
-      height: calc((${heightNumber} + ${designUnit}) * 1px);
-      justify-content: center;
-      align-items: center;
-      fill: currentcolor;
-      color: ${neutralFillStrongRest};
-      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
-        border-box ${neutralStrokeControlRest};
-      box-sizing: border-box;
-      border: calc(${strokeWidth} * 1px) solid transparent;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      padding: 0;
-    }
-
-    :host(.disabled) {
-      opacity: ${disabledOpacity};
-      cursor: ${disabledCursor};
-      pointer-events: none;
-    }
-
-    .next,
-    .previous {
-      display: flex;
-    }
-
-    :host(:not(.disabled):hover) {
-      cursor: pointer;
-    }
-
-    :host(:not(.disabled):hover) {
-      color: ${neutralFillStrongHover};
-    }
-
-    :host(:not(.disabled):active) {
-      color: ${neutralFillStrongActive};
-    }
-
-    :host(:${focusVisible}) {
-      ${focusTreatmentBase}
-    }
-
-    :host::-moz-focus-inner {
-      border: 0;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host {
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.ButtonText};
-        }
-        :host .next,
-        :host .previous {
-          color: ${SystemColors.ButtonText};
-          fill: currentcolor;
-        }
-        :host(:not(.disabled):hover) {
-          background: ${SystemColors.Highlight};
-        }
-        :host(:not(.disabled):hover) .next,
-        :host(:not(.disabled):hover) .previous {
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-        :host(.disabled) {
-          opacity: 1;
-        }
-        :host(.disabled),
-        :host(.disabled) .next,
-        :host(.disabled) .previous {
-          border-color: ${SystemColors.GrayText};
-          color: ${SystemColors.GrayText};
-          fill: currentcolor;
-        }
-        :host(:${focusVisible}) {
-          forced-color-adjust: none;
-          outline-color: ${SystemColors.Highlight};
-        }
-      `));

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

@@ -1,56 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-flipper",
-            "title": "Flipper",
-            "description": "The Fluent UI flipper element",
-            "attributes": [
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "type": "boolean",
-                    "description": "Sets the disabled state of the flipper",
-                    "default": true,
-                    "required": false
-                },
-                {
-                    "name": "aria-hidden",
-                    "title": "ARIA hidden",
-                    "type": "boolean",
-                    "description": "Flippers are often a duplicate method of navigation, so by default they are hidden from assistive technology (AT). When set to true, the element is exposed to AT",
-                    "default": true,
-                    "required": false
-                },
-                {
-                    "name": "direction",
-                    "type": "string",
-                    "title": "Direction",
-                    "description": "The navigation direction of the flipper",
-                    "values": [
-                        {
-                            "name": "previous"
-                        },
-                        {
-                            "name": "next"
-                        }
-                    ],
-                    "default": "next",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "previous",
-                    "title": "Previous slot",
-                    "description": "Slot to provide a custom icon to represent the 'previous' flipper state"
-                },
-                {
-                    "name": "next",
-                    "title": "Next slot",
-                    "description": "Slot to provide a custom icon to represent the 'next' flipper state"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/flipper/index.js

@@ -1,36 +0,0 @@
-import { Flipper, flipperTemplate as template } from '@microsoft/fast-foundation';
-import { flipperStyles as styles } from './flipper.styles';
-/**
- * The Fluent Flipper Element. Implements {@link @microsoft/fast-foundation#Flipper},
- * {@link @microsoft/fast-foundation#flipperTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-flipper\>
- */
-export const fluentFlipper = Flipper.compose({
-    baseName: 'flipper',
-    template,
-    styles,
-    next: `
-    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-      <path d="M7.57 11.84A1 1 0 016 11.02V4.98a1 1 0 011.57-.82l3.79 2.62c.85.59.85 1.85 0 2.44l-3.79 2.62z"/>
-    </svg>
-  `,
-    previous: `
-    <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-      <path d="M9.43 11.84a1 1 0 001.57-.82V4.98a1 1 0 00-1.57-.82L5.64 6.78c-.85.59-.85 1.85 0 2.44l3.79 2.62z"/>
-    </svg>
-  `,
-});
-/**
- * Styles for Flipper
- * @public
- */
-export const flipperStyles = styles;
-/**
- * Base class for Flipper
- * @public
- */
-export { Flipper };

package/dist/esm/horizontal-scroll/horizontal-scroll.stories.js

@@ -1,81 +0,0 @@
-import HorizontalScrollTemplate from './fixtures/horizontal-scroll.html';
-import './index';
-export default {
-    title: 'Components/Horizontal Scroll',
-};
-export const HorizontalScroll = () => HorizontalScrollTemplate;
-const example = `
-<fluent-horizontal-scroll>
-  <fluent-card>
-    Card number 1
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 2
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 3
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 4
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 5
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 6
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 7
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 8
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 9
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 10
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 11
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 12
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 13
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 14
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 15
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-  <fluent-card>
-    Card number 16
-    <fluent-button>A button</fluent-button>
-  </fluent-card>
-</fluent-horizontal-scroll>
-`;
-HorizontalScroll.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/horizontal-scroll/horizontal-scroll.styles.js

@@ -1,138 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { DirectionalStyleSheetBehavior } from '../styles';
-const ltrActionsStyles = css `
-  .scroll-prev {
-    right: auto;
-    left: 0;
-  }
-
-  .scroll.scroll-next::before,
-  .scroll-next .scroll-action {
-    left: auto;
-    right: 0;
-  }
-
-  .scroll.scroll-next::before {
-    background: linear-gradient(to right, transparent, var(--scroll-fade-next));
-  }
-
-  .scroll-next .scroll-action {
-    transform: translate(50%, -50%);
-  }
-`;
-const rtlActionsStyles = css `
-  .scroll.scroll-next {
-    right: auto;
-    left: 0;
-  }
-
-  .scroll.scroll-next::before {
-    background: linear-gradient(to right, var(--scroll-fade-next), transparent);
-    left: auto;
-    right: 0;
-  }
-
-  .scroll.scroll-prev::before {
-    background: linear-gradient(to right, transparent, var(--scroll-fade-previous));
-  }
-
-  .scroll-prev .scroll-action {
-    left: auto;
-    right: 0;
-    transform: translate(50%, -50%);
-  }
-`;
-/**
- * Styles used for the flipper container and gradient fade
- * @public
- */
-export const ActionsStyles = css `
-  .scroll-area {
-    position: relative;
-  }
-
-  div.scroll-view {
-    overflow-x: hidden;
-  }
-
-  .scroll {
-    bottom: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    user-select: none;
-    width: 100px;
-  }
-
-  .scroll.disabled {
-    display: none;
-  }
-
-  .scroll::before,
-  .scroll-action {
-    left: 0;
-    position: absolute;
-  }
-
-  .scroll::before {
-    background: linear-gradient(to right, var(--scroll-fade-previous), transparent);
-    content: '';
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-
-  .scroll-action {
-    pointer-events: auto;
-    right: auto;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  ::slotted(fluent-flipper) {
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-  }
-
-  .scroll-area:hover ::slotted(fluent-flipper) {
-    opacity: 1;
-  }
-`.withBehaviors(new DirectionalStyleSheetBehavior(ltrActionsStyles, rtlActionsStyles));
-/**
- * Styles handling the scroll container and content
- * @public
- */
-export const horizontalScrollStyles = (context, definition) => css `
-  ${display('block')} :host {
-    --scroll-align: center;
-    --scroll-item-spacing: 4px;
-    contain: layout;
-    position: relative;
-  }
-
-  .scroll-view {
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
-  .content-container {
-    align-items: var(--scroll-align);
-    display: inline-flex;
-    flex-wrap: nowrap;
-    position: relative;
-  }
-
-  .content-container ::slotted(*) {
-    margin-right: var(--scroll-item-spacing);
-  }
-
-  .content-container ::slotted(*:last-child) {
-    margin-right: 0;
-  }
-`;