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

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

package/dist/esm/horizontal-scroll/horizontal-scroll.vscode.definition.json

@@ -1,85 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-horizontal-scroll",
-            "title": "Horizontal Scroll",
-            "description": "The Fluent UI HorizontalScroll element",
-            "attributes": [
-                {
-                    "name": "view",
-                    "title": "View",
-                    "description": "Default or mobile view",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "mobile"
-                        },
-                        {
-                            "name": "default"
-                        }
-                    ],
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "speed",
-                    "title": "Speed",
-                    "description": "Scroll speed in pixels per second",
-                    "type": "number",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "easing",
-                    "title": "Easing",
-                    "description": "Scroll easing",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "linear"
-                        },
-                        {
-                            "name": "ease-in"
-                        },
-                        {
-                            "name": "ease-out"
-                        },
-                        {
-                            "name": "ease-in-out"
-                        }
-                    ],
-                    "default": false,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "previousFlipper",
-                    "title": "Prevous flipper slot",
-                    "description": "Flipper used to scroll to previous content"
-                },
-                {
-                    "name": "nextFlipper",
-                    "title": "Next flipper slot",
-                    "description": "Flipper used to scroll to next content"
-                },
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The child nodes to scroll through"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned above the horizontal-scroll"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned below the horizontal-scroll"
-                }
-            ]
-        }
-    ]
-}

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

@@ -1,47 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import { HorizontalScroll as FoundationHorizontalScroll, horizontalScrollTemplate as template, } from '@microsoft/fast-foundation';
-import { ActionsStyles, horizontalScrollStyles as styles } from './horizontal-scroll.styles';
-/**
- * @internal
- */
-export class HorizontalScroll extends FoundationHorizontalScroll {
-    /**
-     * @public
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.view !== 'mobile') {
-            this.$fastController.addStyles(ActionsStyles);
-        }
-    }
-}
-/**
- * The Fluent HorizontalScroll Element. Implements {@link @microsoft/fast-foundation#HorizontalScroll},
- * {@link @microsoft/fast-foundation#horizontalScrollTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-horizontal-scroll\>
- */
-export const fluentHorizontalScroll = HorizontalScroll.compose({
-    baseName: 'horizontal-scroll',
-    baseClass: FoundationHorizontalScroll,
-    template,
-    styles,
-    nextFlipper: html `
-    <fluent-flipper @click="${x => x.scrollToNext()}" aria-hidden="${x => x.flippersHiddenFromAT}"></fluent-flipper>
-  `,
-    previousFlipper: html `
-    <fluent-flipper
-      @click="${x => x.scrollToPrevious()}"
-      direction="previous"
-      aria-hidden="${x => x.flippersHiddenFromAT}"
-    ></fluent-flipper>
-  `,
-});
-/**
- * Styles for horizontal scroll
- * @public
- */
-export const horizontalScrollStyles = styles;

package/dist/esm/listbox/index.js

@@ -1,24 +0,0 @@
-import { Listbox as FoundationListboxElement, listboxTemplate as template } from '@microsoft/fast-foundation';
-import { listboxStyles as styles } from './listbox.styles';
-export class Listbox extends FoundationListboxElement {
-}
-/**
- * The Fluent listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox}
- * {@link @microsoft/fast-foundation#listboxTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-listbox\>
- *
- */
-export const fluentListbox = Listbox.compose({
-    baseName: 'listbox',
-    template,
-    styles,
-});
-/**
- * Styles for Listbox
- * @public
- */
-export const listboxStyles = styles;

package/dist/esm/listbox/listbox.stories.js

@@ -1,29 +0,0 @@
-import { fluentListbox } from './index';
-export default {
-    title: 'Components/Listbox',
-    component: fluentListbox,
-};
-const listBoxTemplate = () => `
-  <fluent-listbox>
-    <fluent-option>This option has no value</fluent-option>
-    <fluent-option disabled>This option is disabled</fluent-option>
-    <fluent-option value="hi">This option has a value</fluent-option>
-    <fluent-option selected>This option is selected by default</fluent-option>
-  </fluent-listbox>
-`;
-export const Listbox = listBoxTemplate.bind({});
-const example = `
-<fluent-listbox>
-  <fluent-option>This option has no value</fluent-option>
-  <fluent-option disabled>This option is disabled</fluent-option>
-  <fluent-option value="hi">This option has a value</fluent-option>
-  <fluent-option selected>This option is selected by default</fluent-option>
-</fluent-listbox>
-`;
-Listbox.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/listbox/listbox.styles.js

@@ -1,21 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display, ListboxOption } from '@microsoft/fast-foundation';
-import { controlCornerRadius, designUnit, neutralStrokeRest, strokeWidth, } from '../design-tokens';
-import { focusTreatmentBase } from '../styles/focus';
-export const listboxStyles = (context, definition) => css `
-    ${display('inline-flex')} :host {
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
-      border-radius: calc(${controlCornerRadius} * 1px);
-      box-sizing: border-box;
-      flex-direction: column;
-      padding: calc(${designUnit} * 1px) 0;
-    }
-
-    ::slotted(${context.tagFor(ListboxOption)}) {
-      margin: 0 calc(${designUnit} * 1px);
-    }
-
-    :host(:focus-within:not([disabled])) {
-      ${focusTreatmentBase}
-    }
-  `;

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

