@fluentui/web-components 2.5.12 → 3.0.0-alpha.10

package/dist/esm/breadcrumb/index.js

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

package/dist/esm/breadcrumb-item/breadcrumb-item.stories.js

@@ -1,16 +0,0 @@
-import BreadcrumbItemTemplate from './fixtures/breadcrumb-item.html';
-import './index';
-export default {
-    title: 'Components/Breadcrumb Item',
-};
-export const BreadcrumbItem = () => BreadcrumbItemTemplate;
-const example = `
-<fluent-breadcrumb-item href="#"> Breadcrumb item </fluent-breadcrumb-item>
-`;
-BreadcrumbItem.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/breadcrumb-item/breadcrumb-item.styles.js

@@ -1,96 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { controlCornerRadius, neutralForegroundActive, neutralForegroundHover, neutralForegroundRest, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { heightNumber } from '../styles/index';
-import { focusTreatmentTight } from '../styles/focus';
-export const breadcrumbItemStyles = (context, definition) => css `
-    ${display('inline-flex')} :host {
-      background: transparent;
-      color: ${neutralForegroundRest};
-      fill: currentcolor;
-      box-sizing: border-box;
-      ${typeRampBase};
-      min-width: calc(${heightNumber} * 1px);
-      border-radius: calc(${controlCornerRadius} * 1px);
-    }
-
-    .listitem {
-      display: flex;
-      align-items: center;
-      border-radius: inherit;
-    }
-
-    .control {
-      position: relative;
-      align-items: center;
-      box-sizing: border-box;
-      color: inherit;
-      fill: inherit;
-      cursor: pointer;
-      display: flex;
-      outline: none;
-      text-decoration: none;
-      white-space: nowrap;
-      border-radius: inherit;
-    }
-
-    .control:hover {
-      color: ${neutralForegroundHover};
-    }
-
-    .control:active {
-      color: ${neutralForegroundActive};
-    }
-
-    .control:${focusVisible} {
-      ${focusTreatmentTight}
-    }
-
-    :host(:not([href])),
-    :host([aria-current]) .control {
-      color: ${neutralForegroundRest};
-      fill: currentcolor;
-      cursor: default;
-    }
-
-    .start {
-      display: flex;
-      margin-inline-end: 6px;
-    }
-
-    .end {
-      display: flex;
-      margin-inline-start: 6px;
-    }
-
-    .separator {
-      display: flex;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host(:not([href])),
-        .start,
-        .end,
-        .separator {
-          background: ${SystemColors.ButtonFace};
-          color: ${SystemColors.ButtonText};
-          fill: currentcolor;
-        }
-        .separator {
-          fill: ${SystemColors.ButtonText};
-        }
-        :host([href]) {
-          forced-color-adjust: none;
-          background: ${SystemColors.ButtonFace};
-          color: ${SystemColors.LinkText};
-        }
-        :host([href]) .control:hover {
-          background: ${SystemColors.LinkText};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-        .control:${focusVisible} {
-          outline-color: ${SystemColors.LinkText};
-        }
-      `));

package/dist/esm/breadcrumb-item/breadcrumb-item.vscode.definition.json

