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

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

package/dist/esm/calendar/calendar.styles.js

@@ -1,132 +0,0 @@
-import { css } from "@microsoft/fast-element";
-import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { accentFillRest, baseHeightMultiplier, controlCornerRadius, density, designUnit, fillColor, foregroundOnAccentRest, neutralForegroundHint, neutralForegroundRest, strokeWidth, } from '../design-tokens';
-import { DirectionalStyleSheetBehavior } from '../styles';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-/**
- * LTR styles for calendar
- * @internal
- */
-const ltrStyles = css `
-.day.disabled::before {
-  transform: translate(-50%, 0) rotate(45deg);
-}
-`;
-/**
- * RTL styles for calendar
- * @internal
- */
-const rtlStyles = css `
-.day.disabled::before {
-  transform: translate(50%, 0) rotate(-45deg);
-}
-`;
-/**
- * Styles for calendar
- * @public
- */
-export const calendarStyles = (context, definition) => css `
-${display("inline-block")} :host {
-  --calendar-cell-size: calc((${baseHeightMultiplier} + 2 + ${density}) * ${designUnit} * 1px);
-  --calendar-gap: 2px;
-  ${typeRampBase}
-  color: ${neutralForegroundRest};
-}
-
-.title {
-  padding: calc(${designUnit} * 2px);
-  font-weight: 600;
-}
-
-.days {
-  text-align: center;
-}
-
-.week-days,
-.week {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  grid-gap: var(--calendar-gap);
-  border: 0;
-  padding: 0;
-}
-
-.day,
-.week-day {
-  border: 0;
-  width: var(--calendar-cell-size);
-  height: var(--calendar-cell-size);
-  line-height: var(--calendar-cell-size);
-  padding: 0;
-  box-sizing: initial;
-}
-
-.week-day {
-  font-weight: 600;
-}
-
-.day {
-  border: calc(${strokeWidth} * 1px) solid transparent;
-  border-radius: calc(${controlCornerRadius} * 1px);
-}
-
-.interact .day {
-  cursor: pointer;
-}
-
-.date {
-  height: 100%;
-}
-
-.inactive .date,
-.inactive.disabled::before {
-  color: ${neutralForegroundHint};
-}
-
-.disabled::before {
-  content: '';
-  display: inline-block;
-  width: calc(var(--calendar-cell-size) * .8);
-  height: calc(${strokeWidth} * 1px);
-  background: currentColor;
-  position: absolute;
-  margin-top: calc(var(--calendar-cell-size) / 2);
-  transform-origin: center;
-  z-index: 1;
-}
-
-.selected {
-  color: ${accentFillRest};
-  border: 1px solid ${accentFillRest};
-  background: ${fillColor};
-}
-
-.selected + .selected {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  border-inline-start-width: 0;
-  padding-inline-start: calc(var(--calendar-gap) + (${strokeWidth} + ${controlCornerRadius}) * 1px);
-  margin-inline-start: calc((${controlCornerRadius} * -1px) - var(--calendar-gap));
-}
-
-.today.disabled::before {
-  color: ${foregroundOnAccentRest};
-}
-
-.today .date {
-  color: ${foregroundOnAccentRest};
-  background: ${accentFillRest};
-  border-radius: 50%;
-  position: relative;
-}
-`.withBehaviors(forcedColorsStylesheetBehavior(css `
-          .day.selected {
-              color: ${SystemColors.Highlight};
-          }
-
-          .today .date {
-              background: ${SystemColors.Highlight};
-              color: ${SystemColors.HighlightText};
-          }
-      `), new DirectionalStyleSheetBehavior(ltrStyles, rtlStyles));

package/dist/esm/calendar/index.js

