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

package/dist/esm/anchor/anchor.stories.js

@@ -1,34 +0,0 @@
-import { fluentAnchor } from './index';
-export default {
-    title: 'Components/Anchor',
-    component: fluentAnchor,
-    argTypes: {
-        appearance: {
-            options: ['neutral', 'accent', 'hypertext', 'lightweight', 'outline', 'stealth'],
-            control: { type: 'radio' },
-        },
-    },
-};
-const AnchorTemplate = ({ appearance, label }) => `
-  <fluent-anchor
-    href="javascript:void"
-    ${appearance ? `appearance="${appearance}"` : ''}
-    >
-    ${label}
-  </fluent-anchor>
-`;
-export const Anchor = AnchorTemplate.bind({});
-const example = `
-<fluent-anchor href="#" appearance="neutral">Anchor</fluent-anchor>
-`;
-Anchor.args = {
-    label: 'Anchor',
-    appearance: 'neutral',
-};
-Anchor.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/anchor/anchor.styles.js

@@ -1,5 +0,0 @@
-import { AccentButtonStyles, baseButtonStyles, HypertextStyles, LightweightButtonStyles, NeutralButtonStyles, OutlineButtonStyles, StealthButtonStyles, } from '../styles/';
-import { appearanceBehavior } from '../utilities/behaviors';
-const interactivitySelector = '[href]';
-export const anchorStyles = (context, definition) => baseButtonStyles(context, definition, interactivitySelector)
-    .withBehaviors(appearanceBehavior('neutral', NeutralButtonStyles(context, definition, interactivitySelector)), appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector)), appearanceBehavior('hypertext', HypertextStyles(context, definition, interactivitySelector)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector)));

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