@@ -1,50 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-breadcrumb-item",
-            "title": "Breadcrumb item",
-            "description": "The Fluent UI breadcrumb item element",
-            "attributes": [
-                {
-                    "name": "href",
-                    "title": "URL",
-                    "description": "The URL the item points to",
-                    "type": "string",
-                    "default": "",
-                    "required": false
-                },
-                {
-                    "name": "separator",
-                    "title": "Separator",
-                    "description": "Determines whether the visual separator should be rendered",
-                    "type": "boolean",
-                    "default": true,
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the item"
-                },
-                {
-                    "name": "separator",
-                    "title": "Separator slot",
-                    "description": "Slot to provide a custom icon to represent the visual separator"
-                },
-                {
-                    "name": "start",
-                    "title": "Start slot",
-                    "description": "Contents of the start slot are positioned before the default content"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the default content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/breadcrumb-item/index.js

@@ -1,34 +0,0 @@
-import { BreadcrumbItem, breadcrumbItemTemplate as template } from '@microsoft/fast-foundation';
-import { breadcrumbItemStyles as styles } from './breadcrumb-item.styles';
-/**
- * The Fluent BreadcrumbItem Element. Implements {@link @microsoft/fast-foundation#BreadcrumbItem},
- * {@link @microsoft/fast-foundation#breadcrumbItemTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-breadcrumb-item\>
- */
-export const fluentBreadcrumbItem = BreadcrumbItem.compose({
-    baseName: 'breadcrumb-item',
-    template,
-    styles,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
-    separator: `
-    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg">
-      <path d="M4.65 2.15a.5.5 0 000 .7L7.79 6 4.65 9.15a.5.5 0 10.7.7l3.5-3.5a.5.5 0 000-.7l-3.5-3.5a.5.5 0 00-.7 0z"/>
-    </svg>
-  `,
-});
-/**
- * Styles for BreadcrumbItem
- * @public
- */
-export const breadcrumbItemStyles = styles;
-/**
- * Base class for BreadcrumbItem
- * @public
- */
-export { BreadcrumbItem };

package/dist/esm/button/button.stories.js

@@ -1,40 +0,0 @@
-import { fluentButton } from './index';
-export default {
-    title: 'Components/Button',
-    component: fluentButton,
-    argTypes: {
-        appearance: {
-            description: 'This controls the basic appearances',
-            control: { type: 'select' },
-            options: ['neutral', 'accent', 'lightweight', 'outline', 'stealth'],
-            default: 'neutral',
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-    },
-};
-const ButtonTemplate = ({ appearance, disabled, label }) => `
-    <fluent-button
-      ${disabled ? 'disabled' : ''}
-      ${appearance ? `appearance="${appearance}"` : ''}
-    >
-      ${label}
-    </fluent-button>
-  `;
-export const Button = ButtonTemplate.bind({});
-Button.args = {
-    label: 'Button',
-    disabled: false,
-    appearance: 'accent',
-};
-const example = `
-<fluent-button appearance="accent">Button</fluent-button>
-`;
-Button.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/button/button.styles.js

@@ -1,24 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { disabledCursor, } from '@microsoft/fast-foundation';
-import { AccentButtonStyles, baseButtonStyles, LightweightButtonStyles, NeutralButtonStyles, OutlineButtonStyles, StealthButtonStyles, } from '../styles/';
-import { appearanceBehavior } from '../utilities/behaviors';
-import { disabledOpacity } from '../design-tokens';
-const interactivitySelector = ':not([disabled])';
-const nonInteractivitySelector = '[disabled]';
-export const buttonStyles = (context, definition) => css `
-    :host(${interactivitySelector}) .control {
-      cursor: pointer;
-    }
-
-    :host(${nonInteractivitySelector}) .control {
-      cursor: ${disabledCursor};
-    }
-
-    @media (forced-colors: none) {
-      :host(${nonInteractivitySelector}) .control {
-        opacity: ${disabledOpacity};
-      }
-    }
-
-    ${baseButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)}
-  `.withBehaviors(appearanceBehavior('neutral', NeutralButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('accent', AccentButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('lightweight', LightweightButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('outline', OutlineButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)), appearanceBehavior('stealth', StealthButtonStyles(context, definition, interactivitySelector, nonInteractivitySelector)));

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

@@ -1,158 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-button",
-            "title": "Button",
-            "description": "The Fluent UI button element",
-            "attributes": [
-                {
-                    "name": "appearance",
-                    "title": "Appearance",
-                    "description": "The button's visual treatment",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "accent"
-                        },
-                        {
-                            "name": "lightweight"
-                        },
-                        {
-                            "name": "neutral"
-                        },
-                        {
-                            "name": "outline"
-                        },
-                        {
-                            "name": "stealth"
-                        }
-                    ],
-                    "default": "neutral",
-                    "required": false
-                },
-                {
-                    "name": "autofocus",
-                    "title": "Autofocus",
-                    "description": "Determines if the element should receive document focus on page load",
-                    "type": "boolean",
-                    "default": false,
-                    "required": false
-                },
-                {
-                    "name": "disabled",
-                    "title": "Disabled",
-                    "description": "Sets the disabled state of the button",
-                    "type": "boolean",
-                    "required": false
-                },
-                {
-                    "name": "form",
-                    "title": "Form ID",
-                    "description": "The ID of a form to associate the element to",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "formaction",
-                    "title": "Form processing url",
-                    "description": "The HTML formaction attribute of the button",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "formenctype",
-                    "title": "Form encoding",
-                    "description": "The HTML formenctype attribute of the button",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "formmethod",
-                    "title": "Form submit method",
-                    "description": "The HTML formmethod attribute of the button",
-                    "type": "string",
-                    "required": false,
-                    "values": [{ "name": "post" }, { "name": "get" }]
-                },
-                {
-                    "name": "formnovalidate",
-                    "title": "No form validation",
-                    "description": "The HTML formnovalidate attribute of the button",
-                    "type": "boolean",
-                    "required": false
-                },
-                {
-                    "name": "formtarget",
-                    "title": "Form Target",
-                    "description": "The HTML formtarget attribute of the button",
-                    "type": "string",
-                    "values": [
-                        {
-                            "name": "_self"
-                        },
-                        {
-                            "name": "_blank"
-                        },
-                        {
-                            "name": "_parent"
-                        },
-                        {
-                            "name": "_top"
-                        }
-                    ],
-                    "required": false
-                },
-                {
-                    "name": "name",
-                    "title": "Name",
-                    "description": "The HTML name attribute of the button",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "type",
-                    "title": "Type",
-                    "description": "The HTML type attribute of the button",
-                    "type": "string",
-                    "required": false,
-                    "values": [
-                        {
-                            "name": "submit"
-                        },
-                        {
-                            "name": "reset"
-                        },
-                        {
-                            "name": "button"
-                        }
-                    ]
-                },
-                {
-                    "name": "value",
-                    "title": "Value",
-                    "description": "The HTML value attribute of the button",
-                    "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 button content"
-                },
-                {
-                    "name": "end",
-                    "title": "End slot",
-                    "description": "Contents of the end slot are positioned after the button content"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/button/index.js

@@ -1,67 +0,0 @@
-import { __decorate } from "tslib";
-import { attr } from '@microsoft/fast-element';
-import { Button as FoundationButton, buttonTemplate as template } from '@microsoft/fast-foundation';
-import { buttonStyles as styles } from './button.styles';
-/**
- * The Fluent button class
- * @internal
- */
-export class Button extends FoundationButton {
-    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
-], Button.prototype, "appearance", void 0);
-/**
- * The Fluent Button Element. Implements {@link @microsoft/fast-foundation#Button},
- * {@link @microsoft/fast-foundation#buttonTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-button\>
- *
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
- */
-export const fluentButton = Button.compose({
-    baseName: 'button',
-    baseClass: FoundationButton,
-    template,
-    styles,
-    shadowOptions: {
-        delegatesFocus: true,
-    },
-});
-/**
- * Styles for Button
- * @public
- */
-export const buttonStyles = styles;

package/dist/esm/calendar/calendar.stories.js

@@ -1,115 +0,0 @@
-import './index';
-import { fluentCalendar } from './index';
-const now = new Date();
-const years = new Array(9).fill(null).map((_, index) => (now.getFullYear() - 4 + index).toString());
-const groupsToDates = matrix => matrix.map(days => days.map(day => `${now.getMonth() + 1}-${day}-${now.getFullYear()}`).join(','));
-const disabledDates = groupsToDates([
-    [1, 2, 3, 4, now.getDate()],
-    [6, 7, 10, 18],
-    [8, 17, 24, 25],
-    [4, 11, 18, 25],
-]);
-export default {
-    title: 'Components/Calendar',
-    component: fluentCalendar,
-    argTypes: {
-        month: {
-            description: 'Month of the calendar to display.',
-            control: { type: 'select' },
-            options: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
-            default: 'The current month',
-        },
-        year: {
-            description: 'Year of the calendar to display.',
-            control: { type: 'select' },
-            options: years,
-            default: 'The current year',
-        },
-        locale: {
-            control: { type: 'select' },
-            options: ['en-US', 'fr-FR', 'de-DE', 'th-TH-u-ca-buddhist-nu-thai', 'ar-XE-u-ca-islamic-nu-arab'],
-            default: 'en-US',
-            description: 'Locale information which can include market (language and country), calendar type and numbering type.',
-        },
-        dayFormat: {
-            description: 'Formatting for the numbered days.',
-            options: ['2-digit', 'numeric'],
-            control: { type: 'select' },
-            default: 'numeric',
-        },
-        weekdayFormat: {
-            description: 'Formatting for the weekday titles.',
-            options: ['long', 'narrow', 'short'],
-            control: { type: 'select' },
-            default: 'short',
-        },
-        monthFormat: {
-            description: 'Formatting for the month name in the title.',
-            options: ['2-digit', 'long', 'narrow', 'numeric', 'short'],
-            control: { type: 'select' },
-            default: 'long',
-        },
-        yearFormat: {
-            description: 'Formatting for the year in the title.',
-            options: ['2-digit', 'numeric'],
-            control: { type: 'select' },
-            default: 'numeric',
-        },
-        disabledDates: {
-            description: 'Dates to be shown as disabled.',
-            options: disabledDates,
-            control: { type: 'select' },
-        },
-        selectedDates: {
-            description: 'Dates to be shown as selected',
-            options: disabledDates,
-            control: { type: 'select' },
-        },
-        readonly: {
-            description: 'A readonly version of the calendar without AT interactions.',
-            control: { type: 'boolean' },
-            default: true,
-        },
-    },
-};
-const CalendarTemplate = ({ month, year, locale, dayFormat, weekdayFormat, monthFormat, yearFormat, disabledDates, selectedDates, readonly, }) => `
-  <style>
-    div.docs-story > div:first-child {
-      height: 22em !important;
-    }
-  </style>
-  <fluent-calendar
-    ${month ? `month="${month}"` : ''}
-    ${year ? `year="${year}"` : ''}
-    ${locale ? `locale="${locale}"` : ''}
-    ${dayFormat ? `day-format="${dayFormat}"` : ''}
-    ${weekdayFormat ? `weekday-format="${weekdayFormat}"` : ''}
-    ${monthFormat ? `month-format="${monthFormat}"` : ''}
-    ${yearFormat ? `year-format="${yearFormat}"` : ''}
-    ${disabledDates ? `disabled-dates="${disabledDates}"` : ''}
-    ${selectedDates ? `selected-dates="${selectedDates}"` : ''}
-    ${readonly === false ? `readonly="false"` : ''}
-    ></fluent-calendar>
-  `;
-export const Calendar = CalendarTemplate.bind({});
-Calendar.args = {
-    label: 'Calendar',
-    month: (now.getMonth() + 1).toString(),
-    year: now.getFullYear().toString(),
-    locale: 'en-US',
-    readonly: true,
-    dayFormat: 'numeric',
-    weekdayFormat: 'short',
-    monthFormat: 'long',
-    yearFormat: 'numeric',
-};
-const example = `
-  <fluent-calendar></fluent-calendar>
-  `;
-Calendar.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};