@@ -1,40 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-listbox",
-            "title": "Listbox",
-            "description": "The Fluent UI listbox element",
-            "attributes": [
-                {
-                    "name": "role",
-                    "title": "Role",
-                    "description": "The ARIA role for the listbox",
-                    "type": "string",
-                    "default": "listbox",
-                    "required": true,
-                    "values": [
-                        {
-                            "name": "listbox"
-                        }
-                    ]
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Sets the disabled state of the listbox",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "Supports fluent-option or option elements"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/listbox-option/index.js

@@ -1,22 +0,0 @@
-import { ListboxOption, listboxOptionTemplate as template } from '@microsoft/fast-foundation';
-import { optionStyles as styles } from './listbox-option.styles';
-/**
- * The Fluent option Custom Element. Implements {@link @microsoft/fast-foundation#ListboxOption}
- * {@link @microsoft/fast-foundation#listboxOptionTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-option\>
- *
- */
-export const fluentOption = ListboxOption.compose({
-    baseName: 'option',
-    template,
-    styles,
-});
-/**
- * Styles for Option
- * @public
- */
-export const OptionStyles = styles;

package/dist/esm/listbox-option/listbox-option.stories.js

@@ -1,38 +0,0 @@
-import { fluentOption } from './index';
-export default {
-    title: 'Components/Listbox Option',
-    component: fluentOption,
-    argTypes: {
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        selected: {
-            control: { type: 'boolean' },
-        },
-        value: {
-            control: { type: 'text' },
-        },
-    },
-};
-const listBoxTemplate = ({ disabled, label, selected, value }) => `
-  <fluent-option 
-    ${disabled ? 'disabled' : ''}
-    ${selected ? 'selected' : ''}
-    ${value ? `value="${value}"` : ''}
-  >${label}</fluent-option>
-`;
-export const ListboxOption = listBoxTemplate.bind({});
-ListboxOption.args = {
-    label: 'This is an Option',
-    selected: false,
-};
-const example = `
-<fluent-option> Text content is the value when the value attribute is absent. </fluent-option>
-`;
-ListboxOption.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/listbox-option/listbox-option.styles.js

@@ -1,133 +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/size';
-import { accentFillRest, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthFocus, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { focusTreatmentBase } from '../styles/focus';
-export const optionStyles = (context, definition) => css `
-    ${display('inline-flex')} :host {
-      position: relative;
-      ${typeRampBase}
-      background: ${neutralFillStealthRest};
-      border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${strokeWidth} * 1px) solid transparent;
-      box-sizing: border-box;
-      color: ${neutralForegroundRest};
-      cursor: pointer;
-      fill: currentcolor;
-      height: calc(${heightNumber} * 1px);
-      overflow: hidden;
-      align-items: center;
-      padding: 0 calc(((${designUnit} * 3) - ${strokeWidth} - 1) * 1px);
-      user-select: none;
-      white-space: nowrap;
-    }
-
-    :host::before {
-      content: '';
-      display: block;
-      position: absolute;
-      left: calc((${focusStrokeWidth} - ${strokeWidth}) * 1px);
-      top: calc((${heightNumber} / 4) - ${focusStrokeWidth} * 1px);
-      width: 3px;
-      height: calc((${heightNumber} / 2) * 1px);
-      background: transparent;
-      border-radius: calc(${controlCornerRadius} * 1px);
-    }
-
-    :host(:not([disabled]):hover) {
-      background: ${neutralFillStealthHover};
-    }
-
-    :host(:not([disabled]):active) {
-      background: ${neutralFillStealthActive};
-    }
-
-    :host(:not([disabled]):active)::before {
-      background: ${accentFillRest};
-      height: calc(((${heightNumber} / 2) - 6) * 1px);
-    }
-
-    :host([aria-selected='true'])::before {
-      background: ${accentFillRest};
-    }
-
-    :host(:${focusVisible}) {
-      ${focusTreatmentBase}
-      background: ${neutralFillStealthFocus};
-    }
-
-    :host([aria-selected='true']) {
-      background: ${neutralFillSecondaryRest};
-    }
-
-    :host(:not([disabled])[aria-selected='true']:hover) {
-      background: ${neutralFillSecondaryHover};
-    }
-
-    :host(:not([disabled])[aria-selected='true']:active) {
-      background: ${neutralFillSecondaryActive};
-    }
-
-    :host(:not([disabled]):not([aria-selected='true']):hover) {
-      background: ${neutralFillStealthHover};
-    }
-
-    :host(:not([disabled]):not([aria-selected='true']):active) {
-      background: ${neutralFillStealthActive};
-    }
-
-    :host([disabled]) {
-      cursor: ${disabledCursor};
-      opacity: ${disabledOpacity};
-    }
-
-    .content {
-      grid-column-start: 2;
-      justify-self: start;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .start,
-    .end,
-    ::slotted(svg) {
-      display: flex;
-    }
-
-    ::slotted([slot='end']) {
-      margin-inline-start: 1ch;
-    }
-
-    ::slotted([slot='start']) {
-      margin-inline-end: 1ch;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host {
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.ButtonFace};
-          color: ${SystemColors.ButtonText};
-        }
-        :host(:not([disabled]):not([aria-selected="true"]):hover),
-        :host(:not([disabled])[aria-selected="true"]:hover),
-        :host([aria-selected="true"]) {
-          forced-color-adjust: none;
-          background: ${SystemColors.Highlight};
-          color: ${SystemColors.HighlightText};
-        }
-        :host(:not([disabled]):active)::before,
-        :host([aria-selected='true'])::before {
-          background: ${SystemColors.HighlightText};
-        }
-        :host([disabled]),
-        :host([disabled]:not([aria-selected='true']):hover) {
-          background: ${SystemColors.Canvas};
-          color: ${SystemColors.GrayText};
-          fill: currentcolor;
-          opacity: 1;
-        }
-        :host(:${focusVisible}) {
-          outline-color: ${SystemColors.CanvasText};
-        }
-      `));

package/dist/esm/listbox-option/listbox-option.vscode.definition.json

@@ -1,45 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-option",
-            "title": "Option",
-            "description": "The Fluent UI option element",
-            "attributes": [
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "type": "boolean",
-                    "description": "Sets the disabled state of the option",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "selected",
-                    "title": "Selected",
-                    "type": "boolean",
-                    "description": "The selected state of the option",
-                    "default": false,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the option"
-                },
-                {
-                    "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/menu/index.js

@@ -1,36 +0,0 @@
-import { Menu as FoundationMenu, menuTemplate as template } from '@microsoft/fast-foundation';
-import { fillColor, neutralLayerFloating } from '../design-tokens';
-import { menuStyles as styles } from './menu.styles';
-/**
- * The Fluent menu class
- * @public
- */
-export class Menu extends FoundationMenu {
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        fillColor.setValueFor(this, neutralLayerFloating);
-    }
-}
-/**
- * The Fluent Menu Element. Implements {@link @microsoft/fast-foundation#Menu},
- * {@link @microsoft/fast-foundation#menuTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-menu\>
- */
-export const fluentMenu = Menu.compose({
-    baseName: 'menu',
-    baseClass: FoundationMenu,
-    template,
-    styles,
-});
-/**
- * Styles for Menu
- * @public
- */
-export const menuStyles = styles;