From 2d5e99667660edf7e74d065731a726dad2eb7486 Mon Sep 17 00:00:00 2001 From: Jon Schectman Date: Thu, 22 Oct 2020 09:24:06 -0700 Subject: [PATCH] cherry pick a large amount of web-components changes (#15637) --- ...-chhol-export-design-system-interface.json | 8 + ...07-15-users-nirice-close-shadow-roots.json | 8 + ...s-chhol-add-skeleton-as-new-component.json | 8 + ...holasrice-fix-card-palette-generation.json | 8 + ...-chhol-button-font-inheritance-issues.json | 8 + ...users-chhol-reset-dialog-to-open-mode.json | 8 + ...srice-update-card-background-behavior.json | 8 + ...0-20-09-05-46-fix-web-components-test.json | 8 + packages/web-components/docs/api-report.md | 1315 +++++++++-------- packages/web-components/package.json | 6 +- .../web-components/src/accordion/index.ts | 3 + packages/web-components/src/anchor/index.ts | 1 + packages/web-components/src/badge/index.ts | 3 + packages/web-components/src/button/index.ts | 1 + .../web-components/src/card/card.stories.ts | 9 + .../src/card/fixtures/card.html | 2 +- packages/web-components/src/card/index.ts | 48 +- packages/web-components/src/checkbox/index.ts | 3 + .../src/design-system-provider/index.ts | 8 + .../src/dialog/dialog.stories.ts | 2 + .../dialog/fixtures/dialog-button-test.html | 7 + packages/web-components/src/divider/index.ts | 3 + packages/web-components/src/flipper/index.ts | 3 + packages/web-components/src/index.ts | 1 + .../web-components/src/menu-item/index.ts | 3 + packages/web-components/src/menu/index.ts | 3 + .../src/progress/progress-ring/index.ts | 3 + .../src/progress/progress/index.ts | 3 + .../web-components/src/radio-group/index.ts | 3 + packages/web-components/src/radio/index.ts | 3 + .../src/skeleton/fixtures/base.html | 79 + packages/web-components/src/skeleton/index.ts | 25 + .../src/skeleton/skeleton.stories.ts | 12 + .../src/skeleton/skeleton.styles.ts | 73 + .../web-components/src/slider-label/index.ts | 3 + packages/web-components/src/slider/index.ts | 3 + .../src/styles/patterns/button.ts | 4 + packages/web-components/src/switch/index.ts | 3 + packages/web-components/src/tabs/index.ts | 3 + .../src/tabs/tab-panel/index.ts | 3 + packages/web-components/src/tabs/tab/index.ts | 3 + .../web-components/src/text-area/index.ts | 3 + .../web-components/src/text-field/index.ts | 1 + .../web-components/src/tree-item/index.ts | 3 + .../web-components/src/tree-view/index.ts | 3 + yarn.lock | 27 +- 46 files changed, 1056 insertions(+), 689 deletions(-) create mode 100644 change/@fluentui-web-components-2020-09-29-23-07-40-users-chhol-export-design-system-interface.json create mode 100644 change/@fluentui-web-components-2020-10-06-09-07-15-users-nirice-close-shadow-roots.json create mode 100644 change/@fluentui-web-components-2020-10-06-21-36-07-users-chhol-add-skeleton-as-new-component.json create mode 100644 change/@fluentui-web-components-2020-10-08-10-29-03-users-nicholasrice-fix-card-palette-generation.json create mode 100644 change/@fluentui-web-components-2020-10-08-15-22-21-users-chhol-button-font-inheritance-issues.json create mode 100644 change/@fluentui-web-components-2020-10-13-15-51-52-users-chhol-reset-dialog-to-open-mode.json create mode 100644 change/@fluentui-web-components-2020-10-14-11-01-46-users-nicholasrice-update-card-background-behavior.json create mode 100644 change/@fluentui-web-components-2020-10-20-09-05-46-fix-web-components-test.json create mode 100644 packages/web-components/src/dialog/fixtures/dialog-button-test.html create mode 100644 packages/web-components/src/skeleton/fixtures/base.html create mode 100644 packages/web-components/src/skeleton/index.ts create mode 100644 packages/web-components/src/skeleton/skeleton.stories.ts create mode 100644 packages/web-components/src/skeleton/skeleton.styles.ts diff --git a/change/@fluentui-web-components-2020-09-29-23-07-40-users-chhol-export-design-system-interface.json b/change/@fluentui-web-components-2020-09-29-23-07-40-users-chhol-export-design-system-interface.json new file mode 100644 index 00000000000000..62a23183aa2c71 --- /dev/null +++ b/change/@fluentui-web-components-2020-09-29-23-07-40-users-chhol-export-design-system-interface.json @@ -0,0 +1,8 @@ +{ + "type": "minor", + "comment": "export DesignSystem interface", + "packageName": "@fluentui/web-components", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-09-30T06:07:40.839Z" +} diff --git a/change/@fluentui-web-components-2020-10-06-09-07-15-users-nirice-close-shadow-roots.json b/change/@fluentui-web-components-2020-10-06-09-07-15-users-nirice-close-shadow-roots.json new file mode 100644 index 00000000000000..ff2a2cf9eb5943 --- /dev/null +++ b/change/@fluentui-web-components-2020-10-06-09-07-15-users-nirice-close-shadow-roots.json @@ -0,0 +1,8 @@ +{ + "type": "minor", + "comment": "close shadow roots of all web components", + "packageName": "@fluentui/web-components", + "email": "nicholasrice@users.noreply.github.com", + "dependentChangeType": "patch", + "date": "2020-10-06T16:07:15.935Z" +} diff --git a/change/@fluentui-web-components-2020-10-06-21-36-07-users-chhol-add-skeleton-as-new-component.json b/change/@fluentui-web-components-2020-10-06-21-36-07-users-chhol-add-skeleton-as-new-component.json new file mode 100644 index 00000000000000..a6dafbbb0d1a98 --- /dev/null +++ b/change/@fluentui-web-components-2020-10-06-21-36-07-users-chhol-add-skeleton-as-new-component.json @@ -0,0 +1,8 @@ +{ + "type": "minor", + "comment": "add skeleton as a new component", + "packageName": "@fluentui/web-components", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-10-07T04:36:07.631Z" +} diff --git a/change/@fluentui-web-components-2020-10-08-10-29-03-users-nicholasrice-fix-card-palette-generation.json b/change/@fluentui-web-components-2020-10-08-10-29-03-users-nicholasrice-fix-card-palette-generation.json new file mode 100644 index 00000000000000..e1f38c0c1e4518 --- /dev/null +++ b/change/@fluentui-web-components-2020-10-08-10-29-03-users-nicholasrice-fix-card-palette-generation.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "removes palette generation for every card and adds better null checking to avoid runtime errors", + "packageName": "@fluentui/web-components", + "email": "nicholasrice@users.noreply.github.com", + "dependentChangeType": "patch", + "date": "2020-10-08T17:29:03.955Z" +} diff --git a/change/@fluentui-web-components-2020-10-08-15-22-21-users-chhol-button-font-inheritance-issues.json b/change/@fluentui-web-components-2020-10-08-15-22-21-users-chhol-button-font-inheritance-issues.json new file mode 100644 index 00000000000000..0d163661c6420a --- /dev/null +++ b/change/@fluentui-web-components-2020-10-08-15-22-21-users-chhol-button-font-inheritance-issues.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "fix: ensure font properties are inherited to control and start/end content", + "packageName": "@fluentui/web-components", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-10-08T22:22:21.243Z" +} diff --git a/change/@fluentui-web-components-2020-10-13-15-51-52-users-chhol-reset-dialog-to-open-mode.json b/change/@fluentui-web-components-2020-10-13-15-51-52-users-chhol-reset-dialog-to-open-mode.json new file mode 100644 index 00000000000000..d9f6119b8c384e --- /dev/null +++ b/change/@fluentui-web-components-2020-10-13-15-51-52-users-chhol-reset-dialog-to-open-mode.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "operate dialog in open mode to ensure accessible focus behavior is supported", + "packageName": "@fluentui/web-components", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch", + "date": "2020-10-13T22:51:52.037Z" +} diff --git a/change/@fluentui-web-components-2020-10-14-11-01-46-users-nicholasrice-update-card-background-behavior.json b/change/@fluentui-web-components-2020-10-14-11-01-46-users-nicholasrice-update-card-background-behavior.json new file mode 100644 index 00000000000000..51c924751141fd --- /dev/null +++ b/change/@fluentui-web-components-2020-10-14-11-01-46-users-nicholasrice-update-card-background-behavior.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "remove un-necessary palette generation", + "packageName": "@fluentui/web-components", + "email": "nicholasrice@users.noreply.github.com", + "dependentChangeType": "patch", + "date": "2020-10-14T18:01:46.084Z" +} diff --git a/change/@fluentui-web-components-2020-10-20-09-05-46-fix-web-components-test.json b/change/@fluentui-web-components-2020-10-20-09-05-46-fix-web-components-test.json new file mode 100644 index 00000000000000..3388d3eed8d61b --- /dev/null +++ b/change/@fluentui-web-components-2020-10-20-09-05-46-fix-web-components-test.json @@ -0,0 +1,8 @@ +{ + "type": "none", + "comment": "Fix yarn test --production.", + "packageName": "@fluentui/web-components", + "email": "xgao@microsoft.com", + "dependentChangeType": "none", + "date": "2020-10-20T16:05:46.628Z" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 41f50eaa73fafc..a55a30a51c337e 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -1,653 +1,662 @@ -## API Report File for "@fluentui/web-components" - -> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). - -```ts - -import { Accordion } from '@microsoft/fast-foundation'; -import { AccordionItem } from '@microsoft/fast-foundation'; -import { Anchor } from '@microsoft/fast-foundation'; -import { Badge } from '@microsoft/fast-foundation'; -import { BaseProgress } from '@microsoft/fast-foundation'; -import { Button } from '@microsoft/fast-foundation'; -import { Checkbox } from '@microsoft/fast-foundation'; -import { ColorRGBA64 } from '@microsoft/fast-colors'; -import { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation'; -import { DensityOffset } from '@microsoft/fast-components-styles-msft'; -import { DesignSystem } from '@microsoft/fast-components-styles-msft'; -import { DesignSystemProvider } from '@microsoft/fast-foundation'; -import { Dialog } from '@microsoft/fast-foundation'; -import { Direction } from '@microsoft/fast-web-utilities'; -import { Divider } from '@microsoft/fast-foundation'; -import { ElementStyles } from '@microsoft/fast-element'; -import { Flipper } from '@microsoft/fast-foundation'; -import { Menu } from '@microsoft/fast-foundation'; -import { MenuItem } from '@microsoft/fast-foundation'; -import { Radio } from '@microsoft/fast-foundation'; -import { RadioGroup } from '@microsoft/fast-foundation'; -import { Slider } from '@microsoft/fast-foundation'; -import { SliderLabel } from '@microsoft/fast-foundation'; -import { Switch } from '@microsoft/fast-foundation'; -import { Tab } from '@microsoft/fast-foundation'; -import { TabPanel } from '@microsoft/fast-foundation'; -import { Tabs } from '@microsoft/fast-foundation'; -import { TextArea } from '@microsoft/fast-foundation'; -import { TextField } from '@microsoft/fast-foundation'; -import { TreeItem } from '@microsoft/fast-foundation'; -import { TreeView } from '@microsoft/fast-foundation'; - -// Warning: (ae-internal-missing-underscore) The name "AccentButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const AccentButtonStyles: ElementStyles; - -// @public -export const accentFillActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentFillFocusBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentFillHoverBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentFillLargeActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentFillLargeFocusBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentFillLargeHoverBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentFillLargeRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentFillLargeSelectedBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentFillRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentFillSelectedBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentForegroundActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentForegroundCutRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentForegroundFocusBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentForegroundHoverBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentForegroundLargeActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentForegroundLargeFocusBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentForegroundLargeHoverBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentForegroundLargeRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const accentForegroundRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const AccordionItemStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const AccordionStyles: import("@microsoft/fast-element").ElementStyles; - -// Warning: (ae-internal-missing-underscore) The name "ambientShadow" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal -export const ambientShadow = "0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(.11 * (2 - var(--background-luminance, 1))))"; - -// @public -export type AnchorAppearance = ButtonAppearance | 'hypertext'; - -// @public -export const AnchorStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string; - -// @public -export const BadgeStyles: import("@microsoft/fast-element").ElementStyles; - -// Warning: (ae-internal-missing-underscore) The name "BaseButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const BaseButtonStyles: ElementStyles; - -// @public -export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' | 'stealth'; - -// @public -export const ButtonStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const CardStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const CheckboxStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const DialogStyles: import("@microsoft/fast-element").ElementStyles; - -// Warning: (ae-internal-missing-underscore) The name "directionalShadow" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const directionalShadow = "0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(.13 * (2 - var(--background-luminance, 1))))"; - -// @public -export const DividerStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const elevation: string; - -// @public -export const FlipperStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export class FluentAccordion extends Accordion { -} - -// @public -export class FluentAccordionItem extends AccordionItem { -} - -// @public -export class FluentAnchor extends Anchor { - appearance: AnchorAppearance; - // (undocumented) - appearanceChanged(oldValue: AnchorAppearance, newValue: AnchorAppearance): void; - // @internal (undocumented) - connectedCallback(): void; -} - -// @public -export class FluentBadge extends Badge { - // (undocumented) - appearance: BadgeAppearance; - } - -// @public -export class FluentButton extends Button { - appearance: ButtonAppearance; - // (undocumented) - appearanceChanged(oldValue: ButtonAppearance, newValue: ButtonAppearance): void; - // @internal (undocumented) - connectedCallback(): void; -} - -// @public -export class FluentCard extends FluentDesignSystemProvider implements Pick { - backgroundColor: string; - // (undocumented) - protected backgroundColorChanged(): void; - cardBackgroundColor: string; - // (undocumented) - connectedCallback(): void; - // @internal (undocumented) - handleChange(source: DesignSystem, name: string): void; - // @internal - neutralPalette: string[]; -} - -// @public -export class FluentCheckbox extends Checkbox { -} - -// @public -export class FluentDesignSystemProvider extends DesignSystemProvider implements Omit { - // (undocumented) - accentBaseColor: string; - // (undocumented) - accentFillActiveDelta: number; - // (undocumented) - accentFillFocusDelta: number; - // (undocumented) - accentFillHoverDelta: number; - // (undocumented) - accentFillRestDelta: number; - // (undocumented) - accentFillSelectedDelta: number; - // (undocumented) - accentForegroundActiveDelta: number; - // (undocumented) - accentForegroundFocusDelta: number; - // (undocumented) - accentForegroundHoverDelta: number; - // (undocumented) - accentForegroundRestDelta: number; - // (undocumented) - accentPalette: string[]; - backgroundColor: string; - // (undocumented) - protected backgroundColorChanged(): void; - // (undocumented) - baseHeightMultiplier: number; - // (undocumented) - baseHorizontalSpacingMultiplier: number; - // (undocumented) - baseLayerLuminance: number; - // (undocumented) - cornerRadius: number; - // (undocumented) - density: DensityOffset; - // (undocumented) - designUnit: number; - // (undocumented) - direction: Direction; - // (undocumented) - disabledOpacity: number; - // (undocumented) - elevatedCornerRadius: number; - // (undocumented) - focusOutlineWidth: number; - // (undocumented) - neutralDividerRestDelta: number; - // (undocumented) - neutralFillActiveDelta: number; - // (undocumented) - neutralFillCardDelta: number; - // (undocumented) - neutralFillFocusDelta: number; - // (undocumented) - neutralFillHoverDelta: number; - // (undocumented) - neutralFillInputActiveDelta: number; - // (undocumented) - neutralFillInputFocusDelta: number; - // (undocumented) - neutralFillInputHoverDelta: number; - // (undocumented) - neutralFillInputRestDelta: number; - // (undocumented) - neutralFillInputSelectedDelta: number; - // (undocumented) - neutralFillRestDelta: number; - // (undocumented) - neutralFillSelectedDelta: number; - // (undocumented) - neutralFillStealthActiveDelta: number; - // (undocumented) - neutralFillStealthFocusDelta: number; - // (undocumented) - neutralFillStealthHoverDelta: number; - // (undocumented) - neutralFillStealthRestDelta: number; - // (undocumented) - neutralFillStealthSelectedDelta: number; - // (undocumented) - neutralFillToggleActiveDelta: number; - // (undocumented) - neutralFillToggleFocusDelta: number; - // (undocumented) - neutralFillToggleHoverDelta: number; - // (undocumented) - neutralForegroundActiveDelta: number; - // (undocumented) - neutralForegroundFocusDelta: number; - // (undocumented) - neutralForegroundHoverDelta: number; - // (undocumented) - neutralOutlineActiveDelta: number; - // (undocumented) - neutralOutlineFocusDelta: number; - // (undocumented) - neutralOutlineHoverDelta: number; - // (undocumented) - neutralOutlineRestDelta: number; - // (undocumented) - neutralPalette: string[]; - noPaint: boolean; - // (undocumented) - outlineWidth: number; - // (undocumented) - typeRampBaseFontSize: string; - // (undocumented) - typeRampBaseLineHeight: string; - // (undocumented) - typeRampMinus1FontSize: string; - // (undocumented) - typeRampMinus1LineHeight: string; - // (undocumented) - typeRampMinus2FontSize: string; - // (undocumented) - typeRampMinus2LineHeight: string; - // (undocumented) - typeRampPlus1FontSize: string; - // (undocumented) - typeRampPlus1LineHeight: string; - // (undocumented) - typeRampPlus2FontSize: string; - // (undocumented) - typeRampPlus2LineHeight: string; - // (undocumented) - typeRampPlus3FontSize: string; - // (undocumented) - typeRampPlus3LineHeight: string; - // (undocumented) - typeRampPlus4FontSize: string; - // (undocumented) - typeRampPlus4LineHeight: string; - // (undocumented) - typeRampPlus5FontSize: string; - // (undocumented) - typeRampPlus5LineHeight: string; - // (undocumented) - typeRampPlus6FontSize: string; - // (undocumented) - typeRampPlus6LineHeight: string; -} - -// @public -export class FluentDialog extends Dialog { -} - -// @public -export class FluentDivider extends Divider { -} - -// @public -export class FluentFlipper extends Flipper { -} - -// @public -export class FluentMenu extends Menu { -} - -// @public -export class FluentMenuItem extends MenuItem { -} - -// @public -export class FluentProgress extends BaseProgress { -} - -// @public -export class FluentProgressRing extends BaseProgress { -} - -// @public -export class FluentRadio extends Radio { -} - -// @public -export class FluentRadioGroup extends RadioGroup { -} - -// @public -export class FluentSlider extends Slider { -} - -// @public -export class FluentSliderLabel extends SliderLabel { -} - -// @public -export class FluentSwitch extends Switch { -} - -// @public -export class FluentTab extends Tab { -} - -// @public -export class FluentTabPanel extends TabPanel { -} - -// @public -export class FluentTabs extends Tabs { -} - -// @public -export class FluentTextArea extends TextArea { - appearance: TextAreaAppearance; - // @internal (undocumented) - appearanceChanged(oldValue: TextAreaAppearance, newValue: TextAreaAppearance): void; - // @internal (undocumented) - connectedCallback(): void; -} - -// @public -export class FluentTextField extends TextField { - appearance: TextFieldAppearance; - // @internal (undocumented) - appearanceChanged(oldValue: TextFieldAppearance, newValue: TextFieldAppearance): void; - // @internal (undocumented) - connectedCallback(): void; -} - -// @public -export class FluentTreeItem extends TreeItem { -} - -// @public -export class FluentTreeView extends TreeView { -} - -// @public -export const heightNumber = "(var(--base-height-multiplier) + var(--density)) * var(--design-unit)"; - -// Warning: (ae-internal-missing-underscore) The name "HypertextStyles" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const HypertextStyles: ElementStyles; - -// @public -export const inlineEndBehavior: CSSCustomPropertyBehavior; - -// @public -export const inlineStartBehavior: CSSCustomPropertyBehavior; - -// Warning: (ae-internal-missing-underscore) The name "LightweightButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const LightweightButtonStyles: ElementStyles; - -// @public -export const MenuItemStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const MenuStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const neutralDividerRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillCardRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillFocusBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillHoverBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillInputActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillInputFocusBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillInputHoverBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillInputRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillSelectedBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillStealthActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillStealthFocusBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillStealthHoverBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillStealthRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillStealthSelectedBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillToggleActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillToggleFocusBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillToggleHoverBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFillToggleRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFocusBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralFocusInnerAccentBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralForegroundActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralForegroundFocusBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralForegroundHintBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralForegroundHintLargeBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralForegroundHoverBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralForegroundRestBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralForegroundToggleBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralForegroundToggleLargeBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralLayerCardBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralLayerCardContainerBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralLayerFloatingBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralLayerL1AltBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralLayerL1Behavior: CSSCustomPropertyBehavior; - -// @public -export const neutralLayerL2Behavior: CSSCustomPropertyBehavior; - -// @public -export const neutralLayerL3Behavior: CSSCustomPropertyBehavior; - -// @public -export const neutralLayerL4Behavior: CSSCustomPropertyBehavior; - -// @public -export const neutralOutlineActiveBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralOutlineFocusBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralOutlineHoverBehavior: CSSCustomPropertyBehavior; - -// @public -export const neutralOutlineRestBehavior: CSSCustomPropertyBehavior; - -// Warning: (ae-internal-missing-underscore) The name "OutlineButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const OutlineButtonStyles: ElementStyles; - -// @public -export function parseColorString(color: string): ColorRGBA64; - -// @public -export const ProgressRingStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const ProgressStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const RadioGroupStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const RadioStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const SliderLabelStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const SliderStyles: import("@microsoft/fast-element").ElementStyles; - -// Warning: (ae-internal-missing-underscore) The name "StealthButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal -// -// @internal (undocumented) -export const StealthButtonStyles: ElementStyles; - -// @public -export const SwitchStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const TabPanelStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const TabsStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const TabStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export type TextAreaAppearance = 'filled' | 'outline'; - -// @public -export const TextAreaStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export type TextFieldAppearance = 'filled' | 'outline'; - -// @public -export const TextFieldStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const TreeItemStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export const TreeViewStyles: import("@microsoft/fast-element").ElementStyles; - - -// (No @packageDocumentation comment for this package) - -``` +## API Report File for "@fluentui/web-components" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { Accordion } from '@microsoft/fast-foundation'; +import { AccordionItem } from '@microsoft/fast-foundation'; +import { Anchor } from '@microsoft/fast-foundation'; +import { Badge } from '@microsoft/fast-foundation'; +import { BaseProgress } from '@microsoft/fast-foundation'; +import { Button } from '@microsoft/fast-foundation'; +import { Checkbox } from '@microsoft/fast-foundation'; +import { ColorRGBA64 } from '@microsoft/fast-colors'; +import { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation'; +import { DensityOffset } from '@microsoft/fast-components-styles-msft'; +import { DesignSystem } from '@microsoft/fast-components-styles-msft'; +import { DesignSystemProvider } from '@microsoft/fast-foundation'; +import { Dialog } from '@microsoft/fast-foundation'; +import { Direction } from '@microsoft/fast-web-utilities'; +import { Divider } from '@microsoft/fast-foundation'; +import { ElementStyles } from '@microsoft/fast-element'; +import { Flipper } from '@microsoft/fast-foundation'; +import { Menu } from '@microsoft/fast-foundation'; +import { MenuItem } from '@microsoft/fast-foundation'; +import { Radio } from '@microsoft/fast-foundation'; +import { RadioGroup } from '@microsoft/fast-foundation'; +import { Skeleton } from '@microsoft/fast-foundation'; +import { Slider } from '@microsoft/fast-foundation'; +import { SliderLabel } from '@microsoft/fast-foundation'; +import { Switch } from '@microsoft/fast-foundation'; +import { Tab } from '@microsoft/fast-foundation'; +import { TabPanel } from '@microsoft/fast-foundation'; +import { Tabs } from '@microsoft/fast-foundation'; +import { TextArea } from '@microsoft/fast-foundation'; +import { TextField } from '@microsoft/fast-foundation'; +import { TreeItem } from '@microsoft/fast-foundation'; +import { TreeView } from '@microsoft/fast-foundation'; + +// Warning: (ae-internal-missing-underscore) The name "AccentButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export const AccentButtonStyles: ElementStyles; + +// @public +export const accentFillActiveBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentFillFocusBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentFillHoverBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentFillLargeActiveBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentFillLargeFocusBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentFillLargeHoverBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentFillLargeRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentFillLargeSelectedBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentFillRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentFillSelectedBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentForegroundActiveBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentForegroundCutRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentForegroundFocusBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentForegroundHoverBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentForegroundLargeActiveBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentForegroundLargeFocusBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentForegroundLargeHoverBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentForegroundLargeRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const accentForegroundRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const AccordionItemStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const AccordionStyles: import("@microsoft/fast-element").ElementStyles; + +// Warning: (ae-internal-missing-underscore) The name "ambientShadow" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal +export const ambientShadow = "0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(.11 * (2 - var(--background-luminance, 1))))"; + +// @public +export type AnchorAppearance = ButtonAppearance | 'hypertext'; + +// @public +export const AnchorStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string; + +// @public +export const BadgeStyles: import("@microsoft/fast-element").ElementStyles; + +// Warning: (ae-internal-missing-underscore) The name "BaseButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export const BaseButtonStyles: ElementStyles; + +// @public +export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' | 'stealth'; + +// @public +export const ButtonStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const CardStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const CheckboxStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const DialogStyles: import("@microsoft/fast-element").ElementStyles; + +// Warning: (ae-internal-missing-underscore) The name "directionalShadow" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export const directionalShadow = "0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(.13 * (2 - var(--background-luminance, 1))))"; + +// @public +export const DividerStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const elevation: string; + +// @public +export const FlipperStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export class FluentAccordion extends Accordion { +} + +// @public +export class FluentAccordionItem extends AccordionItem { +} + +// @public +export class FluentAnchor extends Anchor { + appearance: AnchorAppearance; + // (undocumented) + appearanceChanged(oldValue: AnchorAppearance, newValue: AnchorAppearance): void; + // @internal (undocumented) + connectedCallback(): void; +} + +// @public +export class FluentBadge extends Badge { + // (undocumented) + appearance: BadgeAppearance; + } + +// @public +export class FluentButton extends Button { + appearance: ButtonAppearance; + // (undocumented) + appearanceChanged(oldValue: ButtonAppearance, newValue: ButtonAppearance): void; + // @internal (undocumented) + connectedCallback(): void; +} + +// @public +export class FluentCard extends DesignSystemProvider implements Pick { + backgroundColor: string; + cardBackgroundColor: string; + // (undocumented) + connectedCallback(): void; + // @internal (undocumented) + handleChange(source: DesignSystem, name: string): void; + // @internal + neutralPalette: string[]; +} + +// @public +export class FluentCheckbox extends Checkbox { +} + +// @public (undocumented) +export type FluentDesignSystem = Omit; + +// @public +export class FluentDesignSystemProvider extends DesignSystemProvider implements Omit { + // (undocumented) + accentBaseColor: string; + // (undocumented) + accentFillActiveDelta: number; + // (undocumented) + accentFillFocusDelta: number; + // (undocumented) + accentFillHoverDelta: number; + // (undocumented) + accentFillRestDelta: number; + // (undocumented) + accentFillSelectedDelta: number; + // (undocumented) + accentForegroundActiveDelta: number; + // (undocumented) + accentForegroundFocusDelta: number; + // (undocumented) + accentForegroundHoverDelta: number; + // (undocumented) + accentForegroundRestDelta: number; + // (undocumented) + accentPalette: string[]; + backgroundColor: string; + // (undocumented) + protected backgroundColorChanged(): void; + // (undocumented) + baseHeightMultiplier: number; + // (undocumented) + baseHorizontalSpacingMultiplier: number; + // (undocumented) + baseLayerLuminance: number; + // (undocumented) + cornerRadius: number; + // (undocumented) + density: DensityOffset; + // (undocumented) + designUnit: number; + // (undocumented) + direction: Direction; + // (undocumented) + disabledOpacity: number; + // (undocumented) + elevatedCornerRadius: number; + // (undocumented) + focusOutlineWidth: number; + // (undocumented) + neutralDividerRestDelta: number; + // (undocumented) + neutralFillActiveDelta: number; + // (undocumented) + neutralFillCardDelta: number; + // (undocumented) + neutralFillFocusDelta: number; + // (undocumented) + neutralFillHoverDelta: number; + // (undocumented) + neutralFillInputActiveDelta: number; + // (undocumented) + neutralFillInputFocusDelta: number; + // (undocumented) + neutralFillInputHoverDelta: number; + // (undocumented) + neutralFillInputRestDelta: number; + // (undocumented) + neutralFillInputSelectedDelta: number; + // (undocumented) + neutralFillRestDelta: number; + // (undocumented) + neutralFillSelectedDelta: number; + // (undocumented) + neutralFillStealthActiveDelta: number; + // (undocumented) + neutralFillStealthFocusDelta: number; + // (undocumented) + neutralFillStealthHoverDelta: number; + // (undocumented) + neutralFillStealthRestDelta: number; + // (undocumented) + neutralFillStealthSelectedDelta: number; + // (undocumented) + neutralFillToggleActiveDelta: number; + // (undocumented) + neutralFillToggleFocusDelta: number; + // (undocumented) + neutralFillToggleHoverDelta: number; + // (undocumented) + neutralForegroundActiveDelta: number; + // (undocumented) + neutralForegroundFocusDelta: number; + // (undocumented) + neutralForegroundHoverDelta: number; + // (undocumented) + neutralOutlineActiveDelta: number; + // (undocumented) + neutralOutlineFocusDelta: number; + // (undocumented) + neutralOutlineHoverDelta: number; + // (undocumented) + neutralOutlineRestDelta: number; + // (undocumented) + neutralPalette: string[]; + noPaint: boolean; + // (undocumented) + outlineWidth: number; + // (undocumented) + typeRampBaseFontSize: string; + // (undocumented) + typeRampBaseLineHeight: string; + // (undocumented) + typeRampMinus1FontSize: string; + // (undocumented) + typeRampMinus1LineHeight: string; + // (undocumented) + typeRampMinus2FontSize: string; + // (undocumented) + typeRampMinus2LineHeight: string; + // (undocumented) + typeRampPlus1FontSize: string; + // (undocumented) + typeRampPlus1LineHeight: string; + // (undocumented) + typeRampPlus2FontSize: string; + // (undocumented) + typeRampPlus2LineHeight: string; + // (undocumented) + typeRampPlus3FontSize: string; + // (undocumented) + typeRampPlus3LineHeight: string; + // (undocumented) + typeRampPlus4FontSize: string; + // (undocumented) + typeRampPlus4LineHeight: string; + // (undocumented) + typeRampPlus5FontSize: string; + // (undocumented) + typeRampPlus5LineHeight: string; + // (undocumented) + typeRampPlus6FontSize: string; + // (undocumented) + typeRampPlus6LineHeight: string; +} + +// @public +export class FluentDialog extends Dialog { +} + +// @public +export class FluentDivider extends Divider { +} + +// @public +export class FluentFlipper extends Flipper { +} + +// @public +export class FluentMenu extends Menu { +} + +// @public +export class FluentMenuItem extends MenuItem { +} + +// @public +export class FluentProgress extends BaseProgress { +} + +// @public +export class FluentProgressRing extends BaseProgress { +} + +// @public +export class FluentRadio extends Radio { +} + +// @public +export class FluentRadioGroup extends RadioGroup { +} + +// @public +export class FluentSkeleton extends Skeleton { +} + +// @public +export class FluentSlider extends Slider { +} + +// @public +export class FluentSliderLabel extends SliderLabel { +} + +// @public +export class FluentSwitch extends Switch { +} + +// @public +export class FluentTab extends Tab { +} + +// @public +export class FluentTabPanel extends TabPanel { +} + +// @public +export class FluentTabs extends Tabs { +} + +// @public +export class FluentTextArea extends TextArea { + appearance: TextAreaAppearance; + // @internal (undocumented) + appearanceChanged(oldValue: TextAreaAppearance, newValue: TextAreaAppearance): void; + // @internal (undocumented) + connectedCallback(): void; +} + +// @public +export class FluentTextField extends TextField { + appearance: TextFieldAppearance; + // @internal (undocumented) + appearanceChanged(oldValue: TextFieldAppearance, newValue: TextFieldAppearance): void; + // @internal (undocumented) + connectedCallback(): void; +} + +// @public +export class FluentTreeItem extends TreeItem { +} + +// @public +export class FluentTreeView extends TreeView { +} + +// @public +export const heightNumber = "(var(--base-height-multiplier) + var(--density)) * var(--design-unit)"; + +// Warning: (ae-internal-missing-underscore) The name "HypertextStyles" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export const HypertextStyles: ElementStyles; + +// @public +export const inlineEndBehavior: CSSCustomPropertyBehavior; + +// @public +export const inlineStartBehavior: CSSCustomPropertyBehavior; + +// Warning: (ae-internal-missing-underscore) The name "LightweightButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export const LightweightButtonStyles: ElementStyles; + +// @public +export const MenuItemStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const MenuStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const neutralDividerRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillActiveBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillCardRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillFocusBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillHoverBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillInputActiveBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillInputFocusBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillInputHoverBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillInputRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillSelectedBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillStealthActiveBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillStealthFocusBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillStealthHoverBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillStealthRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillStealthSelectedBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillToggleActiveBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillToggleFocusBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillToggleHoverBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFillToggleRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFocusBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralFocusInnerAccentBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralForegroundActiveBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralForegroundFocusBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralForegroundHintBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralForegroundHintLargeBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralForegroundHoverBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralForegroundRestBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralForegroundToggleBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralForegroundToggleLargeBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralLayerCardBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralLayerCardContainerBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralLayerFloatingBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralLayerL1AltBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralLayerL1Behavior: CSSCustomPropertyBehavior; + +// @public +export const neutralLayerL2Behavior: CSSCustomPropertyBehavior; + +// @public +export const neutralLayerL3Behavior: CSSCustomPropertyBehavior; + +// @public +export const neutralLayerL4Behavior: CSSCustomPropertyBehavior; + +// @public +export const neutralOutlineActiveBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralOutlineFocusBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralOutlineHoverBehavior: CSSCustomPropertyBehavior; + +// @public +export const neutralOutlineRestBehavior: CSSCustomPropertyBehavior; + +// Warning: (ae-internal-missing-underscore) The name "OutlineButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export const OutlineButtonStyles: ElementStyles; + +// @public +export function parseColorString(color: string): ColorRGBA64; + +// @public +export const ProgressRingStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const ProgressStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const RadioGroupStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const RadioStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const SkeletonStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const SliderLabelStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const SliderStyles: import("@microsoft/fast-element").ElementStyles; + +// Warning: (ae-internal-missing-underscore) The name "StealthButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export const StealthButtonStyles: ElementStyles; + +// @public +export const SwitchStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const TabPanelStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const TabsStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const TabStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export type TextAreaAppearance = 'filled' | 'outline'; + +// @public +export const TextAreaStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export type TextFieldAppearance = 'filled' | 'outline'; + +// @public +export const TextFieldStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const TreeItemStyles: import("@microsoft/fast-element").ElementStyles; + +// @public +export const TreeViewStyles: import("@microsoft/fast-element").ElementStyles; + + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 4fde9989232e0c..f8d489d2b41b80 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -33,7 +33,7 @@ "code-style": "npm run prettier && npm run lint", "start": "start-storybook -p 6006", "build-storybook": "build-storybook", - "test": "yarn test-chrome:verbose && yarn doc:ci", + "test": "yarn doc:ci && yarn test-chrome:verbose", "test-node": "mocha --reporter min --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'", "test-node:verbose": "mocha --reporter spec --exit dist/esm/__test__/setup-node.js './dist/esm/**/*.spec.js'", "test-chrome": "karma start karma.conf.js --browsers=ChromeHeadlessOpt --single-run --coverage", @@ -94,8 +94,8 @@ "dependencies": { "@microsoft/fast-colors": "^5.1.0", "@microsoft/fast-components-styles-msft": "^4.29.0", - "@microsoft/fast-element": "^0.17.0", - "@microsoft/fast-foundation": "^1.7.0", + "@microsoft/fast-element": "^0.19.1", + "@microsoft/fast-foundation": "^1.8.1", "tslib": "^1.13.0" }, "beachball": { diff --git a/packages/web-components/src/accordion/index.ts b/packages/web-components/src/accordion/index.ts index acbc945f5118f1..6e9ebe4e359fa9 100644 --- a/packages/web-components/src/accordion/index.ts +++ b/packages/web-components/src/accordion/index.ts @@ -17,6 +17,9 @@ export * from './accordion-item/index'; name: 'fluent-accordion', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentAccordion extends Accordion {} diff --git a/packages/web-components/src/anchor/index.ts b/packages/web-components/src/anchor/index.ts index dfedfa9995eda3..033fd9f5ff68ef 100644 --- a/packages/web-components/src/anchor/index.ts +++ b/packages/web-components/src/anchor/index.ts @@ -26,6 +26,7 @@ export type AnchorAppearance = ButtonAppearance | 'hypertext'; styles, shadowOptions: { delegatesFocus: true, + mode: 'closed', }, }) export class FluentAnchor extends Anchor { diff --git a/packages/web-components/src/badge/index.ts b/packages/web-components/src/badge/index.ts index 61829b68f1f221..51f6bf9594fa09 100644 --- a/packages/web-components/src/badge/index.ts +++ b/packages/web-components/src/badge/index.ts @@ -21,6 +21,9 @@ export type BadgeAppearance = 'accent' | 'lightweight' | 'neutral' | string; name: 'fluent-badge', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentBadge extends Badge { @attr({ mode: 'fromView' }) diff --git a/packages/web-components/src/button/index.ts b/packages/web-components/src/button/index.ts index f39e82d6cd8ccc..f22cb16ddf12a8 100644 --- a/packages/web-components/src/button/index.ts +++ b/packages/web-components/src/button/index.ts @@ -25,6 +25,7 @@ export type ButtonAppearance = 'accent' | 'lightweight' | 'neutral' | 'outline' styles, shadowOptions: { delegatesFocus: true, + mode: 'closed', }, }) export class FluentButton extends Button { diff --git a/packages/web-components/src/card/card.stories.ts b/packages/web-components/src/card/card.stories.ts index ccfb4727bf02b2..92cfc35a50966f 100644 --- a/packages/web-components/src/card/card.stories.ts +++ b/packages/web-components/src/card/card.stories.ts @@ -1,3 +1,5 @@ +import { createColorPalette } from '@microsoft/fast-components-styles-msft'; +import { ColorRGBA64 } from '@microsoft/fast-colors'; import { FluentDesignSystemProvider } from '../design-system-provider'; import CardTemplate from './fixtures/card.html'; import { FluentCard } from './'; @@ -11,3 +13,10 @@ export default { }; export const Card = (): string => CardTemplate; + +document.addEventListener('readystatechange', e => { + if (document.readyState === 'complete') { + const red = document.getElementById('red') as FluentDesignSystemProvider; + red.neutralPalette = createColorPalette(new ColorRGBA64(1, 0, 0)); + } +}); diff --git a/packages/web-components/src/card/fixtures/card.html b/packages/web-components/src/card/fixtures/card.html index f120a3c5975567..4aae911709df17 100644 --- a/packages/web-components/src/card/fixtures/card.html +++ b/packages/web-components/src/card/fixtures/card.html @@ -39,7 +39,7 @@ - + Red
diff --git a/packages/web-components/src/card/index.ts b/packages/web-components/src/card/index.ts index c2dbb7a426dd32..1caa1e22a2e7c6 100644 --- a/packages/web-components/src/card/index.ts +++ b/packages/web-components/src/card/index.ts @@ -1,8 +1,12 @@ import { attr, Notifier, Observable } from '@microsoft/fast-element'; -import { ColorRGBA64, parseColorHexRGB } from '@microsoft/fast-colors'; -import { designSystemProperty, designSystemProvider, CardTemplate as template } from '@microsoft/fast-foundation'; +import { parseColorHexRGB } from '@microsoft/fast-colors'; +import { + designSystemProperty, + DesignSystemProvider, + designSystemProvider, + CardTemplate as template, +} from '@microsoft/fast-foundation'; import { createColorPalette, DesignSystem, neutralFillCard } from '@microsoft/fast-components-styles-msft'; -import { FluentDesignSystemProvider } from '../design-system-provider'; import { CardStyles as styles } from './card.styles'; /** @@ -18,8 +22,11 @@ import { CardStyles as styles } from './card.styles'; name: 'fluent-card', template, styles, + shadowOptions: { + mode: 'closed', + }, }) -export class FluentCard extends FluentDesignSystemProvider +export class FluentCard extends DesignSystemProvider implements Pick { /** * Background color for the banner component. Sets context for the design system. @@ -32,10 +39,6 @@ export class FluentCard extends FluentDesignSystemProvider default: '#FFFFFF', }) public backgroundColor: string; - protected backgroundColorChanged(): void { - const parsedColor = parseColorHexRGB(this.backgroundColor); - this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64); - } /** * Background color for the banner component. Sets context for the design system. @@ -47,10 +50,17 @@ export class FluentCard extends FluentDesignSystemProvider attribute: 'card-background-color', }) public cardBackgroundColor: string; - private cardBackgroundColorChanged(): void { - const parsedColor = parseColorHexRGB(this.cardBackgroundColor); - this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64); - this.backgroundColor = this.cardBackgroundColor; + private cardBackgroundColorChanged(prev: string | void, next: string | void): void { + if (next) { + const parsedColor = parseColorHexRGB(this.cardBackgroundColor); + + if (parsedColor !== null) { + this.neutralPalette = createColorPalette(parsedColor); + this.backgroundColor = this.cardBackgroundColor; + } + } else if (this.provider && this.provider.designSystem) { + this.handleChange(this.provider.designSystem as DesignSystem, 'backgroundColor'); + } } /** @@ -69,21 +79,15 @@ export class FluentCard extends FluentDesignSystemProvider */ public handleChange(source: DesignSystem, name: string): void { if (!this.cardBackgroundColor) { - const parsedColor = parseColorHexRGB(source[name]); - this.neutralPalette = createColorPalette(parsedColor as ColorRGBA64); - const designSystem: DesignSystem = Object.assign({}, this.designSystem, { - backgroundColor: source[name], - neutralPallette: this.neutralPalette, - } as any); - this.backgroundColor = neutralFillCard(designSystem); + this.backgroundColor = neutralFillCard(source); } } connectedCallback(): void { super.connectedCallback(); - const desinSystemNotifier: Notifier = Observable.getNotifier(this.provider?.designSystem); - desinSystemNotifier.subscribe(this, 'backgroundColor'); - desinSystemNotifier.subscribe(this, 'neutralPalette'); + const parentDSNotifier: Notifier = Observable.getNotifier(this.provider?.designSystem); + parentDSNotifier.subscribe(this, 'backgroundColor'); + parentDSNotifier.subscribe(this, 'neutralPalette'); this.handleChange(this.provider?.designSystem as DesignSystem, 'backgroundColor'); } } diff --git a/packages/web-components/src/checkbox/index.ts b/packages/web-components/src/checkbox/index.ts index f28032f04df77d..ec1ceb8471fc10 100644 --- a/packages/web-components/src/checkbox/index.ts +++ b/packages/web-components/src/checkbox/index.ts @@ -15,6 +15,9 @@ import { CheckboxStyles as styles } from './checkbox.styles'; name: 'fluent-checkbox', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentCheckbox extends Checkbox {} diff --git a/packages/web-components/src/design-system-provider/index.ts b/packages/web-components/src/design-system-provider/index.ts index abb0e65494f469..e1eeb008e63451 100644 --- a/packages/web-components/src/design-system-provider/index.ts +++ b/packages/web-components/src/design-system-provider/index.ts @@ -41,6 +41,9 @@ const backgroundStyles = css` name: 'fluent-design-system-provider', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentDesignSystemProvider extends DesignSystemProvider implements @@ -571,3 +574,8 @@ export class FluentDesignSystemProvider extends DesignSystemProvider }) public neutralOutlineFocusDelta: number; } + +export type FluentDesignSystem = Omit< + DesignSystem, + 'contrast' | 'fontWeight' | 'neutralForegroundDarkIndex' | 'neutralForegroundLightIndex' +>; diff --git a/packages/web-components/src/dialog/dialog.stories.ts b/packages/web-components/src/dialog/dialog.stories.ts index a49d0138a8b083..dfb6b89176c823 100644 --- a/packages/web-components/src/dialog/dialog.stories.ts +++ b/packages/web-components/src/dialog/dialog.stories.ts @@ -1,5 +1,6 @@ import { FluentDesignSystemProvider } from '../design-system-provider'; import DialogTemplate from './fixtures/dialog.html'; +import DialogFastButtonsTemplate from './fixtures/dialog-button-test.html'; import { FluentDialog } from './'; // Prevent tree-shaking @@ -11,3 +12,4 @@ export default { }; export const Dialog = (): string => DialogTemplate; +export const DialogButtonTest = (): string => DialogFastButtonsTemplate; diff --git a/packages/web-components/src/dialog/fixtures/dialog-button-test.html b/packages/web-components/src/dialog/fixtures/dialog-button-test.html new file mode 100644 index 00000000000000..39d91d1585785f --- /dev/null +++ b/packages/web-components/src/dialog/fixtures/dialog-button-test.html @@ -0,0 +1,7 @@ + + +

Dialog with text and fluent buttons. The first button should receive focus

+ Button Text + Button Text +
+
diff --git a/packages/web-components/src/divider/index.ts b/packages/web-components/src/divider/index.ts index c3dff67fc6707b..0c0b0348d946c0 100644 --- a/packages/web-components/src/divider/index.ts +++ b/packages/web-components/src/divider/index.ts @@ -15,6 +15,9 @@ import { DividerStyles as styles } from './divider.styles'; name: 'fluent-divider', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentDivider extends Divider {} diff --git a/packages/web-components/src/flipper/index.ts b/packages/web-components/src/flipper/index.ts index b8f43daad76a86..cd36e7da6462a7 100644 --- a/packages/web-components/src/flipper/index.ts +++ b/packages/web-components/src/flipper/index.ts @@ -15,6 +15,9 @@ import { FlipperStyles as styles } from './flipper.styles'; name: 'fluent-flipper', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentFlipper extends Flipper {} diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index ce492104d37b2d..a2d2af6acb221a 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -13,6 +13,7 @@ export * from './menu-item/'; export * from './progress/'; export * from './radio/'; export * from './radio-group/'; +export * from './skeleton/'; export * from './slider/'; export * from './slider-label/'; export * from './switch/'; diff --git a/packages/web-components/src/menu-item/index.ts b/packages/web-components/src/menu-item/index.ts index bce366f8be308b..16d3d001efe803 100644 --- a/packages/web-components/src/menu-item/index.ts +++ b/packages/web-components/src/menu-item/index.ts @@ -15,6 +15,9 @@ import { MenuItemStyles as styles } from './menu-item.styles'; name: 'fluent-menu-item', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentMenuItem extends MenuItem {} diff --git a/packages/web-components/src/menu/index.ts b/packages/web-components/src/menu/index.ts index f69e7e8c04685e..3f0e48e8294bc6 100644 --- a/packages/web-components/src/menu/index.ts +++ b/packages/web-components/src/menu/index.ts @@ -15,6 +15,9 @@ import { MenuStyles as styles } from './menu.styles'; name: 'fluent-menu', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentMenu extends Menu {} diff --git a/packages/web-components/src/progress/progress-ring/index.ts b/packages/web-components/src/progress/progress-ring/index.ts index b19118a9365777..7a4c5793712ba0 100644 --- a/packages/web-components/src/progress/progress-ring/index.ts +++ b/packages/web-components/src/progress/progress-ring/index.ts @@ -15,6 +15,9 @@ import { ProgressRingStyles as styles } from './progress-ring.styles'; name: 'fluent-progress-ring', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentProgressRing extends BaseProgress {} diff --git a/packages/web-components/src/progress/progress/index.ts b/packages/web-components/src/progress/progress/index.ts index feac425966c499..c245cd8ef1b688 100644 --- a/packages/web-components/src/progress/progress/index.ts +++ b/packages/web-components/src/progress/progress/index.ts @@ -15,6 +15,9 @@ import { ProgressStyles as styles } from './progress.styles'; name: 'fluent-progress', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentProgress extends BaseProgress {} diff --git a/packages/web-components/src/radio-group/index.ts b/packages/web-components/src/radio-group/index.ts index 8037da367cb2f3..16287d380413d6 100644 --- a/packages/web-components/src/radio-group/index.ts +++ b/packages/web-components/src/radio-group/index.ts @@ -15,6 +15,9 @@ import { RadioGroupStyles as styles } from './radio-group.styles'; name: 'fluent-radio-group', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentRadioGroup extends RadioGroup {} diff --git a/packages/web-components/src/radio/index.ts b/packages/web-components/src/radio/index.ts index 82fbed221fdc38..6473c7cd7a0ec7 100644 --- a/packages/web-components/src/radio/index.ts +++ b/packages/web-components/src/radio/index.ts @@ -15,6 +15,9 @@ import { RadioStyles as styles } from './radio.styles'; name: 'fluent-radio', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentRadio extends Radio {} diff --git a/packages/web-components/src/skeleton/fixtures/base.html b/packages/web-components/src/skeleton/fixtures/base.html new file mode 100644 index 00000000000000..da46fb2193afa2 --- /dev/null +++ b/packages/web-components/src/skeleton/fixtures/base.html @@ -0,0 +1,79 @@ + + + +

Skeleton

+ +

Used as element blocks

+ + + + + + + + +

Used as element blocks with shimmer effect element

+ + + + + + + + +

Using SVG via Pattern attribute

+ + + + +

Using inline SVG

+ + + + + + + + + + + + + + + + +
diff --git a/packages/web-components/src/skeleton/index.ts b/packages/web-components/src/skeleton/index.ts new file mode 100644 index 00000000000000..6327acbc039091 --- /dev/null +++ b/packages/web-components/src/skeleton/index.ts @@ -0,0 +1,25 @@ +import { customElement } from '@microsoft/fast-element'; +import { Skeleton, SkeletonTemplate as template } from '@microsoft/fast-foundation'; +import { SkeletonStyles as styles } from './skeleton.styles'; + +/** + * The Fluent Skeleton Element. Implements {@link @microsoft/fast-foundation#Skeleton}, + * {@link @microsoft/fast-foundation#SkeletonTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + */ +@customElement({ + name: 'fluent-skeleton', + template, + styles, +}) +export class FluentSkeleton extends Skeleton {} + +/** + * Styles for Skeleton + * @public + */ +export const SkeletonStyles = styles; diff --git a/packages/web-components/src/skeleton/skeleton.stories.ts b/packages/web-components/src/skeleton/skeleton.stories.ts new file mode 100644 index 00000000000000..7b483b49b0c6a0 --- /dev/null +++ b/packages/web-components/src/skeleton/skeleton.stories.ts @@ -0,0 +1,12 @@ +import { FluentDesignSystemProvider } from '../design-system-provider'; +import SkeletonTemplate from './fixtures/base.html'; +import { FluentSkeleton } from './'; + +FluentSkeleton; +FluentDesignSystemProvider; + +export default { + title: 'Skeleton', +}; + +export const Skeleton = (): string => SkeletonTemplate; diff --git a/packages/web-components/src/skeleton/skeleton.styles.ts b/packages/web-components/src/skeleton/skeleton.styles.ts new file mode 100644 index 00000000000000..b65d31c265723e --- /dev/null +++ b/packages/web-components/src/skeleton/skeleton.styles.ts @@ -0,0 +1,73 @@ +import { css } from '@microsoft/fast-element'; +import { display } from '@microsoft/fast-foundation'; +import { neutralFillRestBehavior } from '../styles'; + +export const SkeletonStyles = css` + ${display('block')} :host { + --skeleton-fill-default: #e1dfdd; + overflow: hidden; + width: 100%; + position: relative; + background-color: var(--skeleton-fill, var(--skeleton-fill-default)); + --skeleton-animation-gradient-default: linear-gradient( + 270deg, + var(--skeleton-fill, var(--skeleton-fill-default)) 0%, + #f3f2f1 51.13%, + var(--skeleton-fill, var(--skeleton-fill-default)) 100% + ); + --skeleton-animation-timing-default: ease-in-out; + } + + :host(.rect) { + border-radius: calc(var(--corner-radius) * 1px); + } + + :host(.circle) { + border-radius: 100%; + overflow: hidden; + } + + object { + position: absolute; + width: 100%; + height: auto; + z-index: 2; + } + + object img { + width: 100%; + height: auto; + } + + ${display('block')} span.shimmer { + position: absolute; + width: 100%; + height: 100%; + background-image: var(--skeleton-animation-gradient, var(--skeleton-animation-gradient-default)); + background-size: 0px 0px / 90% 100%; + background-repeat: no-repeat; + background-color: var(--skeleton-animation-fill, ${neutralFillRestBehavior.var}); + animation: shimmer 2s infinite; + animation-timing-function: var(--skeleton-animation-timing, var(--skeleton-timing-default)); + animation-direction: normal; + z-index: 1; + } + + ::slotted(svg) { + z-index: 2; + } + + ::slotted(.pattern) { + width: 100%; + height: 100%; + } + + @keyframes shimmer { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } + } +`.withBehaviors(neutralFillRestBehavior); diff --git a/packages/web-components/src/slider-label/index.ts b/packages/web-components/src/slider-label/index.ts index 824a527a6ab939..c4788221a253c1 100644 --- a/packages/web-components/src/slider-label/index.ts +++ b/packages/web-components/src/slider-label/index.ts @@ -15,6 +15,9 @@ import { SliderLabelStyles as styles } from './slider-label.styles'; name: 'fluent-slider-label', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentSliderLabel extends SliderLabel {} diff --git a/packages/web-components/src/slider/index.ts b/packages/web-components/src/slider/index.ts index 6a6a1aa2a05e85..b9efbb51a1bb85 100644 --- a/packages/web-components/src/slider/index.ts +++ b/packages/web-components/src/slider/index.ts @@ -15,6 +15,9 @@ import { SliderStyles as styles } from './slider.styles'; name: 'fluent-slider', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentSlider extends Slider {} diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts index d9eea63129b0af..4caaff10dab795 100644 --- a/packages/web-components/src/styles/patterns/button.ts +++ b/packages/web-components/src/styles/patterns/button.ts @@ -61,6 +61,10 @@ export const BaseButtonStyles: ElementStyles = css` font-family: inherit; } + .control, .end, .start { + font: inherit; + } + :host(:hover) { background-color: ${neutralFillHoverBehavior.var}; } diff --git a/packages/web-components/src/switch/index.ts b/packages/web-components/src/switch/index.ts index 48d08fb570b142..f914929a72754b 100644 --- a/packages/web-components/src/switch/index.ts +++ b/packages/web-components/src/switch/index.ts @@ -15,6 +15,9 @@ import { SwitchStyles as styles } from './switch.styles'; name: 'fluent-switch', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentSwitch extends Switch {} diff --git a/packages/web-components/src/tabs/index.ts b/packages/web-components/src/tabs/index.ts index 25ed93ead0abf9..0d51ff74bfe0f8 100644 --- a/packages/web-components/src/tabs/index.ts +++ b/packages/web-components/src/tabs/index.ts @@ -15,6 +15,9 @@ import { TabsStyles as styles } from './tabs.styles'; name: 'fluent-tabs', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentTabs extends Tabs {} export * from './tab/'; diff --git a/packages/web-components/src/tabs/tab-panel/index.ts b/packages/web-components/src/tabs/tab-panel/index.ts index c4c56c2f56143f..11b8f46cc43f09 100644 --- a/packages/web-components/src/tabs/tab-panel/index.ts +++ b/packages/web-components/src/tabs/tab-panel/index.ts @@ -15,6 +15,9 @@ import { TabPanelStyles as styles } from './tab-panel.styles'; name: 'fluent-tab-panel', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentTabPanel extends TabPanel {} diff --git a/packages/web-components/src/tabs/tab/index.ts b/packages/web-components/src/tabs/tab/index.ts index 2952168555ac55..4f4a2a4ea429a4 100644 --- a/packages/web-components/src/tabs/tab/index.ts +++ b/packages/web-components/src/tabs/tab/index.ts @@ -15,6 +15,9 @@ import { TabStyles as styles } from './tab.styles'; name: 'fluent-tab', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentTab extends Tab {} diff --git a/packages/web-components/src/text-area/index.ts b/packages/web-components/src/text-area/index.ts index 4fb01d4f595616..ff44f410fa48d5 100644 --- a/packages/web-components/src/text-area/index.ts +++ b/packages/web-components/src/text-area/index.ts @@ -23,6 +23,9 @@ export type TextAreaAppearance = 'filled' | 'outline'; name: 'fluent-text-area', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentTextArea extends TextArea { /** diff --git a/packages/web-components/src/text-field/index.ts b/packages/web-components/src/text-field/index.ts index 50ebc51cf7c0c6..0e87d77f4f8db4 100644 --- a/packages/web-components/src/text-field/index.ts +++ b/packages/web-components/src/text-field/index.ts @@ -25,6 +25,7 @@ export type TextFieldAppearance = 'filled' | 'outline'; styles, shadowOptions: { delegatesFocus: true, + mode: 'closed', }, }) export class FluentTextField extends TextField { diff --git a/packages/web-components/src/tree-item/index.ts b/packages/web-components/src/tree-item/index.ts index a2bb1b8277cfa4..d4d908c7e5cf28 100644 --- a/packages/web-components/src/tree-item/index.ts +++ b/packages/web-components/src/tree-item/index.ts @@ -15,6 +15,9 @@ import { TreeItemStyles as styles } from './tree-item.styles'; name: 'fluent-tree-item', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentTreeItem extends TreeItem {} diff --git a/packages/web-components/src/tree-view/index.ts b/packages/web-components/src/tree-view/index.ts index 7ada2edec82eb0..0b292349b91557 100644 --- a/packages/web-components/src/tree-view/index.ts +++ b/packages/web-components/src/tree-view/index.ts @@ -15,6 +15,9 @@ import { TreeViewStyles as styles } from './tree-view.styles'; name: 'fluent-tree-view', template, styles, + shadowOptions: { + mode: 'closed', + }, }) export class FluentTreeView extends TreeView {} diff --git a/yarn.lock b/yarn.lock index e98066df030e8e..e893d8d39614ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2411,18 +2411,18 @@ "@microsoft/fast-jss-utilities" "^4.8.0" "@microsoft/fast-web-utilities" "^4.6.0" -"@microsoft/fast-element@^0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.17.0.tgz#2d52b6c83375fbf2c6d05bc45211dad3960dff1a" - integrity sha512-bPkPPYcZ+hojPQ3m1WPdI5Z3d+fJbpddCdSspZy6T6NV9JoIDRg+gaJcBWWQmeBDsCsG+dVNK1RezXuWLP5qpA== +"@microsoft/fast-element@^0.19.1": + version "0.19.1" + resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-0.19.1.tgz#7b7cddc844168eb168f75e41ea63d23d942667cb" + integrity sha512-qfEqj4s7E3B0qsNRoiQyKF682fdpEbCINV/GS6tE/ZOFC/B0CKpcZjk3mWyw8XAfsLA50E4YuR9Hn8SuMc2sFg== -"@microsoft/fast-foundation@^1.7.0": - version "1.7.1" - resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.7.1.tgz#17fede34bf76bd0195b5c5b76a73ce765d69edd1" - integrity sha512-8eTpcBRz6aLiVP6/FMUEiFw/t3DxA6xnT/8UkFI8NJQtBlZdIatt5+2PSwj5IsS4sqkniCeIv+wWa5jX6FHrSQ== +"@microsoft/fast-foundation@^1.8.1": + version "1.8.1" + resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-1.8.1.tgz#9123a0f0dc0420ccff9554789b16f844ca0e9c8d" + integrity sha512-eWgp/RsSwCsJHfE/ljS0eTFLlnK0xCaJkjRIzjZN1cdBMDP7EJ+3XfxLsJBQ8tPLKlTjDfIrgnCGfO4GVe6Ggg== dependencies: - "@microsoft/fast-element" "^0.17.0" - "@microsoft/fast-web-utilities" "^4.6.0" + "@microsoft/fast-element" "^0.19.1" + "@microsoft/fast-web-utilities" "^4.6.1" "@microsoft/tsdoc-config" "^0.13.4" tabbable "^4.0.0" tslib "^1.13.0" @@ -2453,6 +2453,13 @@ dependencies: exenv-es6 "^1.0.0" +"@microsoft/fast-web-utilities@^4.6.1": + version "4.6.1" + resolved "https://registry.yarnpkg.com/@microsoft/fast-web-utilities/-/fast-web-utilities-4.6.1.tgz#91c39bbd8499009c9e569d1aa309da17efcf9297" + integrity sha512-EL1v1xmQlQs5qwPM6gzwQXUgIHtRgKXmHajQJmsUvS0rm8rCu3kvp1eEq3okXuKjPjzToFusOgVapzi5ibjpbA== + dependencies: + exenv-es6 "^1.0.0" + "@microsoft/load-themed-styles@1.10.26", "@microsoft/load-themed-styles@^1.10.26": version "1.10.26" resolved "https://registry.yarnpkg.com/@microsoft/load-themed-styles/-/load-themed-styles-1.10.26.tgz#95673415103564e5427ca0d43f41da5cc44f29dc"