@@ -1,31 +0,0 @@
-import { __decorate } from "tslib";
-import { attr, booleanConverter } from '@microsoft/fast-element';
-import { CalendarTitleTemplate, Calendar as FoundationCalendar, calendarTemplate as template, } from '@microsoft/fast-foundation';
-import { calendarStyles as styles } from './calendar.styles';
-/**
- * Updated Calendar class that is readonly by default
- */
-export class Calendar extends FoundationCalendar {
-    constructor() {
-        super(...arguments);
-        this.readonly = true;
-    }
-}
-__decorate([
-    attr({ converter: booleanConverter })
-], Calendar.prototype, "readonly", void 0);
-/**
- * The Fluent Calendar Element. Implements {@link @microsoft/fast-foundation#Calendar},
- * {@link @microsoft/fast-foundation#calendarTemplate}
- *
- * @public
- * @remarks
- * HTML Element \<fluent-calendar\>
- */
-export const fluentCalendar = Calendar.compose({
-    baseName: 'calendar',
-    template,
-    styles,
-    title: CalendarTitleTemplate,
-});
-export { styles as calendarStyles };

package/dist/esm/card/card.stories.js

@@ -1,30 +0,0 @@
-import { addons } from '@storybook/addons';
-import { DOCS_RENDERED } from '@storybook/core-events';
-import { DesignSystemProvider, StandardLuminance } from '../index-rollup';
-import CardTemplate from './fixtures/card.html';
-import './index';
-addons.getChannel().addListener(DOCS_RENDERED, name => {
-    if (name.toLowerCase().includes('card')) {
-        const els = document.getElementsByClassName('darkMode');
-        for (let i = 0; i < els.length; i++) {
-            const el = els[i];
-            if (el instanceof DesignSystemProvider) {
-                el.baseLayerLuminance = StandardLuminance.DarkMode;
-            }
-        }
-    }
-});
-export default {
-    title: 'Components/Card',
-};
-export const Card = () => CardTemplate;
-const example = `
-<fluent-card>Card content in default slot</fluent-card>
-`;
-Card.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/card/card.styles.js

@@ -1,28 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { fillColor, layerCornerRadius, neutralForegroundRest, neutralStrokeLayerRest, strokeWidth, } from '../design-tokens';
-import { elevationShadowCardRest } from '../styles';
-export const cardStyles = (context, definition) => css `
-    ${display('block')} :host {
-      display: block;
-      contain: content;
-      height: var(--card-height, 100%);
-      width: var(--card-width, 100%);
-      box-sizing: border-box;
-      background: ${fillColor};
-      color: ${neutralForegroundRest};
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeLayerRest};
-      border-radius: calc(${layerCornerRadius} * 1px);
-      box-shadow: ${elevationShadowCardRest};
-    }
-
-    :host {
-      content-visibility: auto;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host {
-          background: ${SystemColors.Canvas};
-          color: ${SystemColors.CanvasText};
-        }
-      `));

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

@@ -1,33 +0,0 @@
-{
-    "version": 1.1,
-    "tags": [
-        {
-            "name": "fluent-card",
-            "title": "Card",
-            "description": "The Fluent UI card element",
-            "attributes": [
-                {
-                    "name": "card-fill-color",
-                    "title": "Card fill color",
-                    "description": "The fill color for the card, which also sets context for the design system.",
-                    "type": "string",
-                    "required": false
-                },
-                {
-                    "name": "neutral-palette-source",
-                    "title": "Neutral Palette Source",
-                    "description": "The neutral palette source color for the card component to allow tinting, which also sets context for the design system",
-                    "type": "string",
-                    "required": false
-                }
-            ],
-            "slots": [
-                {
-                    "name": "",
-                    "title": "Default slot",
-                    "description": "The content of the card"
-                }
-            ]
-        }
-    ]
-}

package/dist/esm/card/index.js

