Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@microsoft/fast-foundation

Microsoft615kMIT2.50.0TypeScript support: included

A library of Web Component building blocks

readme

FAST Foundation

License: MIT npm version

The fast-foundation package is a library of Web Component classes, templates, and other utilities intended to be composed into registered Web Components by design systems (e.g. Fluent Design, Material Design, etc.). The exports of this package can generally be thought of as un-styled base components that implement semantic and accessible markup and behavior.

This package does not export Web Components registered as custom elements - it exports parts and pieces intended to be composed into Web Components, allowing you to implement your own design language by simply applying CSS styles and behaviors without having to write all the JavaScript that's involved in building production-quality component implementations.

Installation

From NPM

To install the fast-foundation library, use either npm or yarn as follows:

npm install --save @microsoft/fast-foundation
yarn add @microsoft/fast-foundation

Within your JavaScript or TypeScript code, you can then import library APIs like this:

import { Anchor } from '@microsoft/fast-foundation';

Looking for a setup that integrates with a particular front-end framework or bundler? Check out our integration docs.

From CDN

A pre-bundled script that contains all APIs needed to use FAST Foundation is available on CDN. You can use this script by adding type="module" to the script element and then importing from the CDN.

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="module">
          import { Anchor } from "https://cdn.jsdelivr.net/npm/@microsoft/fast-foundation/dist/fast-foundation.min.js";

          // your code here
        </script>
    </head>
    <!-- ... -->
</html>

The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:

<script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-foundation@2.26.2/dist/fast-foundation.min.js"></script>

:::note For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL. :::

changelog

Change Log - @microsoft/fast-foundation

This log was last generated on Wed, 23 Oct 2024 23:53:44 GMT and should not be manually modified.

2.50.0

Wed, 23 Oct 2024 23:53:44 GMT

Minor changes

  • feat: close combobox if indicator is clicked and no selection is made (=)
  • Bump @microsoft/fast-element to v1.14.0

Patches

2.49.5

Tue, 23 Jan 2024 19:35:35 GMT

Patches

2.49.4

Thu, 09 Nov 2023 19:30:24 GMT

Patches

2.49.3

Wed, 01 Nov 2023 20:34:39 GMT

Patches

2.49.1

Fri, 11 Aug 2023 00:10:28 GMT

Patches

2.49.0

Thu, 04 May 2023 17:35:08 GMT

Minor changes

  • add else case to when directive (chhol@microsoft.com)
  • Bump @microsoft/fast-element to v1.12.0

2.48.1

Fri, 14 Apr 2023 19:08:49 GMT

Patches

  • Bump @microsoft/fast-element to v1.11.1

2.48.0

Mon, 10 Apr 2023 18:32:45 GMT

Minor changes

Patches

2.47.1-0

Mon, 28 Nov 2022 18:28:05 GMT

Changes

2.47.0

Tue, 25 Oct 2022 03:07:31 GMT

Minor changes

  • fix(fast-foundation): update mixin helper to use new attribute api (roeisenb@microsoft.com)
  • Bump @microsoft/fast-element to v1.11.0

Patches

2.46.14

Fri, 02 Sep 2022 17:18:31 GMT

Patches

2.46.13

Sat, 27 Aug 2022 16:53:58 GMT

Patches

2.46.12

Wed, 17 Aug 2022 16:41:39 GMT

Patches

2.46.9

Sun, 29 May 2022 07:08:52 GMT

Patches

2.46.8

Thu, 26 May 2022 07:11:44 GMT

Patches

2.46.7

Wed, 25 May 2022 07:09:21 GMT

Patches

2.46.6

Tue, 24 May 2022 07:10:02 GMT

Patches

2.46.5

Sun, 22 May 2022 07:09:02 GMT

Patches

2.46.4

Thu, 19 May 2022 07:09:40 GMT

Patches

2.46.3

Tue, 10 May 2022 07:11:04 GMT

Patches

2.46.2

Thu, 05 May 2022 07:11:41 GMT

Patches

2.46.1

Wed, 04 May 2022 07:14:00 GMT

Patches

2.46.0

Tue, 03 May 2022 07:15:44 GMT

Minor changes

Patches

