@fluentui/web-components 1.6.3 → 2.1.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
   "sideEffects": false,
-  "version": "1.6.3",
+  "version": "2.1.0",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -18,9 +18,6 @@
   "main": "dist/esm/index.js",
   "types": "dist/web-components.d.ts",
   "unpkg": "dist/web-components.min.js",
-  "beachball": {
-    "disallowedChangeTypes": []
-  },
   "scripts": {
     "clean": "node ./build/clean.js dist",
     "doc": "api-extractor run --local",
@@ -92,7 +89,7 @@
   "dependencies": {
     "@microsoft/fast-colors": "^5.1.0",
     "@microsoft/fast-element": "^1.6.0",
-    "@microsoft/fast-foundation": "^2.23.0",
+    "@microsoft/fast-foundation": "^2.24.0",
     "@microsoft/fast-web-utilities": "^5.0.0",
     "tslib": "^1.13.0"
   }

package/public/switches.ts

@@ -1,25 +1,24 @@
-import { fillColor, StandardLuminance, SwatchRGB } from '../src/index';
+import { Direction } from '@microsoft/fast-web-utilities';
+import { baseLayerLuminance, direction, StandardLuminance } from '../src/index';
 
 export function toggleBgMode() {
-  const bgChecked = document.getElementById('luminance-switch')!.classList.contains('checked');
+  const storyContainer = document.querySelector<HTMLElement>('.docs-story')!;
+  const bgChecked = this.checked;
   if (bgChecked) {
-    fillColor.setValueFor(
-      document.body,
-      SwatchRGB.create(StandardLuminance.LightMode, StandardLuminance.LightMode, StandardLuminance.LightMode),
-    );
+    baseLayerLuminance.setValueFor(storyContainer, StandardLuminance.DarkMode);
   } else {
-    fillColor.setValueFor(
-      document.body,
-      SwatchRGB.create(StandardLuminance.DarkMode, StandardLuminance.DarkMode, StandardLuminance.DarkMode),
-    );
+    baseLayerLuminance.setValueFor(storyContainer, StandardLuminance.LightMode);
   }
 }
 
 export function toggleLtr() {
-  const ltrChecked = document.getElementById('direction-switch')!.classList.contains('checked');
-  if (ltrChecked) {
-    document.querySelector<HTMLElement>('.docs-story')!.setAttribute('style', 'direction:ltr;');
+  const storyContainer = document.querySelector<HTMLElement>('.docs-story')!;
+  const dirChecked = this.checked;
+  if (dirChecked) {
+    storyContainer.style.direction = 'rtl';
+    direction.setValueFor(storyContainer, Direction.rtl);
   } else {
-    document.querySelector<HTMLElement>('.docs-story')!.setAttribute('style', 'direction:rtl;');
+    storyContainer.style.direction = 'ltr';
+    direction.setValueFor(storyContainer, Direction.ltr);
   }
 }

package/dist/dts/color/recipes/accent-fill.d.ts

@@ -1,7 +0,0 @@
-import { Palette } from '../palette';
-import { InteractiveSwatchSet } from '../recipe';
-import { Swatch } from '../swatch';
-/**
- * @internal
- */
-export declare function accentFill(palette: Palette, neutralPalette: Palette, reference: Swatch, hoverDelta: number, activeDelta: number, focusDelta: number, neutralFillRestDelta: number, neutralFillHoverDelta: number, neutralFillActiveDelta: number): InteractiveSwatchSet;

package/dist/dts/color/recipes/accent-foreground.d.ts

@@ -1,7 +0,0 @@
-import { Palette } from '../palette';
-import { InteractiveSwatchSet } from '../recipe';
-import { Swatch } from '../swatch';
-/**
- * @internal
- */
-export declare function accentForeground(palette: Palette, reference: Swatch, contrastTarget: number, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number): InteractiveSwatchSet;

package/dist/dts/color/recipes/neutral-fill-contrast.d.ts

@@ -1,7 +0,0 @@
-import { Palette } from '../palette';
-import { InteractiveSwatchSet } from '../recipe';
-import { Swatch } from '../swatch';
-/**
- * @internal
- */
-export declare function neutralFillContrast(palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number): InteractiveSwatchSet;

package/dist/dts/color/recipes/neutral-fill-input.d.ts

@@ -1,7 +0,0 @@
-import { Palette } from '../palette';
-import { InteractiveSwatchSet } from '../recipe';
-import { Swatch } from '../swatch';
-/**
- * @internal
- */
-export declare function neutralFillInput(palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number): InteractiveSwatchSet;

package/dist/dts/color/recipes/neutral-fill-inverse.d.ts

@@ -1,7 +0,0 @@
-import { Palette } from '../palette';
-import { InteractiveSwatchSet } from '../recipe';
-import { Swatch } from '../swatch';
-/**
- * @internal
- */
-export declare function neutralFillInverse(palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number): InteractiveSwatchSet;

package/dist/dts/color/recipes/neutral-fill-layer.d.ts

@@ -1,6 +0,0 @@
-import { Palette } from '../palette';
-import { Swatch } from '../swatch';
-/**
- * @internal
- */
-export declare function neutralFillLayer(palette: Palette, reference: Swatch, delta: number): Swatch;

package/dist/dts/color/recipes/neutral-fill-stealth.d.ts

@@ -1,7 +0,0 @@
-import { Palette } from '../palette';
-import { InteractiveSwatchSet } from '../recipe';
-import { Swatch } from '../swatch';
-/**
- * @internal
- */
-export declare function neutralFillStealth(palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number, fillRestDelta: number, fillHoverDelta: number, fillActiveDelta: number, fillFocusDelta: number): InteractiveSwatchSet;

package/dist/dts/color/recipes/neutral-fill.d.ts

@@ -1,14 +0,0 @@
-import { Palette } from '../palette';
-import { InteractiveSwatchSet } from '../recipe';
-import { Swatch } from '../swatch';
-/**
- *
- * @param palette - The palette to operate on
- * @param reference - The reference color to calculate a color for
- * @param delta - The offset from the reference's location
- * @param threshold - Determines if a lighter or darker color than the reference will be picked.
- * @returns
- *
- * @internal
- */
-export declare function neutralFill(palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number): InteractiveSwatchSet;

package/dist/dts/color/recipes/neutral-foreground-hint.d.ts

@@ -1,10 +0,0 @@
-import { Palette } from '../palette';
-import { Swatch } from '../swatch';
-/**
- * The neutralForegroundHint color recipe
- * @param palette - The palette to operate on
- * @param reference - The reference color
- *
- * @internal
- */
-export declare function neutralForegroundHint(palette: Palette, reference: Swatch): Swatch;

package/dist/dts/color/recipes/neutral-foreground.d.ts

@@ -1,6 +0,0 @@
-import { Palette } from '../palette';
-import { Swatch } from '../swatch';
-/**
- * @internal
- */
-export declare function neutralForeground(palette: Palette, reference: Swatch): Swatch;

package/dist/dts/color/recipes/neutral-layer-card-container.d.ts

@@ -1,6 +0,0 @@
-import { Palette } from '../palette';
-import { Swatch } from '../swatch';
-/**
- * @internal
- */
-export declare function neutralLayerCardContainer(palette: Palette, relativeLuminance: number, layerDelta: number): Swatch;

package/dist/dts/color/recipes/neutral-stroke-strong.d.ts

@@ -1,7 +0,0 @@
-import { Palette } from '../palette';
-import { InteractiveSwatchSet } from '../recipe';
-import { Swatch } from '../swatch';
-/**
- * @internal
- */
-export declare function neutralStrokeStrong(palette: Palette, reference: Swatch, restContrast: number, hoverDelta: number, activeDelta: number, focusDelta: number): InteractiveSwatchSet;

package/dist/dts/color/recipes/neutral-stroke.d.ts

@@ -1,7 +0,0 @@
-import { Palette } from '../palette';
-import { InteractiveSwatchSet } from '../recipe';
-import { Swatch } from '../swatch';
-/**
- * @internal
- */
-export declare function neutralStroke(palette: Palette, reference: Swatch, restDelta: number, hoverDelta: number, activeDelta: number, focusDelta: number): InteractiveSwatchSet;

package/dist/dts/styles/patterns/input.d.ts

@@ -1,4 +0,0 @@
-/**
- * @internal
- */
-export declare const fillStateStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;

package/dist/dts/utilities/math.d.ts

@@ -1,24 +0,0 @@
-/**
- * Adds numbers or functions that accept a design system and return a number.
- * @internal
- * @deprecated
- */
-export declare function add<T>(...args: Array<number | ((designSystem: T) => number)>): (designSystem?: T) => number;
-/**
- * Subtract numbers or functions that accept a design system and return a number.
- * @internal
- * @deprecated
- */
-export declare function subtract<T>(...args: Array<number | ((designSystem: T) => number)>): (designSystem?: T) => number;
-/**
- * Multiplies numbers or functions that accept a design system and return a number.
- * @internal
- * @deprecated
- */
-export declare function multiply<T>(...args: Array<number | ((designSystem: T) => number)>): (designSystem?: T) => number;
-/**
- * Divides numbers or functions that accept a design system and return a number.
- * @internal
- * @deprecated
- */
-export declare function divide<T>(...args: Array<number | ((designSystem: T) => number)>): (designSystem?: T) => number;

package/dist/esm/color/recipes/accent-fill.js

@@ -1,18 +0,0 @@
-/**
- * @internal
- */
-export function accentFill(palette, neutralPalette, reference, hoverDelta, activeDelta, focusDelta, neutralFillRestDelta, neutralFillHoverDelta, neutralFillActiveDelta) {
-    const accent = palette.source;
-    const direction = 1;
-    const accentIndex = palette.closestIndexOf(accent);
-    const restIndex = accentIndex;
-    const hoverIndex = restIndex + direction * hoverDelta;
-    const activeIndex = restIndex + direction * activeDelta;
-    const focusIndex = restIndex + direction * focusDelta;
-    return {
-        rest: palette.get(restIndex),
-        hover: palette.get(hoverIndex),
-        active: palette.get(activeIndex),
-        focus: palette.get(focusIndex),
-    };
-}

package/dist/esm/color/recipes/accent-foreground.js

@@ -1,31 +0,0 @@
-import { directionByIsDark } from '../utilities/direction-by-is-dark';
-/**
- * @internal
- */
-export function accentForeground(palette, reference, contrastTarget, restDelta, hoverDelta, activeDelta, focusDelta) {
-    const accent = palette.source;
-    const accentIndex = palette.closestIndexOf(accent);
-    const direction = directionByIsDark(reference);
-    const startIndex = accentIndex +
-        (direction === 1 ? Math.min(restDelta, hoverDelta) : Math.max(direction * restDelta, direction * hoverDelta));
-    const accessibleSwatch = palette.colorContrast(reference, contrastTarget, startIndex, direction);
-    const accessibleIndex1 = palette.closestIndexOf(accessibleSwatch);
-    const accessibleIndex2 = accessibleIndex1 + direction * Math.abs(restDelta - hoverDelta);
-    const indexOneIsRestState = direction === 1 ? restDelta < hoverDelta : direction * restDelta > direction * hoverDelta;
-    let restIndex;
-    let hoverIndex;
-    if (indexOneIsRestState) {
-        restIndex = accessibleIndex1;
-        hoverIndex = accessibleIndex2;
-    }
-    else {
-        restIndex = accessibleIndex2;
-        hoverIndex = accessibleIndex1;
-    }
-    return {
-        rest: palette.get(restIndex),
-        hover: palette.get(hoverIndex),
-        active: palette.get(restIndex + direction * activeDelta),
-        focus: palette.get(restIndex + direction * focusDelta),
-    };
-}

package/dist/esm/color/recipes/neutral-fill-contrast.js

@@ -1,26 +0,0 @@
-import { directionByIsDark } from '../utilities/direction-by-is-dark';
-/**
- * @internal
- */
-export function neutralFillContrast(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta) {
-    const direction = directionByIsDark(reference);
-    const accessibleIndex = palette.closestIndexOf(palette.colorContrast(reference, 4.5));
-    const accessibleIndex2 = accessibleIndex + direction * Math.abs(restDelta - hoverDelta);
-    const indexOneIsRest = direction === 1 ? restDelta < hoverDelta : direction * restDelta > direction * hoverDelta;
-    let restIndex;
-    let hoverIndex;
-    if (indexOneIsRest) {
-        restIndex = accessibleIndex;
-        hoverIndex = accessibleIndex2;
-    }
-    else {
-        restIndex = accessibleIndex2;
-        hoverIndex = accessibleIndex;
-    }
-    return {
-        rest: palette.get(restIndex),
-        hover: palette.get(hoverIndex),
-        active: palette.get(restIndex + direction * activeDelta),
-        focus: palette.get(restIndex + direction * focusDelta),
-    };
-}

package/dist/esm/color/recipes/neutral-fill-input.js

@@ -1,14 +0,0 @@
-import { directionByIsDark } from '../utilities/direction-by-is-dark';
-/**
- * @internal
- */
-export function neutralFillInput(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta) {
-    const direction = directionByIsDark(reference);
-    const referenceIndex = palette.closestIndexOf(reference);
-    return {
-        rest: palette.get(referenceIndex - direction * restDelta),
-        hover: palette.get(referenceIndex - direction * hoverDelta),
-        active: palette.get(referenceIndex - direction * activeDelta),
-        focus: palette.get(referenceIndex - direction * focusDelta),
-    };
-}

package/dist/esm/color/recipes/neutral-fill-inverse.js

@@ -1,26 +0,0 @@
-import { directionByIsDark } from '../utilities/direction-by-is-dark';
-/**
- * @internal
- */
-export function neutralFillInverse(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta) {
-    const direction = directionByIsDark(reference);
-    const accessibleIndex = palette.closestIndexOf(palette.colorContrast(reference, 14));
-    const accessibleIndex2 = accessibleIndex + direction * Math.abs(restDelta - hoverDelta);
-    const indexOneIsRest = direction === 1 ? restDelta < hoverDelta : direction * restDelta > direction * hoverDelta;
-    let restIndex;
-    let hoverIndex;
-    if (indexOneIsRest) {
-        restIndex = accessibleIndex;
-        hoverIndex = accessibleIndex2;
-    }
-    else {
-        restIndex = accessibleIndex2;
-        hoverIndex = accessibleIndex;
-    }
-    return {
-        rest: palette.get(restIndex),
-        hover: palette.get(hoverIndex),
-        active: palette.get(restIndex + direction * activeDelta),
-        focus: palette.get(restIndex + direction * focusDelta),
-    };
-}

package/dist/esm/color/recipes/neutral-fill-layer.js

@@ -1,7 +0,0 @@
-/**
- * @internal
- */
-export function neutralFillLayer(palette, reference, delta) {
-    const referenceIndex = palette.closestIndexOf(reference);
-    return palette.get(referenceIndex - delta);
-}

package/dist/esm/color/recipes/neutral-fill-stealth.js

@@ -1,14 +0,0 @@
-/**
- * @internal
- */
-export function neutralFillStealth(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta, fillRestDelta, fillHoverDelta, fillActiveDelta, fillFocusDelta) {
-    const swapThreshold = Math.max(restDelta, hoverDelta, activeDelta, focusDelta, fillRestDelta, fillHoverDelta, fillActiveDelta, fillFocusDelta);
-    const referenceIndex = palette.closestIndexOf(reference);
-    const direction = referenceIndex >= swapThreshold ? -1 : 1;
-    return {
-        rest: palette.get(referenceIndex + direction * restDelta),
-        hover: palette.get(referenceIndex + direction * hoverDelta),
-        active: palette.get(referenceIndex + direction * activeDelta),
-        focus: palette.get(referenceIndex + direction * focusDelta),
-    };
-}

package/dist/esm/color/recipes/neutral-fill.js

@@ -1,21 +0,0 @@
-/**
- *
- * @param palette - The palette to operate on
- * @param reference - The reference color to calculate a color for
- * @param delta - The offset from the reference's location
- * @param threshold - Determines if a lighter or darker color than the reference will be picked.
- * @returns
- *
- * @internal
- */
-export function neutralFill(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta) {
-    const referenceIndex = palette.closestIndexOf(reference);
-    const threshold = Math.max(restDelta, hoverDelta, activeDelta, focusDelta);
-    const direction = referenceIndex >= threshold ? -1 : 1;
-    return {
-        rest: palette.get(referenceIndex + direction * restDelta),
-        hover: palette.get(referenceIndex + direction * hoverDelta),
-        active: palette.get(referenceIndex + direction * activeDelta),
-        focus: palette.get(referenceIndex + direction * focusDelta),
-    };
-}

package/dist/esm/color/recipes/neutral-foreground-hint.js

@@ -1,10 +0,0 @@
-/**
- * The neutralForegroundHint color recipe
- * @param palette - The palette to operate on
- * @param reference - The reference color
- *
- * @internal
- */
-export function neutralForegroundHint(palette, reference) {
-    return palette.colorContrast(reference, 4.5);
-}

package/dist/esm/color/recipes/neutral-foreground.js

@@ -1,6 +0,0 @@
-/**
- * @internal
- */
-export function neutralForeground(palette, reference) {
-    return palette.colorContrast(reference, 14);
-}

package/dist/esm/color/recipes/neutral-layer-card-container.js

@@ -1,9 +0,0 @@
-import { clamp } from '@microsoft/fast-colors';
-import { baseLayerLuminanceSwatch } from '../utilities/base-layer-luminance';
-/**
- * @internal
- */
-export function neutralLayerCardContainer(palette, relativeLuminance, layerDelta) {
-    const oldCardIndex = clamp(palette.closestIndexOf(baseLayerLuminanceSwatch(relativeLuminance)) - layerDelta, 0, palette.swatches.length - 1);
-    return palette.get(oldCardIndex + layerDelta);
-}

package/dist/esm/color/recipes/neutral-stroke-strong.js

@@ -1,15 +0,0 @@
-import { directionByIsDark } from '../utilities/direction-by-is-dark';
-/**
- * @internal
- */
-export function neutralStrokeStrong(palette, reference, restContrast, hoverDelta, activeDelta, focusDelta) {
-    const direction = directionByIsDark(reference);
-    const restSwatch = palette.colorContrast(reference, restContrast);
-    const restIndex = palette.closestIndexOf(restSwatch);
-    return {
-        rest: restSwatch,
-        hover: palette.get(restIndex + direction * hoverDelta),
-        active: palette.get(restIndex + direction * activeDelta),
-        focus: palette.get(restIndex + direction * focusDelta),
-    };
-}

package/dist/esm/color/recipes/neutral-stroke.js

@@ -1,18 +0,0 @@
-import { directionByIsDark } from '../utilities/direction-by-is-dark';
-/**
- * @internal
- */
-export function neutralStroke(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta) {
-    const referenceIndex = palette.closestIndexOf(reference);
-    const direction = directionByIsDark(reference);
-    const restIndex = referenceIndex + direction * restDelta;
-    const hoverIndex = restIndex + direction * (hoverDelta - restDelta);
-    const activeIndex = restIndex + direction * (activeDelta - restDelta);
-    const focusIndex = restIndex + direction * (focusDelta - restDelta);
-    return {
-        rest: palette.get(restIndex),
-        hover: palette.get(hoverIndex),
-        active: palette.get(activeIndex),
-        focus: palette.get(focusIndex),
-    };
-}

package/dist/esm/styles/patterns/input.js

@@ -1,31 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { accentFillRest, controlCornerRadius, focusStrokeWidth } from '../../design-tokens';
-/**
- * @internal
- */
-export const fillStateStyles = (context, definition) => css `
-  :host([appearance='filled']:not(.disabled):active)::after,
-  :host([appearance='filled']:not(.disabled):focus-within:not(:active))::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    border-bottom: calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};
-    border-bottom-left-radius: calc(${controlCornerRadius} * 1px);
-    border-bottom-right-radius: calc(${controlCornerRadius} * 1px);
-    z-index: 2;
-    transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
-  }
-
-  :host([appearance='filled']:not(.disabled):active)::after {
-    left: 50%;
-    width: 40%;
-    transform: translateX(-50%);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  :host([appearance='filled']:not(.disabled):focus-within:not(:active))::after {
-    left: 0;
-    width: 100%;
-  }
-`;

package/dist/esm/utilities/math.js

@@ -1,49 +0,0 @@
-function performOperation(operation) {
-    return (...args) => {
-        return (designSystem) => {
-            const firstArg = args[0];
-            let value = typeof firstArg === 'function' ? firstArg(designSystem) : firstArg;
-            for (let i = 1; i < args.length; i++) {
-                const currentValue = args[i];
-                value = operation(value, typeof currentValue === 'function' ? currentValue(designSystem) : currentValue);
-            }
-            return value;
-        };
-    };
-}
-const _add = performOperation((a, b) => a + b);
-const _subtract = performOperation((a, b) => a - b);
-const _multiply = performOperation((a, b) => a * b);
-const _divide = performOperation((a, b) => a / b);
-/**
- * Adds numbers or functions that accept a design system and return a number.
- * @internal
- * @deprecated
- */
-export function add(...args) {
-    return _add.apply(this, args);
-}
-/**
- * Subtract numbers or functions that accept a design system and return a number.
- * @internal
- * @deprecated
- */
-export function subtract(...args) {
-    return _subtract.apply(this, args);
-}
-/**
- * Multiplies numbers or functions that accept a design system and return a number.
- * @internal
- * @deprecated
- */
-export function multiply(...args) {
-    return _multiply.apply(this, args);
-}
-/**
- * Divides numbers or functions that accept a design system and return a number.
- * @internal
- * @deprecated
- */
-export function divide(...args) {
-    return _divide.apply(this, args);
-}