@@ -1,79 +0,0 @@
-import { __decorate } from "tslib";
-import { composedParent, Card as FoundationCard, cardTemplate as template } from '@microsoft/fast-foundation';
-import { attr, Observable } from '@microsoft/fast-element';
-import { parseColorHexRGB } from '@microsoft/fast-colors';
-import { fillColor, neutralFillLayerRecipe, neutralPalette } from '../design-tokens';
-import { SwatchRGB } from '../color/swatch';
-import { PaletteRGB } from '../color/palette';
-import { cardStyles as styles } from './card.styles';
-/**
- * @public
- */
-export class Card extends FoundationCard {
-    cardFillColorChanged(prev, next) {
-        if (next) {
-            const parsedColor = parseColorHexRGB(next);
-            if (parsedColor !== null) {
-                this.neutralPaletteSource = next;
-                fillColor.setValueFor(this, SwatchRGB.create(parsedColor.r, parsedColor.g, parsedColor.b));
-            }
-        }
-    }
-    neutralPaletteSourceChanged(prev, next) {
-        if (next) {
-            const color = parseColorHexRGB(next);
-            const swatch = SwatchRGB.create(color.r, color.g, color.b);
-            neutralPalette.setValueFor(this, PaletteRGB.create(swatch));
-        }
-    }
-    /**
-     * @internal
-     */
-    handleChange(source, propertyName) {
-        if (!this.cardFillColor) {
-            fillColor.setValueFor(this, (target) => neutralFillLayerRecipe.getValueFor(target).evaluate(target, fillColor.getValueFor(source)).rest);
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        const parent = composedParent(this);
-        if (parent) {
-            const parentNotifier = Observable.getNotifier(parent);
-            parentNotifier.subscribe(this, 'fillColor');
-            parentNotifier.subscribe(this, 'neutralPalette');
-            this.handleChange(parent, 'fillColor');
-        }
-    }
-}
-__decorate([
-    attr({
-        attribute: 'card-fill-color',
-        mode: 'fromView',
-    })
-], Card.prototype, "cardFillColor", void 0);
-__decorate([
-    attr({
-        attribute: 'neutral-palette-source',
-        mode: 'fromView',
-    })
-], Card.prototype, "neutralPaletteSource", void 0);
-/**
- * The Fluent Card Element. Implements {@link @microsoft/fast-foundation#Card},
- * {@link @microsoft/fast-foundation#CardTemplate}
- *
- *
- * @public
- * @remarks
- * HTML Element: \<fluent-card\>
- */
-export const fluentCard = Card.compose({
-    baseName: 'card',
-    baseClass: FoundationCard,
-    template,
-    styles,
-});
-/**
- * Styles for Card
- * @public
- */
-export const cardStyles = styles;

package/dist/esm/checkbox/checkbox.stories.js

@@ -1,43 +0,0 @@
-import { fluentCheckbox } from './index';
-export default {
-    title: 'Components/Checkbox',
-    component: fluentCheckbox,
-    argTypes: {
-        checked: {
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        required: {
-            control: { type: 'boolean' },
-        },
-    },
-    parameters: {
-        actions: {
-            handles: ['mouseover', 'click'],
-        },
-    },
-};
-const CheckboxTemplate = ({ checked, disabled, label, required }) => `<fluent-checkbox
-    ${checked ? 'checked' : ''}
-    ${disabled ? 'disabled' : ''}
-    ${required ? 'required' : ''}
-    >${label}</fluent-checkbox>`;
-export const Checkbox = CheckboxTemplate.bind({});
-Checkbox.args = {
-    label: 'Label string',
-    checked: false,
-    disabled: false,
-    required: false,
-};
-const example = `
-<fluent-checkbox>Label string</fluent-checkbox>
-`;
-Checkbox.parameters = {
-    docs: {
-        source: {
-            code: example,
-        },
-    },
-};

package/dist/esm/checkbox/checkbox.styles.js

@@ -1,161 +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 { accentFillActive, accentFillHover, accentFillRest, controlCornerRadius, designUnit, disabledOpacity, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { focusTreatmentTight } from '../styles/focus';
-export const checkboxStyles = (context, definition) => css `
-    ${display('inline-flex')} :host {
-      align-items: center;
-      outline: none;
-      ${
-/*
- * Chromium likes to select label text or the default slot when
- * the checkbox is clicked. Maybe there is a better solution here?
- */ ''} user-select: none;
-    }
-
-    .control {
-      position: relative;
-      width: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
-      height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
-      box-sizing: border-box;
-      border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};
-      background: ${neutralFillInputAltRest};
-      cursor: pointer;
-    }
-
-    .label__hidden {
-      display: none;
-      visibility: hidden;
-    }
-
-    .label {
-      ${typeRampBase}
-      color: ${neutralForegroundRest};
-      ${
-/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ ''} padding-inline-start: calc(${designUnit} * 2px + 2px);
-      margin-inline-end: calc(${designUnit} * 2px + 2px);
-      cursor: pointer;
-    }
-
-    slot[name='checked-indicator'],
-    slot[name='indeterminate-indicator'] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      fill: ${neutralForegroundRest};
-      opacity: 0;
-      pointer-events: none;
-    }
-
-    slot[name='indeterminate-indicator'] {
-      position: absolute;
-      top: 0;
-    }
-
-    :host(.checked) slot[name='checked-indicator'],
-    :host(.checked) slot[name='indeterminate-indicator'] {
-      fill: ${foregroundOnAccentRest};
-    }
-
-    :host(:not(.disabled):hover) .control {
-      background: ${neutralFillInputAltHover};
-      border-color: ${neutralStrokeStrongHover};
-    }
-
-    :host(:not(.disabled):active) .control {
-      background: ${neutralFillInputAltActive};
-      border-color: ${neutralStrokeStrongActive};
-    }
-
-    :host(:${focusVisible}) .control {
-      background: ${neutralFillInputAltFocus};
-      ${focusTreatmentTight}
-    }
-
-    :host(.checked) .control {
-      background: ${accentFillRest};
-      border-color: transparent;
-    }
-
-    :host(.checked:not(.disabled):hover) .control {
-      background: ${accentFillHover};
-      border-color: transparent;
-    }
-
-    :host(.checked:not(.disabled):active) .control {
-      background: ${accentFillActive};
-      border-color: transparent;
-    }
-
-    :host(.disabled) .label,
-    :host(.readonly) .label,
-    :host(.readonly) .control,
-    :host(.disabled) .control {
-      cursor: ${disabledCursor};
-    }
-
-    :host(.checked:not(.indeterminate)) slot[name='checked-indicator'],
-    :host(.indeterminate) slot[name='indeterminate-indicator'] {
-      opacity: 1;
-    }
-
-    :host(.disabled) {
-      opacity: ${disabledOpacity};
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .control {
-          border-color: ${SystemColors.FieldText};
-          background: ${SystemColors.Field};
-        }
-        :host(:not(.disabled):hover) .control,
-        :host(:not(.disabled):active) .control {
-          border-color: ${SystemColors.Highlight};
-          background: ${SystemColors.Field};
-        }
-        slot[name='checked-indicator'],
-        slot[name='indeterminate-indicator'] {
-          fill: ${SystemColors.FieldText};
-        }
-        :host(:${focusVisible}) .control {
-          forced-color-adjust: none;
-          outline-color: ${SystemColors.FieldText};
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.Highlight};
-        }
-        :host(.checked) .control {
-          background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.Highlight};
-        }
-        :host(.checked:not(.disabled):hover) .control,
-        :host(.checked:not(.disabled):active) .control {
-          background: ${SystemColors.HighlightText};
-          border-color: ${SystemColors.Highlight};
-        }
-        :host(.checked) slot[name='checked-indicator'],
-        :host(.checked) slot[name='indeterminate-indicator'] {
-          fill: ${SystemColors.HighlightText};
-        }
-        :host(.checked:hover ) .control slot[name='checked-indicator'],
-        :host(.checked:hover ) .control slot[name='indeterminate-indicator'] {
-          fill: ${SystemColors.Highlight};
-        }
-        :host(.disabled) {
-          opacity: 1;
-        }
-        :host(.disabled) .control {
-          border-color: ${SystemColors.GrayText};
-          background: ${SystemColors.Field};
-        }
-        :host(.disabled) slot[name='checked-indicator'],
-        :host(.checked.disabled:hover) .control slot[name='checked-indicator'],
-        :host(.disabled) slot[name='indeterminate-indicator'],
-        :host(.checked.disabled:hover) .control slot[name='indeterminate-indicator'] {
-          fill: ${SystemColors.GrayText};
-        }
-      `));