2.45.0

Sun, 01 May 2022 07:12:05 GMT

Minor changes

  • add select method to number field, text field, and text area components (chhol@microsoft.com)

Patches

2.44.0

Thu, 28 Apr 2022 07:12:47 GMT

Minor changes

2.43.0

Wed, 27 Apr 2022 07:21:09 GMT

Minor changes

Patches

2.42.2

Thu, 21 Apr 2022 07:13:54 GMT

Patches

2.42.1

Sun, 17 Apr 2022 07:11:18 GMT

Patches

  • fix: scrolling back from end and forward retains next flipper in horizontal-scroll (robarb@microsoft.com)
  • Ensured that tabs without an ID use a unique ID to prevent duplicate IDs when multiple tabs are on a page (chhol@microsoft.com)
  • Ensure the skeleton component's object element is not included in the accessibility tree (chhol@microsoft.com)

2.42.0

Thu, 14 Apr 2022 07:12:36 GMT

Minor changes

2.41.1

Thu, 07 Apr 2022 07:12:06 GMT

Patches

2.41.0

Wed, 06 Apr 2022 07:12:42 GMT

Minor changes

Patches

2.40.0

Sun, 03 Apr 2022 07:12:01 GMT

Minor changes

Patches

2.39.0

Thu, 31 Mar 2022 07:13:31 GMT

Minor changes

  • remove duplicate use of heading class in accordion item and update part location (chhol@microsoft.com)

Patches

2.38.0

Sun, 27 Mar 2022 07:11:50 GMT

Minor changes

2.37.2

Thu, 24 Mar 2022 07:12:08 GMT

Patches

2.37.1

Sun, 20 Mar 2022 07:15:44 GMT

Patches

2.37.0

Wed, 16 Mar 2022 07:12:41 GMT

Minor changes

2.36.1

Tue, 15 Mar 2022 07:12:38 GMT

Patches

2.36.0

Fri, 11 Mar 2022 23:46:34 GMT

Minor changes

Patches

2.35.2

Wed, 09 Mar 2022 07:12:32 GMT

Patches

2.35.1

Tue, 08 Mar 2022 07:12:45 GMT

Patches

2.35.0

Sun, 06 Mar 2022 07:13:48 GMT

Minor changes

Patches

2.34.0

Wed, 02 Mar 2022 07:12:58 GMT

Minor changes

Patches

2.33.6

Fri, 25 Feb 2022 17:09:32 GMT

Patches

2.33.5

Thu, 24 Feb 2022 22:21:55 GMT

Patches

2.33.4

Sun, 20 Feb 2022 07:16:20 GMT

Patches

2.33.3

Tue, 15 Feb 2022 07:11:28 GMT

Patches

2.33.2

Thu, 10 Feb 2022 07:12:01 GMT

Patches

2.33.1

Wed, 09 Feb 2022 07:14:00 GMT

Patches

2.33.0

Sun, 06 Feb 2022 07:15:20 GMT

Minor changes

Patches

2.32.3

Wed, 02 Feb 2022 07:13:39 GMT

Patches

2.32.2

Sun, 30 Jan 2022 07:12:35 GMT

Patches

2.32.1

Tue, 25 Jan 2022 07:11:53 GMT

Patches

2.32.0

Sun, 23 Jan 2022 07:13:56 GMT

Minor changes

Patches

2.31.0

Thu, 20 Jan 2022 07:12:04 GMT

Minor changes

2.30.0

Sun, 16 Jan 2022 07:11:36 GMT

Minor changes

2.29.0

Sun, 09 Jan 2022 07:11:51 GMT

Minor changes

2.28.0

Thu, 06 Jan 2022 07:11:52 GMT