@@ -1,138 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-anchor",
-            "title": "Anchor",
-            "description": "The Fluent UI anchor element",
-            "attributes": [
-                {
-                    "name": "appearance",
-                    "title": "Appearance",
-                    "description": "The anchor's visual treatment",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "accent"
-                        },
-                        {
-                            "name": "lightweight"
-                        },
-                        {
-                            "name": "neutral"
-                        },
-                        {
-                            "name": "outline"
-                        },
-                        {
-                            "name": "stealth"
-                        },
-                        {
-                            "name": "hypertext"
-                        }
-                    ],
-                    "default": "neutral",
-                    "required": false
-                },
-                {
-                    "name": "download",
-                    "title": "Download",
-                    "description": "The HTML download attribute of the anchor",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "href",
-                    "title": "URL",
-                    "description": "The URL the anchor points to",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "hreflang",
-                    "title": "Linked page language",
-                    "description": "The language of the URL the anchor points to",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "ping",
-                    "title": "Ping URLs",
-                    "description": "A space-separated list of URLs typically for tracking",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "referrerpolicy",
-                    "title": "Referrer policy",
-                    "description": "The amount of referrer information that should be included with requests",
-                    "type": "string",
-                    "required": false,
-                    "values": [
-                        { "name": "no-referrer" },
-                        { "name": "no-referrer-when-downgrade" },
-                        { "name": "origin" },
-                        { "name": "origin-when-cross-origin" },
-                        { "name": "same-origin" },
-                        { "name": "strict-origin" },
-                        { "name": "strict-origin-when-cross-origin" },
-                        { "name": "unsafe-url" }
-                    ]
-                },
-                {
-                    "name": "rel",
-                    "title": "Relationship",
-                    "description": "Space-separated link types indicating the relationship of the linked URL",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "target",
-                    "title": "Target",
-                    "description": "The display target of the URL",
-                    "type": "string",
-                    "default": "_self",
-                    "values": [
-                        {
-                            "name": "_self"
-                        },
-                        {
-                            "name": "_blank"
-                        },
-                        {
-                            "name": "_parent"
-                        },
-                        {
-                            "name": "_top"
-                        }
-                    ],
-                    "required": false
-                },
-                {
-                    "name": "type",
-                    "title": "Type",
-                    "description": "The linked URL's format using a MIME type",
-                    "type": "string",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the anchor"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned before the anchor content"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the anchor content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/anchor/index.js

@@ -1,67 +0,0 @@
-import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { Anchor as FoundationAnchor, anchorTemplate as template } from '@microsoft/fast-foundation';
-import { anchorStyles as styles } from './anchor.styles';
-/**
- * The Fluent version of Anchor
- * @internal
- */
-export class Anchor extends FoundationAnchor {
-    appearanceChanged(oldValue, newValue) {
-        if (oldValue !== newValue) {
-            this.classList.add(newValue);
-            this.classList.remove(oldValue);
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        if (!this.appearance) {
-            this.appearance = 'neutral';
-        }
-    }
-    /**
-     * Applies 'icon-only' class when there is only an SVG in the default slot
-     *
-     * @internal
-     */
-    defaultSlottedContentChanged() {
-        const slottedElements = this.defaultSlottedContent.filter(x => x.nodeType === Node.ELEMENT_NODE);
-        if (slottedElements.length === 1 && slottedElements[0] instanceof SVGElement) {
-            this.control.classList.add('icon-only');
-        }
-        else {
-            this.control.classList.remove('icon-only');
-        }
-    }
-}
-__decorate([
-    attr
-], Anchor.prototype, "appearance", void 0);
-/**
- * Styles for Anchor
- * @public
- */
-export const anchorStyles = styles;
-/**
- * The Fluent Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},
- * {@link @microsoft/fast-foundation#anchorTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-anchor\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
- */
-export const fluentAnchor = Anchor.compose({
-    baseName: 'anchor',
-    baseClass: FoundationAnchor,
-    template,
-    styles,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
-});

package/dist/esm/anchored-region/anchored-region.stories.js

@@ -1,133 +0,0 @@
-import { DOCS_RENDERED } from '@storybook/core-events';
-import addons from '@storybook/addons';
-import { Direction, RtlScrollConverter } from '@microsoft/fast-web-utilities';
-import { AnchoredRegion } from '@microsoft/fast-foundation';
-import AnchoreRegionTemplate from './fixtures/base.html';
-import './index';
-let scalingViewportPreviousXValue = 250;
-let scalingViewportPreviousYValue = 250;
-addons.getChannel().addListener(DOCS_RENDERED, (name) => {
-    if (name.toLowerCase().includes('anchored region')) {
-        scrollViewports();
-        setButtonActions();
-        const scalingViewportUpdate = document.getElementById('viewport-scaling-update');
-        if (scalingViewportUpdate !== null) {
-            scalingViewportUpdate.addEventListener('scroll', handleScrollViaUpdate);
-        }
-        const scalingViewportOffset = document.getElementById('viewport-scaling-offset');
-        if (scalingViewportOffset !== null) {
-            scalingViewportOffset.addEventListener('scroll', handleScrollViaOffset);
-        }
-    }
-});
-function scrollViewports() {
-    document.querySelectorAll("div[id^='viewport']").forEach(el => {
-        if (el instanceof HTMLDivElement) {
-            el.scrollTop = 280;
-            RtlScrollConverter.setScrollLeft(el, el.dir === Direction.rtl ? -250 : 250, el.dir === Direction.rtl ? Direction.rtl : Direction.ltr);
-        }
-    });
-}
-function handleScrollViaUpdate(ev) {
-    if (ev.target instanceof HTMLElement) {
-        const scalingRegionUpdate = document.getElementById('region-scaling-update');
-        if (scalingRegionUpdate instanceof AnchoredRegion) {
-            scalingRegionUpdate.update();
-        }
-    }
-}
-function handleScrollViaOffset(ev) {
-    if (ev.target instanceof HTMLElement) {
-        const scroller = ev.target;
-        const scalingRegionOffset = document.getElementById('region-scaling-offset');
-        if (scalingRegionOffset instanceof AnchoredRegion) {
-            scalingRegionOffset.updateAnchorOffset(scalingViewportPreviousXValue - scroller.scrollLeft, scalingViewportPreviousYValue - scroller.scrollTop);
-        }
-        scalingViewportPreviousXValue = scroller.scrollLeft;
-        scalingViewportPreviousYValue = scroller.scrollTop;
-    }
-}
-function setButtonActions() {
-    document.querySelectorAll('button').forEach(el => {
-        if (el instanceof HTMLButtonElement) {
-            switch (el.id) {
-                case 'toggle-anchor-anchor1':
-                    el.onclick = event => {
-                        const region = document.getElementById('toggle-anchor-region');
-                        if (region === null) {
-                            return;
-                        }
-                        region.setAttribute('anchor', 'toggle-anchor-anchor1');
-                    };
-                    break;
-                case 'toggle-anchor-anchor2':
-                    el.onclick = event => {
-                        const region = document.getElementById('toggle-anchor-region');
-                        if (region === null) {
-                            return;
-                        }
-                        region.setAttribute('anchor', 'toggle-anchor-anchor2');
-                    };
-                    break;
-                case 'toggle-positions-horizontal':
-                    el.onclick = event => {
-                        const region = document.getElementById('toggle-positions-region');
-                        if (region === null) {
-                            return;
-                        }
-                        const currentPosition = region.getAttribute('horizontal-default-position');
-                        if (currentPosition === 'left') {
-                            region.setAttribute('horizontal-default-position', 'right');
-                        }
-                        else {
-                            region.setAttribute('horizontal-default-position', 'left');
-                        }
-                    };
-                    break;
-                case 'toggle-positions-vertical':
-                    el.onclick = event => {
-                        const region = document.getElementById('toggle-positions-region');
-                        if (region === null) {
-                            return;
-                        }
-                        const currentPosition = region.getAttribute('vertical-default-position');
-                        if (currentPosition === 'top') {
-                            region.setAttribute('vertical-default-position', 'bottom');
-                        }
-                        else {
-                            region.setAttribute('vertical-default-position', 'top');
-                        }
-                    };
-                    break;
-                case 'toggle-positions-small':
-                    el.onclick = event => {
-                        const smallContent = document.getElementById('toggle-positions-small');
-                        const largeContent = document.getElementById('toggle-positions-large');
-                        if (smallContent === null || largeContent === null) {
-                            return;
-                        }
-                        smallContent.hidden = false;
-                        largeContent.hidden = true;
-                    };
-                    break;
-                case 'toggle-positions-large':
-                    el.onclick = event => {
-                        const smallContent = document.getElementById('toggle-positions-small');
-                        const largeContent = document.getElementById('toggle-positions-large');
-                        if (smallContent === null || largeContent === null) {
-                            return;
-                        }
-                        smallContent.hidden = true;
-                        largeContent.hidden = false;
-                    };
-                    break;
-                default:
-                    el.onclick;
-            }
-        }
-    });
-}
-export default {
-    title: 'Components/Anchored region',
-};
-export const base = () => AnchoreRegionTemplate;

package/dist/esm/anchored-region/anchored-region.styles.js

@@ -1,7 +0,0 @@
-import { css } from '@microsoft/fast-element';
-export const anchoredRegionStyles = (context, definition) => css `
-  :host {
-    contain: layout;
-    display: block;
-  }
-`;

package/dist/esm/anchored-region/anchored-region.vscode.definition.json

@@ -1,140 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-anchored-region",
-            "title": "Anchored region",
-            "description": "The Fluent UI anchored region element",
-            "attributes": [
-                {
-                    "name": "anchor",
-                    "title": "Anchor ID",
-                    "type": "string",
-                    "description": "The HTML ID of the element the region is positioned relative to",
-                    "required": true
-                },
-                {
-                    "name": "viewport",
-                    "title": "Viewport ID",
-                    "description": "The HTML ID of the viewport the region is positioned relative to",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "horizontal-positioning-mode",
-                    "title": "Horizontal positioning mode",
-                    "description": "How the horizontal placement is determined",
-                    "type": "string",
-                    "values": [{ "name": "uncontrolled" }, { "name": "locktodefault" }, { "name": "dynamic" }],
-                    "default": "uncontrolled",
-                    "required": false
-                },
-                {
-                    "name": "horizontal-default-position",
-                    "title": "Horizontal default position",
-                    "description": "The default horizontal position of the region relative to the configured 'Anchor ID'",
-                    "type": "string",
-                    "values": [
-                        { "name": "start" },
-                        { "name": "end" },
-                        { "name": "left" },
-                        { "name": "right" },
-                        { "name": "unset" }
-                    ],
-                    "default": "unset",
-                    "required": false
-                },
-                {
-                    "name": "horizontal-inset",
-                    "title": "Horizontal inset",
-                    "description": "Determines whether the region should overlap the anchor on the horizontal axis",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "horizontal-threshold",
-                    "title": "Horizontal threshold",
-                    "description": "The space allocated to the default position before the widest area is selected for layout",
-                    "type": "number",
-                    "required": false
-                },
-                {
-                    "name": "horizontal-scaling",
-                    "title": "Horizontal scaling",
-                    "description": "Defines how the width of the region is calculated",
-                    "type": "string",
-                    "values": [{ "name": "anchor" }, { "name": "fill" }, { "name": "content" }],
-                    "default": "content",
-                    "required": false
-                },
-                {
-                    "name": "vertical-positioning-mode",
-                    "title": "Vertical positioning mode",
-                    "description": "How the vertical placement is determined",
-                    "type": "string",
-                    "values": [{ "name": "uncontrolled" }, { "name": "locktodefault" }, { "name": "dynamic" }],
-                    "default": "uncontrolled",
-                    "required": false
-                },
-                {
-                    "name": "vertical-default-position",
-                    "title": "Vertical default position",
-                    "description": "The default vertical position of the region relative to the configured 'Anchor ID'",
-                    "type": "string",
-                    "values": [{ "name": "top" }, { "name": "bottom" }, { "name": "unset" }],
-                    "default": "unset",
-                    "required": false
-                },
-                {
-                    "name": "vertical-inset",
-                    "title": "Vertical inset",
-                    "description": "Determines whether the region should overlap the anchor on the vertical axis",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "vertical-threshold",
-                    "title": "Vertical threshold",
-                    "description": "The space allocated to the default position before the widest area is selected for layout",
-                    "type": "number",
-                    "required": false
-                },
-                {
-                    "name": "vertical-scaling",
-                    "title": "Vertical scaling",
-                    "description": "Defines how the width of the region is calculated",
-                    "type": "string",
-                    "values": [{ "name": "anchor" }, { "name": "fill" }, { "name": "content" }],
-                    "default": "content",
-                    "required": false
-                },
-                {
-                    "name": "fixed-placement",
-                    "title": "Fixed placement",
-                    "description": "Fixed placement allows the region to break out of parent containers",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "auto-update-mode",
-                    "title": "Auto update mode",
-                    "description": "Defines whether the component automatically updates its position",
-                    "type": "string",
-                    "values": [{ "name": "anchor" }, { "name": "auto" }],
-                    "default": "anchor",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the anchored region"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/anchored-region/index.js

@@ -1,26 +0,0 @@
-import { AnchoredRegion, anchoredRegionTemplate as template } from '@microsoft/fast-foundation';
-import { anchoredRegionStyles as styles } from './anchored-region.styles';
-/**
- * The Fluent AnchoredRegion Element. Implements {@link @microsoft/fast-foundation#AnchoredRegion},
- * {@link @microsoft/fast-foundation#anchoredRegionTemplate}
- *
- *
- * @beta
- * @remarks
- * HTML Element: \<fluent-anchored-region\>
- */
-export const fluentAnchoredRegion = AnchoredRegion.compose({
-    baseName: 'anchored-region',
-    template,
-    styles,
-});
-/**
- * Styles for AnchoredRegion
- * @public
- */
-export const anchoredRegionStyles = styles;
-/**
- * Base class for AnchoredRegion
- * @public
- */
-export { AnchoredRegion };

package/dist/esm/badge/badge.stories.js

@@ -1,27 +0,0 @@
-import { fluentBadge } from './index';
-export default {
-    title: 'Components/Badge',
-    component: fluentBadge,
-    argTypes: {
-        appearance: {
-            options: ['neutral', 'accent', 'lightweight'],
-            control: { type: 'radio' },
-        },
-    },
-};
-const BadgeTemplate = ({ appearance, label }) => `
-  <fluent-badge
-    ${appearance ? `appearance="${appearance}"` : ''}
-  >${label}</fluent-badge>`;
-export const Badge = BadgeTemplate.bind({});
-Badge.args = {
-    label: 'Badge',
-    appearance: 'accent',
-};
-Badge.parameters = {
-    docs: {
-        source: {
-            code: `<fluent-badge appearance="accent">Text</fluent-badge>`,
-        },
-    },
-};

package/dist/esm/badge/badge.styles.js

@@ -1,40 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { accentFillRest, controlCornerRadius, designUnit, foregroundOnAccentRest, neutralFillSecondaryRest, neutralForegroundRest, strokeWidth, typeRampMinus1LineHeight, } from '../design-tokens';
-import { typeRampMinus1 } from '../styles/patterns/type-ramp';
-export const badgeStyles = (context, definition) => css `
-    ${display('inline-block')} :host {
-      box-sizing: border-box;
-      ${typeRampMinus1};
-    }
-
-    .control {
-      border-radius: calc(${controlCornerRadius} * 1px);
-      padding: calc(((${designUnit} * 0.5) - ${strokeWidth}) * 1px) calc((${designUnit} - ${strokeWidth}) * 1px);
-      border: calc(${strokeWidth} * 1px) solid transparent;
-    }
-
-    :host(.lightweight) .control {
-      background: transparent;
-      color: ${neutralForegroundRest};
-      font-weight: 600;
-    }
-
-    :host(.accent) .control {
-      background: ${accentFillRest};
-      color: ${foregroundOnAccentRest};
-    }
-
-    :host(.neutral) .control {
-      background: ${neutralFillSecondaryRest};
-      color: ${neutralForegroundRest};
-    }
-
-    :host([circular]) .control {
-      border-radius: 100px;
-      min-width: calc(${typeRampMinus1LineHeight} - calc(${designUnit} * 1px));
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  `;