Minor changes

  • fix: prevent events to propagate from disabled button (#4884) (email not defined)

Patches

2.27.3

Sun, 19 Dec 2021 07:12:39 GMT

Patches

2.27.2

Wed, 15 Dec 2021 07:14:44 GMT

Patches

2.27.1

Thu, 02 Dec 2021 07:11:13 GMT

Patches

2.27.0

Tue, 23 Nov 2021 07:12:23 GMT

Minor changes

2.26.2

Thu, 11 Nov 2021 07:15:33 GMT

Patches

2.26.1

Wed, 10 Nov 2021 07:12:54 GMT

Patches

2.26.0

Tue, 09 Nov 2021 07:14:09 GMT

Minor changes

2.25.1

Thu, 04 Nov 2021 07:11:59 GMT

Patches

2.25.0

Wed, 03 Nov 2021 07:12:39 GMT

Minor changes

2.24.0

Sun, 31 Oct 2021 07:17:45 GMT

Minor changes

  • Added the CheckableFormAssociated mixin to better support the addition of current-checked property/attribute that allows for setting checked state via the .setAttribute() API. This change also converts two lifecycle hooks to methods from properties so that they can be handled correctly by the browser. (nicholasrice@users.noreply.github.com)

Patches

2.23.2

Thu, 28 Oct 2021 07:15:32 GMT

Patches

2.23.1

Wed, 27 Oct 2021 07:11:58 GMT

Patches

2.23.0

Fri, 22 Oct 2021 17:40:52 GMT

Minor changes

  • adds a currentValue property to form-associated to facilitate attribute-based data binding for form values (chhol@microsoft.com)

Patches

2.22.1

Thu, 21 Oct 2021 07:11:42 GMT

Patches

2.22.0

Wed, 20 Oct 2021 07:13:46 GMT

Minor changes

2.21.0

Fri, 15 Oct 2021 23:24:14 GMT

Minor changes

Patches

2.20.0

Wed, 13 Oct 2021 22:45:16 GMT

Minor changes

Patches

2.19.0

Wed, 13 Oct 2021 01:53:37 GMT

Minor changes

Patches

2.18.0

Tue, 12 Oct 2021 07:15:14 GMT

Minor changes

Patches

2.17.3

Sun, 10 Oct 2021 07:12:26 GMT

Patches

2.17.2

Fri, 08 Oct 2021 19:53:11 GMT

Patches

2.17.1

Wed, 06 Oct 2021 07:11:47 GMT

Patches

2.17.0

Tue, 05 Oct 2021 00:45:07 GMT

Minor changes

Patches

2.16.5

Thu, 30 Sep 2021 07:13:45 GMT

Patches

2.16.4

Wed, 29 Sep 2021 07:13:40 GMT

Patches

2.16.3

Tue, 28 Sep 2021 07:10:49 GMT

Patches

2.16.2

Mon, 27 Sep 2021 07:12:15 GMT

Patches

2.16.1

Thu, 23 Sep 2021 07:14:34 GMT

Patches

2.16.0

Wed, 22 Sep 2021 07:13:13 GMT

Minor changes

Patches

2.15.0

Sun, 19 Sep 2021 07:17:17 GMT

Minor changes

Patches

2.14.0

Wed, 15 Sep 2021 19:49:35 GMT

Minor changes

Patches

2.13.1

Tue, 14 Sep 2021 07:16:47 GMT

Patches

  • Using a manual focus to workaround delegatesFocus issues on Firefox for the button and anchor components (jumarroq@microsoft.com)

2.13.0

Sun, 12 Sep 2021 07:17:43 GMT

Minor changes

Patches

2.12.0

Thu, 09 Sep 2021 07:21:36 GMT

Minor changes

Patches

2.11.0

Wed, 08 Sep 2021 07:16:17 GMT

Minor changes

Patches

2.10.0

Thu, 02 Sep 2021 17:17:56 GMT

Minor changes

2.9.1

Thu, 02 Sep 2021 07:15:21 GMT

Patches

2.9.0

Wed, 01 Sep 2021 07:18:34 GMT

Minor changes

Patches

2.8.1

Mon, 30 Aug 2021 22:30:39 GMT

Patches

2.8.0

Fri, 27 Aug 2021 14:14:26 GMT

Minor changes

Patches

2.7.1

Thu, 26 Aug 2021 07:17:43 GMT

Patches

2.7.0

Wed, 25 Aug 2021 07:17:07 GMT

Minor changes

2.6.5

Thu, 19 Aug 2021 07:15:21 GMT

Patches

2.6.4

Thu, 12 Aug 2021 07:16:50 GMT

Patches

2.6.3

Wed, 04 Aug 2021 07:15:14 GMT

Patches

2.6.2

Thu, 29 Jul 2021 07:18:18 GMT

Patches

2.6.1

Wed, 28 Jul 2021 07:17:22 GMT

Patches

2.6.0

Sun, 25 Jul 2021 07:17:41 GMT

Minor changes

2.5.2

Thu, 22 Jul 2021 07:19:53 GMT

Patches

2.5.1

Wed, 21 Jul 2021 07:14:48 GMT

Patches

2.5.0

Thu, 15 Jul 2021 01:41:48 GMT

Minor changes

2.4.0

Tue, 13 Jul 2021 07:14:52 GMT

Minor changes

2.3.0

Wed, 07 Jul 2021 07:19:51 GMT

Minor changes

2.2.0

Sun, 04 Jul 2021 07:15:28 GMT

Minor changes

2.1.0

Thu, 01 Jul 2021 07:15:57 GMT

Minor changes

Patches

2.0.0

Fri, 25 Jun 2021 02:02:57 GMT

Major changes

Minor changes

1.24.8

Wed, 23 Jun 2021 22:58:18 GMT

Patches

1.24.7

Sun, 20 Jun 2021 07:21:25 GMT

Patches

1.24.6

Sun, 13 Jun 2021 07:19:23 GMT

Patches

1.24.5

Tue, 08 Jun 2021 07:29:18 GMT

Patches

1.24.4

Sun, 30 May 2021 07:42:30 GMT

Patches

1.24.3

Wed, 26 May 2021 07:33:37 GMT

Patches

1.24.2

Tue, 25 May 2021 07:27:43 GMT

Patches

1.24.1

Fri, 21 May 2021 17:48:08 GMT

Patches

1.24.0

Thu, 20 May 2021 07:24:10 GMT

Minor changes

Patches

1.23.0

Wed, 19 May 2021 23:37:36 GMT

Minor changes

Patches

1.20.0

Sun, 25 Apr 2021 07:21:02 GMT

Minor changes

1.19.0

Thu, 22 Apr 2021 07:21:10 GMT

Minor changes

Patches

  • add function to check for separator, add example and update style for not href item (khamu@microsoft.com)

1.18.0

Fri, 16 Apr 2021 01:19:08 GMT

Minor changes

Patches

1.16.1 (2021-03-18)

Bug Fixes

  • combobox with typescript ^4.0 (#4475) (e9d3b34)
  • ensure no exception is thrown when no properties are defined (#4469) (40dc56c)

1.16.0 (2021-03-16)

Bug Fixes

Features

1.15.1 (2021-03-06)

Bug Fixes

  • conditionally render input container for menuitemcheckbox and menuitemradio (#4429) (8561a99)

1.15.0 (2021-03-06)

Bug Fixes

Features

  • add placeholder attribute to combobox component (#4427) (b507c25)
  • di: enable dom containers to handle same element dep resolution (#4406) (e3145fe)
  • add combobox component (#4379) (aab8441)
  • add nested menu support (#4142) (551ff04)
  • di: enable use of the inject decorator on properties (#4401) (2f8355b)
  • add prefers-color-scheme behaviors for light and dark mode (#4382) (1e467d7)
  • enable FoundationElement.compose to accept template functions (#4390) (468f2fc)

1.14.0 (2021-02-08)

Bug Fixes

  • accordion arrow key press moves focus from content to accordion header (#4331) (d959c18)
  • add check for intersection observer support before instanciating (#4349) (d106995)

Features

  • adds DI system, Configuration, and FoundationElement (#4166) (cfbe786)

1.13.0 (2021-02-08)

Bug Fixes

  • accordion arrow key press moves focus from content to accordion header (#4331) (d959c18)
  • add check for intersection observer support before instanciating (#4349) (d106995)

Features

  • adds DI system, Configuration, and FoundationElement (#4166) (cfbe786)

1.12.0 (2021-01-30)

Bug Fixes

  • UnhandledPromiseRejectionWarnings when building fast-components (#4218) (48d52f4)
  • add class content to fix missing underline on button component (#4226) (bb9caaf), closes #4201 #16271
  • add whitespace filter to text-field template to correctly hide label div with start and end content (#4245) (70ce353)
  • display active indicator when tab is disabled (#4207) (ca0efbb)
  • expand collapse tree view svg (#4225) (c6d6259)
  • tooltips are incorrectly positioned when parent is a flex container (#4256) (bc47c02)

Features

  • add disclosure component (#3921) (dec77c9)
  • add fast-number-field component for data applications (#4204) (7196215)
  • add getPosition service for anchored region (#4210) (94d5ffa)
  • add radio group functionality to menu items (#4208) (89a3930)
  • add select spec (#4194) (7af127a)
  • Create a behavior for attaching component styles based on an appearance (#4238) (7b498ce)

1.11.1 (2020-12-17)

Bug Fixes

  • update applyMixin function to ensure metadata for attrs are copied and applied correctly (#4200) (dcbd6a5)

1.11.0 (2020-12-16)

Bug Fixes

  • anchored region default viewport (#4146) (a6806e9)
  • select should match native behavior for value changes and change event emitting (#4176) (07f5eaa)
  • dialog: accidental improperly bound this in callback (#4168) (9d54fe9)
  • fast-foundation: ensure global aria attrs are applied (#4172) (dd3a1c9)
  • disabled menu items should be focusable (#4154) (b971a18)
  • ensure DSP subscribes to upstream DSP properties (#4143) (b403909)
  • formassociated tests on firefox (#4158) (b3266fb)
  • remove shadowRoot in direction utility (#4157) (041ae70)

Features

1.10.0 (2020-12-02)

Bug Fixes

  • fix type error in custom property manager running on safari (#4147) (6320973)

Features

1.9.0 (2020-11-19)

Bug Fixes

  • active indicator losing track if double click (#4085) (fcecc75)
  • active indicator no longer animating (#4126) (49e2608)
  • corrects ElementInternals feature detection (#4087) (58b3e54)
  • ensure form elements reset when the parent form's reset() method is invoked. (#4075) (f19894e)
  • ensure StyleElementCustomPropertyManager works with disconnected elements (#4112) (e903bfa)
  • ensure tree items with children have a value for aria-expanded (#4114) (e7a7553)
  • fast-slider sets value to NaN if developer tools open (#4033) (35d6903)
  • handle initially set value in FormAssociated (#4047) (bf7e874)
  • move component options to independent modules (#4048) (f8a88a8)
  • revert radio to using class selector instead of attr, update slider-label to use internal styles for orientation (#4108) (c6ecedf)

Features

1.8.1 (2020-10-14)

Bug Fixes

  • allow child radio buttons to be changed multiple times from javascript (#3976) (8ea7cc8)
  • corrects keyboard behavior of tree view and tree view item. (#4003) (9d80632)
  • designSystem property resolution behavior correction (#4032) (7e82cae)
  • leverage FASTController.addStyles to attach css custom property target sheet (#4031) (2ca2ed0)
  • tabs directional arrow key bug (#3986) (2d797a5)

1.8.0 (2020-09-28)

Bug Fixes

Features

1.7.2 (2020-09-10)

Bug Fixes

  • able to keyboard tab back in the tree view (#3867) (d3e3cde), closes #3801
  • implicit form-associated submission (#3861) (8342912)
  • move right and move left functionality of radio-group in RTL (f2735aa)
  • tabs right and left keyboarding in rtl (#3836) (d9ac1b1)

1.7.1 (2020-08-27)

Bug Fixes

  • consistent with min-width, min-height is at least the thumb size add default height (#3746) (b3f9aee)
  • proxy element causes empty check on slots to fail (#3779) (78787c3)
  • docs: correct typos in readme and spec files (#3740) (9bdb11f)

1.7.0 (2020-08-13)

Bug Fixes

  • anchored region fails on firefox (#3701) (1fd02e0)
  • changed setupDefault to set initialValue which will set dirtyValue false after changing (#3642) (0b30fdf)
  • correct tabs animation when using home/end touch (#3718) (24ed0e5)
  • correct typos on aria attributes (#3690) (d1c9ba4)
  • fix radiogroup tabfocus (#3650) (59536fe)
  • hitting enter key when in the text-field did not submit form (#3687) (3bc4384)
  • turn off animation when dragging (#3664) (49e9d02)
  • wrapping set focus in dom.queueupdate (#3703) (7cb4616)

Features

Reverts

  • Revert "chore: update all http to https to resolve WS1262 security vulnerability (#3658)" (#3699) (0cac64a), closes #3658 #3699

1.6.0 (2020-07-31)

Bug Fixes

  • add form submission and reset behavior to Button (#3603) (f646343)
  • various fixes for form-associated custom elements (#3581) (ccba229)

Features

  • adding directional stylesheet behavior (#3559) (74c19af)
  • create an observable function to support aria-valuetext on slider component (#3508) (b4ac369), closes #3504

1.5.0 (2020-07-23)

Bug Fixes

  • address nested styling issues and provide a more intuitive API for nesting (#3528) (4fe0dd3)
  • move text field and text area appearances from foundation to components (#3540) (ca8ac76)
  • rollup minify selectors should retain spaces (#3524) (cbdfc45)
  • update nested to be observable and set isNestedItem method to readonly (#3539) (9e67f52)

Features

1.4.0 (2020-07-14)

Bug Fixes

  • correct spelling of aria-labelledby in tabs (#3463) (c0385d9)
  • correct web component menu keyboarding and aria-expanded (#3496) (0530a42)
  • move setAttribute calls for proxy elements to connectedCallback (#3494) (cdaf0ba)
  • reflect aria-hidden attribute in the DOM for the flipper component (#3468) (2f7b897)
  • removing un-needed nbsp; in slider-label and radio-group templates (#3506) (7cd003e)

Features

  • adds mixin to support global aria-* attributes for components delegating focus (#3470) (054c890)
  • export MatchMediaStylesheetBehavior constructor (#3445) (ffc59f8)
  • move appearance attributes of anchor and button out of fast-foundation (#3420) (069e1ee)
  • simplify rollup configs and compress tagged template literals (#3452) (7533e92)
  • update typescript version and remove utility types dependencies for react packages (#3422) (09d07b5)

1.3.0 (2020-07-02)

Bug Fixes

  • slider thumb does not respond to touch events, vertical sliders track parameters incorrect after scrolling page (#3414) (02f9ac4)

Features

1.2.2 (2020-06-26)

Bug Fixes

  • selected tab becoming undefined when tab slot pass anything except icon or text node (#3350) (eda1aef)

1.2.1 (2020-06-17)

Note: Version bump only for package @microsoft/fast-foundation

1.2.0 (2020-06-15)

Bug Fixes

  • correct css part name for dialog component (#3260) (62eff11)
  • ensure all component internals have part names (#3306) (95360a7)

Features

  • add live code examples to docs site (#3216) (763054f)
  • design-system-provider now paints CSS color and background color (#3278) (8e97ac4)
  • provides access to the CSS variable created by CSSCustomProprtyBehaviors (#3256) (391f029)

1.1.1 (2020-06-09)

Bug Fixes

  • correct css part name for dialog component (6e0c7a0)

1.1.0 (2020-06-05)

Bug Fixes

  • children components not always added to the internal slotted radio control collection (#3169) (1d1ce86)
  • remove static class from start/end template (#3225) (ea6e790)
  • slider vertical navigation and value setting bugs (#3176) (f46d87d)

Features

  • add accordion web component (#3067) (f551378)
  • fast-foundation: add element test helper (#3184) (a27161d)
  • website: new docusaurus v2 setup with launch toc configuration (#3159) (f12ba16)

1.0.0 (2020-05-18)

Bug Fixes

  • replaces childNodes.length check with slotted (#3130) (b69d70c)
  • update decorator signature to align with customElement (#3131) (10256b5)

Features

  • web-components: new build/test/docs setup (#3156) (51d909a)
  • add fast-components-msft as a new package (#3096) (0515fff)
  • add fast-foundation as a new package (#3122) (322af95)
  • update badge API and styles (#3147) (23eca38)
  • wrap attr and observable into designSystemProperty decorator (#3132) (b6d4d59)

BREAKING CHANGES

  • fundamentally changes and breaks the badge component API and styles
  • breaks certain package exports