From acae6ad0bba9b2e1d7aae4ded2b3613440b3f609 Mon Sep 17 00:00:00 2001 From: Chris Holt Date: Tue, 20 Apr 2021 13:45:03 -0700 Subject: [PATCH] vNext: update components to extend FoundationElement (#4570) * support foundation element on accordion and accordion item * update anchor to use foundation element * update AnchoredRegion to extend FoundationElement * update Badge to extend FoundationElement * update breadcrumb and breadcrumb item to extend FoundationElement * update Button to extend FoundationElement * update checkbox to extend from FoundationElement * update Dialog to extend FoundationElement * update disclosure to extend FoundationElement * update divider to extend FoundationElement * update Flipper to extend FoundationElement * update horizontal scroll to extend FoundationElement * update Listbox and ListboxOption to extend FoundationElement * update combobox to extend FoundationElement * update select to extend combobox and update tests * fix listbox option styles and export * update tests (wip) * update Menu and MenuItem to extend FoundationElement * update number field to extend FoundationElement * update base name values * fix: prevent the mixin helper from copying over constructor properties * feat: fixture ergonomic improvements for foundation elements * test: fix Anchor and associated unit tests based on new system * remove incorrect tagFor usage * update radio and radiogroup * update skeleton * update slider and slider label * update switch * update tabs et all to use FoundationElement * update text area and text field to use foundation el * Update tooltip to use FoundationElement * update tests and tree item and view * remove website from lerna packages in favor of npm registry to prevent breaking changes for the time being * update progress and progress ring to use Foundation element * fixing the tests * feat: enable fixtures to handle N foundation elements and custom system * fixing tests! * Change files * fix errors in fast-website * update typings for explorer * update naming convention to lowercase fast * update imports for sites * Change files * update template names to lowercase * update style casing and apply updates to component registries * update tsdoc links for templates Co-authored-by: Rob Eisenberg --- ...-a2550851-d95a-44e8-b894-b6522374a1f3.json | 7 + ...-a1f17588-3819-4e5d-bd7b-0551b59828a9.json | 7 + ...-f402f65f-d3f7-4bd8-be9b-6b6e55c2a7ec.json | 7 + .../custom-controls/control.css.utilities.tsx | 28 +- .../fast-components/docs/api-report.md | 791 +++++++++++++----- .../accordion-item/accordion-item.styles.ts | 25 +- .../src/accordion-item/index.ts | 14 +- .../src/accordion/accordion.styles.ts | 25 +- .../fast-components/src/accordion/index.ts | 14 +- .../src/anchor/anchor.styles.ts | 19 +- .../fast-components/src/anchor/index.ts | 50 +- .../anchored-region.stories.ts | 6 +- .../anchored-region/anchored-region.styles.ts | 2 +- .../src/anchored-region/index.ts | 14 +- .../fast-components/src/badge/badge.styles.ts | 3 +- .../fast-components/src/badge/index.ts | 14 +- .../breadcrumb-item/breadcrumb-item.styles.ts | 33 +- .../src/breadcrumb-item/index.ts | 14 +- .../src/breadcrumb/breadcrumb.styles.ts | 2 +- .../fast-components/src/breadcrumb/index.ts | 14 +- .../src/button/button.styles.ts | 17 +- .../fast-components/src/button/index.ts | 49 +- .../src/checkbox/checkbox.stories.ts | 10 +- .../src/checkbox/checkbox.styles.ts | 37 +- .../fast-components/src/checkbox/index.ts | 14 +- .../src/combobox/combobox.styles.ts | 6 +- .../fast-components/src/combobox/index.ts | 16 +- .../fast-components/src/data-grid/index.ts | 8 +- .../src/dialog/dialog.styles.ts | 2 +- .../fast-components/src/dialog/index.ts | 14 +- .../src/disclosure/disclosure.styles.ts | 2 +- .../fast-components/src/disclosure/index.ts | 41 +- .../src/divider/divider.styles.ts | 21 +- .../fast-components/src/divider/index.ts | 14 +- .../src/flipper/flipper.styles.ts | 29 +- .../fast-components/src/flipper/index.ts | 14 +- .../horizontal-scroll.styles.ts | 2 +- .../src/horizontal-scroll/index.ts | 37 +- .../fast-components/src/index-rollup.ts | 5 +- .../src/listbox-option/index.ts | 14 +- .../listbox-option/listbox-option.styles.ts | 79 +- .../fast-components/src/listbox/index.ts | 14 +- .../src/listbox/listbox.styles.ts | 44 +- .../fast-components/src/menu-item/index.ts | 16 +- .../src/menu-item/menu-item.styles.ts | 63 +- .../fast-components/src/menu/index.ts | 14 +- .../fast-components/src/menu/menu.styles.ts | 71 +- .../fast-components/src/number-field/index.ts | 49 +- .../src/number-field/number-field.styles.ts | 89 +- .../src/progress-ring/index.ts | 16 +- .../src/progress-ring/progress-ring.styles.ts | 153 ++-- .../fast-components/src/progress/index.ts | 17 +- .../src/progress/progress.styles.ts | 225 ++--- .../fast-components/src/radio-group/index.ts | 14 +- .../src/radio-group/radio-group.styles.ts | 2 +- .../fast-components/src/radio/index.ts | 14 +- .../fast-components/src/radio/radio.styles.ts | 35 +- .../fast-components/src/select/index.ts | 14 +- .../src/select/select.styles.ts | 37 +- .../fast-components/src/skeleton/index.ts | 14 +- .../src/skeleton/skeleton.styles.ts | 164 ++-- .../fast-components/src/slider-label/index.ts | 39 +- .../src/slider-label/slider-label.styles.ts | 103 +-- .../fast-components/src/slider/index.ts | 14 +- .../src/slider/slider.stories.ts | 4 +- .../src/slider/slider.styles.ts | 23 +- .../fast-components/src/switch/index.ts | 14 +- .../src/switch/switch.styles.ts | 79 +- .../fast-components/src/tab-panel/index.ts | 14 +- .../src/tab-panel/tab-panel.styles.ts | 2 +- .../fast-components/src/tab/index.ts | 14 +- .../fast-components/src/tab/tab.styles.ts | 41 +- .../fast-components/src/tabs/index.ts | 15 +- .../fast-components/src/tabs/tabs.styles.ts | 197 ++--- .../fast-components/src/text-area/index.ts | 49 +- .../src/text-area/text-area.styles.ts | 41 +- .../fast-components/src/text-field/index.ts | 49 +- .../src/text-field/text-field.styles.ts | 89 +- .../fast-components/src/tooltip/index.ts | 20 +- .../src/tooltip/tooltip.stories.ts | 6 +- .../src/tooltip/tooltip.styles.ts | 135 +-- .../fast-components/src/tree-item/index.ts | 14 +- .../src/tree-item/tree-item.styles.ts | 35 +- .../fast-components/src/tree-view/index.ts | 14 +- .../src/tree-view/tree-view.styles.ts | 2 +- .../fast-foundation/docs/api-report.md | 189 +++-- .../src/accordion-item/accordion-item.spec.ts | 15 +- .../accordion-item/accordion-item.template.ts | 5 +- .../src/accordion-item/accordion-item.ts | 5 +- .../src/accordion/accordion.spec.ts | 24 +- .../src/accordion/accordion.template.ts | 5 +- .../src/accordion/accordion.ts | 7 +- .../fast-foundation/src/anchor/anchor.spec.ts | 15 +- .../src/anchor/anchor.template.ts | 5 +- .../fast-foundation/src/anchor/anchor.ts | 5 +- .../anchored-region/anchored-region.spec.ts | 67 +- .../anchored-region.template.ts | 5 +- .../src/anchored-region/anchored-region.ts | 28 +- .../fast-foundation/src/badge/badge.spec.ts | 12 +- .../src/badge/badge.template.ts | 5 +- .../fast-foundation/src/badge/badge.ts | 5 +- .../breadcrumb-item/breadcrumb-item.spec.ts | 14 +- .../breadcrumb-item.template.ts | 9 +- .../src/breadcrumb-item/breadcrumb-item.ts | 2 +- .../src/breadcrumb/breadcrumb.spec.ts | 72 +- .../src/breadcrumb/breadcrumb.template.ts | 5 +- .../src/breadcrumb/breadcrumb.ts | 5 +- .../src/button/button.form-associated.ts | 4 +- .../fast-foundation/src/button/button.spec.ts | 15 +- .../src/button/button.template.ts | 5 +- .../src/checkbox/checkbox.form-associated.ts | 4 +- .../src/checkbox/checkbox.spec.ts | 11 +- .../src/checkbox/checkbox.template.ts | 5 +- .../src/combobox/combobox.spec.ts | 30 +- .../src/combobox/combobox.template.ts | 5 +- .../fast-foundation/src/dialog/dialog.spec.ts | 15 +- .../src/dialog/dialog.template.ts | 5 +- .../fast-foundation/src/dialog/dialog.ts | 5 +- .../src/disclosure/disclosure.spec.ts | 15 +- .../src/disclosure/disclosure.template.ts | 5 +- .../src/disclosure/disclosure.ts | 5 +- .../src/divider/divider.spec.ts | 13 +- .../src/divider/divider.template.ts | 5 +- .../fast-foundation/src/divider/divider.ts | 5 +- .../fast-foundation/src/fixture.ts | 65 +- .../src/flipper/flipper.spec.ts | 21 +- .../src/flipper/flipper.template.ts | 5 +- .../fast-foundation/src/flipper/flipper.ts | 5 +- .../foundation-element/foundation-element.ts | 47 +- .../horizontal-scroll.spec.ts | 142 ++-- .../horizontal-scroll.template.ts | 5 +- .../horizontal-scroll/horizontal-scroll.ts | 5 +- .../src/listbox-option/listbox-option.spec.ts | 13 +- .../listbox-option/listbox-option.template.ts | 5 +- .../src/listbox-option/listbox-option.ts | 7 +- .../src/listbox/listbox.spec.ts | 30 +- .../src/listbox/listbox.template.ts | 5 +- .../fast-foundation/src/listbox/listbox.ts | 5 +- .../src/menu-item/menu-item.spec.ts | 21 +- .../src/menu-item/menu-item.template.ts | 24 +- .../src/menu-item/menu-item.ts | 3 +- .../fast-foundation/src/menu/menu.spec.ts | 240 +++--- .../fast-foundation/src/menu/menu.template.ts | 5 +- .../fast-foundation/src/menu/menu.ts | 5 +- .../number-field.form-associated.ts | 4 +- .../src/number-field/number-field.spec.ts | 13 +- .../src/number-field/number-field.template.ts | 5 +- .../src/progress-ring/progress-ring.spec.ts | 14 +- .../progress-ring/progress-ring.template.ts | 5 +- .../src/progress/base-progress.ts | 6 +- .../src/progress/progress.spec.ts | 11 +- .../src/progress/progress.template.ts | 5 +- .../src/radio-group/radio-group.spec.ts | 225 +++-- .../src/radio-group/radio-group.template.ts | 5 +- .../src/radio-group/radio-group.ts | 7 +- .../src/radio/radio.form-associated.ts | 4 +- .../fast-foundation/src/radio/radio.spec.ts | 13 +- .../src/radio/radio.template.ts | 5 +- .../fast-foundation/src/select/select.spec.ts | 30 +- .../src/select/select.template.ts | 5 +- .../src/skeleton/skeleton.template.ts | 5 +- .../fast-foundation/src/skeleton/skeleton.ts | 5 +- .../src/slider-label/slider-label.spec.ts | 30 +- .../src/slider-label/slider-label.template.ts | 5 +- .../src/slider-label/slider-label.ts | 11 +- .../src/slider/slider.form-associated.ts | 4 +- .../fast-foundation/src/slider/slider.spec.ts | 22 +- .../src/slider/slider.template.ts | 5 +- .../src/switch/switch.form-associated.ts | 4 +- .../fast-foundation/src/switch/switch.spec.ts | 23 +- .../src/switch/switch.template.ts | 5 +- .../src/tab-panel/tab-panel.spec.ts | 12 +- .../src/tab-panel/tab-panel.template.ts | 5 +- .../src/tab-panel/tab-panel.ts | 4 +- .../fast-foundation/src/tab/tab.spec.ts | 12 +- .../fast-foundation/src/tab/tab.template.ts | 5 +- .../fast-foundation/src/tab/tab.ts | 5 +- .../fast-foundation/src/tabs/tabs.spec.ts | 190 ++--- .../fast-foundation/src/tabs/tabs.template.ts | 5 +- .../fast-foundation/src/tabs/tabs.ts | 5 +- .../text-area/text-area.form-associated.ts | 4 +- .../src/text-area/text-area.spec.ts | 12 +- .../src/text-area/text-area.template.ts | 5 +- .../text-field/text-field.form-associated.ts | 4 +- .../src/text-field/text-field.spec.ts | 12 +- .../src/text-field/text-field.template.ts | 5 +- .../src/tooltip/tooltip.spec.ts | 77 +- .../src/tooltip/tooltip.template.ts | 12 +- .../fast-foundation/src/tooltip/tooltip.ts | 3 +- .../src/tree-item/tree-item.spec.ts | 16 +- .../src/tree-item/tree-item.template.ts | 5 +- .../src/tree-item/tree-item.ts | 11 +- .../src/tree-view/tree-view.spec.ts | 22 +- .../src/tree-view/tree-view.template.ts | 5 +- .../src/tree-view/tree-view.ts | 7 +- .../src/utilities/apply-mixins.ts | 12 +- sites/fast-color-explorer/app/site-footer.tsx | 2 +- .../app/site-footer.tsx | 2 +- .../app/web-components/index.tsx | 29 +- .../project-file-transfer/index.tsx | 4 +- sites/fast-creator/app/site-footer.tsx | 2 +- .../fast-creator/app/web-components/index.tsx | 36 +- sites/fast-tooling-examples/app/index.ts | 24 +- .../components/color-swatch/color-swatch.ts | 6 +- .../app/components/fast-frame/fast-frame.ts | 17 +- .../navigation-item.template.ts | 1 - .../src/components/dimension/index.tsx | 6 +- .../src/components/logo/index.tsx | 4 +- 208 files changed, 3301 insertions(+), 2675 deletions(-) create mode 100644 change/@microsoft-fast-components-a2550851-d95a-44e8-b894-b6522374a1f3.json create mode 100644 change/@microsoft-fast-foundation-a1f17588-3819-4e5d-bd7b-0551b59828a9.json create mode 100644 change/@microsoft-fast-tooling-react-f402f65f-d3f7-4bd8-be9b-6b6e55c2a7ec.json diff --git a/change/@microsoft-fast-components-a2550851-d95a-44e8-b894-b6522374a1f3.json b/change/@microsoft-fast-components-a2550851-d95a-44e8-b894-b6522374a1f3.json new file mode 100644 index 00000000000..289bba42485 --- /dev/null +++ b/change/@microsoft-fast-components-a2550851-d95a-44e8-b894-b6522374a1f3.json @@ -0,0 +1,7 @@ +{ + "type": "major", + "comment": "update components to extend FoundationElement", + "packageName": "@microsoft/fast-components", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@microsoft-fast-foundation-a1f17588-3819-4e5d-bd7b-0551b59828a9.json b/change/@microsoft-fast-foundation-a1f17588-3819-4e5d-bd7b-0551b59828a9.json new file mode 100644 index 00000000000..c16c47cbfd3 --- /dev/null +++ b/change/@microsoft-fast-foundation-a1f17588-3819-4e5d-bd7b-0551b59828a9.json @@ -0,0 +1,7 @@ +{ + "type": "major", + "comment": "update components to extend FoundationElement", + "packageName": "@microsoft/fast-foundation", + "email": "chhol@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@microsoft-fast-tooling-react-f402f65f-d3f7-4bd8-be9b-6b6e55c2a7ec.json b/change/@microsoft-fast-tooling-react-f402f65f-d3f7-4bd8-be9b-6b6e55c2a7ec.json new file mode 100644 index 00000000000..d689559ecf9 --- /dev/null +++ b/change/@microsoft-fast-tooling-react-f402f65f-d3f7-4bd8-be9b-6b6e55c2a7ec.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "update fast-tooling references to web components", + "packageName": "@microsoft/fast-tooling-react", + "email": "chhol@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/tooling/fast-tooling-react/src/form/custom-controls/control.css.utilities.tsx b/packages/tooling/fast-tooling-react/src/form/custom-controls/control.css.utilities.tsx index bc61d869b6c..1d8e480667a 100644 --- a/packages/tooling/fast-tooling-react/src/form/custom-controls/control.css.utilities.tsx +++ b/packages/tooling/fast-tooling-react/src/form/custom-controls/control.css.utilities.tsx @@ -1,27 +1,27 @@ /** @jsx h */ /* Note: Set the JSX pragma to the wrapped version of createElement */ import h from "../../utilities/web-components/pragma"; /* Note: Import wrapped createElement. */ - +import { + fastCheckbox, + fastNumberField, + fastOption, + fastSelect, + fastTextField, +} from "@microsoft/fast-components"; +import { FASTColorPicker } from "@microsoft/fast-tooling/dist/esm/web-components"; import React from "react"; import { RenderRefControlConfig, RenderSelectControlConfig, } from "./control.css.utilities.props"; -import { - FASTCheckbox, - FASTNumberField, - FASTOption, - FASTSelect, - FASTTextField, -} from "@microsoft/fast-components"; -import { FASTColorPicker } from "@microsoft/fast-tooling/dist/esm/web-components"; + /** * Ensure tree-shaking doesn't remove these components from the bundle. */ -FASTCheckbox; -FASTNumberField; -FASTOption; -FASTSelect; -FASTTextField; +fastCheckbox; +fastNumberField; +fastOption; +fastSelect; +fastTextField; FASTColorPicker; export function renderDefault(config: RenderRefControlConfig): React.ReactNode { diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md index 764c0cc4a5d..5f5fd697f68 100644 --- a/packages/web-components/fast-components/docs/api-report.md +++ b/packages/web-components/fast-components/docs/api-report.md @@ -6,13 +6,13 @@ import { Accordion } from '@microsoft/fast-foundation'; import { AccordionItem } from '@microsoft/fast-foundation'; -import { Anchor } from '@microsoft/fast-foundation'; +import { Anchor as Anchor_2 } from '@microsoft/fast-foundation'; import { AnchoredRegion } from '@microsoft/fast-foundation'; import { Badge } from '@microsoft/fast-foundation'; import { BaseProgress } from '@microsoft/fast-foundation'; import { Breadcrumb } from '@microsoft/fast-foundation'; import { BreadcrumbItem } from '@microsoft/fast-foundation'; -import { Button } from '@microsoft/fast-foundation'; +import { Button as Button_2 } from '@microsoft/fast-foundation'; import { Checkbox } from '@microsoft/fast-foundation'; import { ColorRGBA64 } from '@microsoft/fast-colors'; import { Combobox } from '@microsoft/fast-foundation'; @@ -22,27 +22,27 @@ import { DataGridRow } from '@microsoft/fast-foundation'; import { DesignSystemProvider } from '@microsoft/fast-foundation'; import { Dialog } from '@microsoft/fast-foundation'; import { Direction } from '@microsoft/fast-web-utilities'; -import { Disclosure } from '@microsoft/fast-foundation'; +import { Disclosure as Disclosure_2 } from '@microsoft/fast-foundation'; import { Divider } from '@microsoft/fast-foundation'; import { Flipper } from '@microsoft/fast-foundation'; -import { HorizontalScroll } from '@microsoft/fast-foundation'; +import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation'; import { Listbox } from '@microsoft/fast-foundation'; import { ListboxOption } from '@microsoft/fast-foundation'; import { Menu } from '@microsoft/fast-foundation'; import { MenuItem } from '@microsoft/fast-foundation'; -import { NumberField } from '@microsoft/fast-foundation'; +import { NumberField as NumberField_2 } from '@microsoft/fast-foundation'; import { Radio } from '@microsoft/fast-foundation'; import { RadioGroup } from '@microsoft/fast-foundation'; import { Select } from '@microsoft/fast-foundation'; import { Skeleton } from '@microsoft/fast-foundation'; import { Slider } from '@microsoft/fast-foundation'; -import { SliderLabel } from '@microsoft/fast-foundation'; +import { SliderLabel as SliderLabel_2 } 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 { TextArea as TextArea_2 } from '@microsoft/fast-foundation'; +import { TextField as TextField_2 } from '@microsoft/fast-foundation'; import { Tooltip } from '@microsoft/fast-foundation'; import { TreeItem } from '@microsoft/fast-foundation'; import { TreeView } from '@microsoft/fast-foundation'; @@ -208,37 +208,62 @@ export const accentForegroundRest: SwatchRecipe; export const accentForegroundRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior; // @public -export const AccordionItemStyles: import("@microsoft/fast-element").ElementStyles; +export const AccordionItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const AccordionStyles: import("@microsoft/fast-element").ElementStyles; +export const AccordionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + +// Warning: (ae-internal-missing-underscore) The name "Anchor" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal +export class Anchor extends Anchor_2 { + // @public + appearance: AnchorAppearance; + // (undocumented) + appearanceChanged(oldValue: AnchorAppearance, newValue: AnchorAppearance): void; + // (undocumented) + connectedCallback(): void; + defaultSlottedContentChanged(oldValue: any, newValue: any): void; +} // @public export type AnchorAppearance = ButtonAppearance | "hypertext"; // @public -export const AnchoredRegionStyles: import("@microsoft/fast-element").ElementStyles; +export const AnchoredRegionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const AnchorStyles: import("@microsoft/fast-element").ElementStyles; +export const AnchorStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const BadgeStyles: import("@microsoft/fast-element").ElementStyles; +export const BadgeStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + +// Warning: (ae-internal-missing-underscore) The name "Button" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export class Button extends Button_2 { + // @public + appearance: ButtonAppearance; + // (undocumented) + connectedCallback(): void; + // @public + defaultSlottedContentChanged(oldValue: any, newValue: any): void; +} // @public export type ButtonAppearance = "accent" | "lightweight" | "neutral" | "outline" | "stealth"; // @public -export const ButtonStyles: import("@microsoft/fast-element").ElementStyles; +export const ButtonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public export const CardStyles: import("@microsoft/fast-element").ElementStyles; // @public -export const CheckboxStyles: import("@microsoft/fast-element").ElementStyles; +export const CheckboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const ComboboxStyles: import("@microsoft/fast-element").ElementStyles; +export const ComboboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public export function createColorPalette(baseColor: any): string[]; @@ -253,59 +278,142 @@ export const DataGridRowStyles: import("@microsoft/fast-element").ElementStyles; export const DataGridStyles: import("@microsoft/fast-element").ElementStyles; // @public -export const DialogStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export type DisclosureAppearance = "accent" | "lightweight"; - -// @public -export const DisclosureStyles: import("@microsoft/fast-element").ElementStyles; +export const DialogStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; -// @public -export const DividerStyles: import("@microsoft/fast-element").ElementStyles; - -// @public -export class FASTAccordion extends Accordion { -} - -// @public -export class FASTAccordionItem extends AccordionItem { -} - -// @public -export class FASTAnchor extends Anchor { - appearance: AnchorAppearance; +// Warning: (ae-internal-missing-underscore) The name "Disclosure" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export class Disclosure extends Disclosure_2 { + // @public + appearance: DisclosureAppearance; // (undocumented) - appearanceChanged(oldValue: AnchorAppearance, newValue: AnchorAppearance): void; + appearanceChanged(oldValue: DisclosureAppearance, newValue: DisclosureAppearance): void; // (undocumented) - connectedCallback(): void; - // @internal - defaultSlottedContentChanged(oldValue: any, newValue: any): void; -} - -// @beta -export class FASTAnchoredRegion extends AnchoredRegion { -} + get disclosureHeight(): number; + // @override + protected onToggle(): void; + // @override + protected setup(): void; + } // @public -export class FASTBadge extends Badge { -} +export type DisclosureAppearance = "accent" | "lightweight"; // @public -export class FASTBreadcrumb extends Breadcrumb { -} +export const DisclosureStyles: import("@microsoft/fast-element").ElementStyles; // @public -export class FASTBreadcrumbItem extends BreadcrumbItem { -} +export const DividerStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + +// @public +export const fastAccordion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Accordion>; + +// @public +export const fastAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof AccordionItem>; + +// Warning: (ae-incompatible-release-tags) The symbol "fastAnchor" is marked as @public, but its signature references "Anchor" which is marked as @internal +// +// @public +export const fastAnchor: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + shadowOptions: { + delegatesFocus: true; + }; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + shadowOptions: { + delegatesFocus: true; + }; +}, typeof Anchor>; -// @public -export class FASTButton extends Button { - appearance: ButtonAppearance; - // (undocumented) - connectedCallback(): void; - defaultSlottedContentChanged(oldValue: any, newValue: any): void; -} +// @beta +export const fastAnchoredRegion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof AnchoredRegion>; + +// @public +export const fastBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Badge>; + +// @public +export const fastBreadcrumb: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Breadcrumb>; + +// @public +export const fastBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + shadowOptions: { + delegatesFocus: true; + }; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + shadowOptions: { + delegatesFocus: true; + }; +}, typeof BreadcrumbItem>; + +// Warning: (ae-incompatible-release-tags) The symbol "fastButton" is marked as @public, but its signature references "Button" which is marked as @internal +// +// @public +export const fastButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + shadowOptions: { + delegatesFocus: true; + }; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + shadowOptions: { + delegatesFocus: true; + }; +}, typeof Button>; // @public export class FASTCard extends DesignSystemProvider implements Pick { @@ -321,12 +429,26 @@ export class FASTCard extends DesignSystemProvider implements Pick import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Checkbox>; // @public -export class FASTCombobox extends Combobox { -} +export const fastCombobox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Combobox>; // @public export class FASTDataGrid extends DataGrid { @@ -545,138 +667,343 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements FA } // @public -export class FASTDialog extends Dialog { -} - -// @public -export class FASTDisclosure extends Disclosure { - appearance: DisclosureAppearance; - // (undocumented) - appearanceChanged(oldValue: DisclosureAppearance, newValue: DisclosureAppearance): void; - // (undocumented) - get disclosureHeight(): number; - // @override - protected onToggle(): void; - // @override - protected setup(): void; - } - -// @public -export class FASTDivider extends Divider { -} - -// @public -export class FASTFlipper extends Flipper { -} - -// @public -export class FASTHorizontalScroll extends HorizontalScroll { - // (undocumented) - connectedCallback(): void; -} - -// @public -export class FASTListbox extends Listbox { -} - -// @public -export class FASTMenu extends Menu { -} - -// @public -export class FASTMenuItem extends MenuItem { -} - -// @public -export class FASTNumberField extends NumberField { - appearance: NumberFieldAppearance; - // @internal (undocumented) - connectedCallback(): void; -} - -// @public -export class FASTOption extends ListboxOption { -} - -// @public -export class FASTProgress extends BaseProgress { -} - -// @public -export class FASTProgressRing extends BaseProgress { -} - -// @public -export class FASTRadio extends Radio { -} - -// @public -export class FASTRadioGroup extends RadioGroup { -} - -// @public -export class FASTSelect extends Select { -} - -// @public -export class FASTSkeleton extends Skeleton { -} - -// @public -export class FASTSlider extends Slider { -} - -// @public -export class FASTSliderLabel extends SliderLabel { - // (undocumented) - protected sliderOrientationChanged(): void; -} - -// @public -export class FASTSwitch extends Switch { -} - -// @public -export class FASTTab extends Tab { -} - -// @public -export class FASTTabPanel extends TabPanel { -} - -// @public -export class FASTTabs extends Tabs { -} - -// @public -export class FASTTextArea extends TextArea { - appearance: TextAreaAppearance; - // @internal (undocumented) - connectedCallback(): void; -} - -// @public -export class FASTTextField extends TextField { - appearance: TextFieldAppearance; - // @internal (undocumented) +export const fastDialog: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Dialog>; + +// Warning: (ae-incompatible-release-tags) The symbol "fastDisclosure" is marked as @public, but its signature references "Disclosure" which is marked as @internal +// +// @public +export const fastDisclosure: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: import("@microsoft/fast-element").ElementStyles; +}, typeof Disclosure>; + +// @public +export const fastDivider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Divider>; + +// @public +export const fastFlipper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Flipper>; + +// Warning: (ae-incompatible-release-tags) The symbol "fastHorizontalScroll" is marked as @public, but its signature references "HorizontalScroll" which is marked as @internal +// +// @public +export const fastHorizontalScroll: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof HorizontalScroll>; + +// @public +export const fastListbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Listbox>; + +// @public +export const fastMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Menu>; + +// @public +export const fastMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof MenuItem>; + +// Warning: (ae-incompatible-release-tags) The symbol "fastNumberField" is marked as @public, but its signature references "NumberField" which is marked as @internal +// +// @public +export const fastNumberField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + shadowOptions: { + delegatesFocus: true; + }; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + shadowOptions: { + delegatesFocus: true; + }; +}, typeof NumberField>; + +// @public +export const fastOption: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof ListboxOption>; + +// @public +export const fastProgress: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, defintion: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, defintion: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof BaseProgress>; + +// @public +export const fastProgressRing: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, defintion: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, defintion: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof BaseProgress>; + +// @public +export const fastRadio: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Radio>; + +// @public +export const fastRadioGroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof RadioGroup>; + +// @public +export const fastSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Select>; + +// @public +export const fastSkeleton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Skeleton>; + +// @public +export const fastSlider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Slider>; + +// Warning: (ae-incompatible-release-tags) The symbol "fastSliderLabel" is marked as @public, but its signature references "SliderLabel" which is marked as @internal +// +// @public +export const fastSliderLabel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof SliderLabel>; + +// @public +export const fastSwitch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Switch>; + +// @public +export const fastTab: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Tab>; + +// @public +export const fastTabPanel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof TabPanel>; + +// @public +export const fastTabs: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Tabs>; + +// Warning: (ae-incompatible-release-tags) The symbol "fastTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal +// +// @public +export const fastTextArea: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + shadowOptions: { + delegatesFocus: true; + }; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + shadowOptions: { + delegatesFocus: true; + }; +}, typeof TextArea>; + +// Warning: (ae-incompatible-release-tags) The symbol "fastTextField" is marked as @public, but its signature references "TextField" which is marked as @internal +// +// @public +export const fastTextField: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + shadowOptions: { + delegatesFocus: true; + }; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + shadowOptions: { + delegatesFocus: true; + }; +}, typeof TextField>; + +// @public +export const fastTooltip: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof Tooltip>; + +// @public +export const fastTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof TreeItem>; + +// @public +export const fastTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: any, definition: any) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; +}, typeof TreeView>; + +// @public +export const FlipperStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + +// Warning: (ae-internal-missing-underscore) The name "HorizontalScroll" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export class HorizontalScroll extends HorizontalScroll_2 { + // @public (undocumented) connectedCallback(): void; } -// @public -export class FASTTooltip extends Tooltip { -} - -// @public -export class FASTTreeItem extends TreeItem { -} - -// @public -export class FASTTreeView extends TreeView { -} - -// @public -export const FlipperStyles: import("@microsoft/fast-element").ElementStyles; - // @public export const inlineEndBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior; @@ -687,13 +1014,13 @@ export const inlineStartBehavior: import("@microsoft/fast-foundation").CSSCustom export function isDarkMode(designSystem: FASTDesignSystem): boolean; // @public -export const ListboxStyles: import("@microsoft/fast-element").ElementStyles; +export const ListboxStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const MenuItemStyles: import("@microsoft/fast-element").ElementStyles; +export const MenuItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const MenuStyles: import("@microsoft/fast-element").ElementStyles; +export const MenuStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // Warning: (ae-internal-missing-underscore) The name "neutralContrastFill" should be prefixed with an underscore because the declaration is marked as @internal // @@ -1083,14 +1410,24 @@ export const neutralOutlineRest: SwatchRecipe; // @public export const neutralOutlineRestBehavior: import("@microsoft/fast-foundation").CSSCustomPropertyBehavior; +// Warning: (ae-internal-missing-underscore) The name "NumberField" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export class NumberField extends NumberField_2 { + // @public + appearance: NumberFieldAppearance; + // (undocumented) + connectedCallback(): void; +} + // @public export type NumberFieldAppearance = "filled" | "outline"; // @public -export const NumberFieldStyles: import("@microsoft/fast-element").ElementStyles; +export const NumberFieldStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const OptionStyles: import("@microsoft/fast-element").ElementStyles; +export const OptionStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public export type Palette = Swatch[]; @@ -1112,28 +1449,36 @@ export enum PaletteType { export const parseColorString: (color: string) => ColorRGBA64; // @public -export const ProgressRingStyles: import("@microsoft/fast-element").ElementStyles; +export const ProgressRingStyles: (context: any, defintion: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const ProgressStyles: import("@microsoft/fast-element").ElementStyles; +export const ProgressStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const RadioGroupStyles: import("@microsoft/fast-element").ElementStyles; +export const RadioGroupStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const RadioStyles: import("@microsoft/fast-element").ElementStyles; +export const RadioStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const SelectStyles: import("@microsoft/fast-element").ElementStyles; +export const SelectStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const SkeletonStyles: import("@microsoft/fast-element").ElementStyles; +export const SkeletonStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + +// Warning: (ae-internal-missing-underscore) The name "SliderLabel" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export class SliderLabel extends SliderLabel_2 { + // (undocumented) + protected sliderOrientationChanged(): void; +} // @public -export const SliderLabelStyles: import("@microsoft/fast-element").ElementStyles; +export const SliderLabelStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const SliderStyles: import("@microsoft/fast-element").ElementStyles; +export const SliderStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public export enum StandardLuminance { @@ -1144,34 +1489,54 @@ export enum StandardLuminance { } // @public -export const SwitchStyles: import("@microsoft/fast-element").ElementStyles; +export const SwitchStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const TabPanelStyles: import("@microsoft/fast-element").ElementStyles; +export const TabPanelStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const TabsStyles: import("@microsoft/fast-element").ElementStyles; +export const TabsStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const TabStyles: import("@microsoft/fast-element").ElementStyles; +export const TabStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + +// Warning: (ae-internal-missing-underscore) The name "TextArea" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export class TextArea extends TextArea_2 { + // @public + appearance: TextAreaAppearance; + // (undocumented) + connectedCallback(): void; +} // @public export type TextAreaAppearance = "filled" | "outline"; // @public -export const TextAreaStyles: import("@microsoft/fast-element").ElementStyles; +export const TextAreaStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; + +// Warning: (ae-internal-missing-underscore) The name "TextField" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal (undocumented) +export class TextField extends TextField_2 { + // @public + appearance: TextFieldAppearance; + // (undocumented) + connectedCallback(): void; +} // @public export type TextFieldAppearance = "filled" | "outline"; // @public -export const TextFieldStyles: import("@microsoft/fast-element").ElementStyles; +export const TextFieldStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const TreeItemStyles: import("@microsoft/fast-element").ElementStyles; +export const TreeItemStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // @public -export const TreeViewStyles: import("@microsoft/fast-element").ElementStyles; +export const TreeViewStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles; // (No @packageDocumentation comment for this package) diff --git a/packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts b/packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts index 45d73c1aff5..5c6cd575c8d 100644 --- a/packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts +++ b/packages/web-components/fast-components/src/accordion-item/accordion-item.styles.ts @@ -16,7 +16,8 @@ import { } from "../styles/recipes"; import { heightNumber } from "../styles/size"; -export const AccordionItemStyles = css` +export const accordionItemStyles = (context, definition) => + css` ${display("flex")} :host { box-sizing: border-box; font-family: var(--body-font); @@ -130,19 +131,19 @@ export const AccordionItemStyles = css` z-index: 2; } `.withBehaviors( - accentFillRestBehavior, - neutralDividerRestBehavior, - neutralForegroundActiveBehavior, - neutralForegroundFocusBehavior, - neutralForegroundHoverBehavior, - neutralForegroundRestBehavior, - neutralFocusBehavior, - forcedColorsStylesheetBehavior( - css` + accentFillRestBehavior, + neutralDividerRestBehavior, + neutralForegroundActiveBehavior, + neutralForegroundFocusBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, + neutralFocusBehavior, + forcedColorsStylesheetBehavior( + css` .button:${focusVisible}::before { border-color: ${SystemColors.Highlight}; box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${SystemColors.Highlight}; } ` - ) -); + ) + ); diff --git a/packages/web-components/fast-components/src/accordion-item/index.ts b/packages/web-components/fast-components/src/accordion-item/index.ts index 3c7f4982726..143f28fcee1 100644 --- a/packages/web-components/fast-components/src/accordion-item/index.ts +++ b/packages/web-components/fast-components/src/accordion-item/index.ts @@ -1,25 +1,23 @@ -import { customElement } from "@microsoft/fast-element"; import { AccordionItem, - AccordionItemTemplate as template, + accordionItemTemplate as template, } from "@microsoft/fast-foundation"; -import { AccordionItemStyles as styles } from "./accordion-item.styles"; +import { accordionItemStyles as styles } from "./accordion-item.styles"; /** * The FAST Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem}, - * {@link @microsoft/fast-foundation#AccordionItemTemplate} + * {@link @microsoft/fast-foundation#accordionItemTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-accordion-item", +export const fastAccordionItem = AccordionItem.compose({ + baseName: "accordion-item", template, styles, -}) -export class FASTAccordionItem extends AccordionItem {} +}); /** * Styles for AccordionItem diff --git a/packages/web-components/fast-components/src/accordion/accordion.styles.ts b/packages/web-components/fast-components/src/accordion/accordion.styles.ts index 2529f9ec9dc..e286a42e622 100644 --- a/packages/web-components/fast-components/src/accordion/accordion.styles.ts +++ b/packages/web-components/fast-components/src/accordion/accordion.styles.ts @@ -5,15 +5,16 @@ import { neutralForegroundRestBehavior, } from "../styles/recipes"; -export const AccordionStyles = css` - ${display("flex")} :host { - box-sizing: border-box; - flex-direction: column; - font-family: var(--body-font); - font-size: var(--type-ramp-minus-1-font-size); - line-height: var(--type-ramp-minus-1-line-height); - color: ${neutralForegroundRestBehavior.var}; - border-top: calc(var(--outline-width) * 1px) solid - ${neutralDividerRestBehavior.var}; - } -`.withBehaviors(neutralDividerRestBehavior, neutralForegroundRestBehavior); +export const accordionStyles = (context, definition) => + css` + ${display("flex")} :host { + box-sizing: border-box; + flex-direction: column; + font-family: var(--body-font); + font-size: var(--type-ramp-minus-1-font-size); + line-height: var(--type-ramp-minus-1-line-height); + color: ${neutralForegroundRestBehavior.var}; + border-top: calc(var(--outline-width) * 1px) solid + ${neutralDividerRestBehavior.var}; + } + `.withBehaviors(neutralDividerRestBehavior, neutralForegroundRestBehavior); diff --git a/packages/web-components/fast-components/src/accordion/index.ts b/packages/web-components/fast-components/src/accordion/index.ts index 184e00545bd..59bedd04ed0 100644 --- a/packages/web-components/fast-components/src/accordion/index.ts +++ b/packages/web-components/fast-components/src/accordion/index.ts @@ -1,24 +1,22 @@ -import { customElement } from "@microsoft/fast-element"; -import { Accordion, AccordionTemplate as template } from "@microsoft/fast-foundation"; -import { AccordionStyles as styles } from "./accordion.styles"; +import { Accordion, accordionTemplate as template } from "@microsoft/fast-foundation"; +import { accordionStyles as styles } from "./accordion.styles"; export * from "../accordion-item/index"; /** * The FAST Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion}, - * {@link @microsoft/fast-foundation#AccordionTemplate} + * {@link @microsoft/fast-foundation#accordionTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-accordion", +export const fastAccordion = Accordion.compose({ + baseName: "accordion", template, styles, -}) -export class FASTAccordion extends Accordion {} +}); /** * Styles for Accordion diff --git a/packages/web-components/fast-components/src/anchor/anchor.styles.ts b/packages/web-components/fast-components/src/anchor/anchor.styles.ts index 043262d2b9c..db11efd98f3 100644 --- a/packages/web-components/fast-components/src/anchor/anchor.styles.ts +++ b/packages/web-components/fast-components/src/anchor/anchor.styles.ts @@ -9,12 +9,13 @@ import { } from "../styles/index"; import { appearanceBehavior } from "../utilities/behaviors"; -export const AnchorStyles = css` - ${BaseButtonStyles} -`.withBehaviors( - appearanceBehavior("accent", AccentButtonStyles), - appearanceBehavior("hypertext", HypertextStyles), - appearanceBehavior("lightweight", LightweightButtonStyles), - appearanceBehavior("outline", OutlineButtonStyles), - appearanceBehavior("stealth", StealthButtonStyles) -); +export const anchorStyles = (context, definition) => + css` + ${BaseButtonStyles} + `.withBehaviors( + appearanceBehavior("accent", AccentButtonStyles), + appearanceBehavior("hypertext", HypertextStyles), + appearanceBehavior("lightweight", LightweightButtonStyles), + appearanceBehavior("outline", OutlineButtonStyles), + appearanceBehavior("stealth", StealthButtonStyles) + ); diff --git a/packages/web-components/fast-components/src/anchor/index.ts b/packages/web-components/fast-components/src/anchor/index.ts index de20bee3094..66bb639653a 100644 --- a/packages/web-components/fast-components/src/anchor/index.ts +++ b/packages/web-components/fast-components/src/anchor/index.ts @@ -1,7 +1,10 @@ -import { attr, customElement } from "@microsoft/fast-element"; -import { Anchor, AnchorTemplate as template } from "@microsoft/fast-foundation"; +import { attr } from "@microsoft/fast-element"; +import { + Anchor as FoundationAnchor, + anchorTemplate as template, +} from "@microsoft/fast-foundation"; import { ButtonAppearance } from "../button"; -import { AnchorStyles as styles } from "./anchor.styles"; +import { anchorStyles as styles } from "./anchor.styles"; /** * Types of anchor appearance. @@ -10,25 +13,10 @@ import { AnchorStyles as styles } from "./anchor.styles"; export type AnchorAppearance = ButtonAppearance | "hypertext"; /** - * The FAST Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor}, - * {@link @microsoft/fast-foundation#AnchorTemplate} - * - * - * @public - * @remarks - * HTML Element: \ - * - * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + * The FAST components version of Anchor + * @internal */ -@customElement({ - name: "fast-anchor", - template, - styles, - shadowOptions: { - delegatesFocus: true, - }, -}) -export class FASTAnchor extends Anchor { +export class Anchor extends FoundationAnchor { /** * The appearance the anchor should have. * @@ -79,3 +67,23 @@ export class FASTAnchor extends Anchor { * @public */ export const AnchorStyles = styles; + +/** + * The FAST Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor}, + * {@link @microsoft/fast-foundation#anchorTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + */ +export const fastAnchor = Anchor.compose({ + baseName: "anchor", + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); diff --git a/packages/web-components/fast-components/src/anchored-region/anchored-region.stories.ts b/packages/web-components/fast-components/src/anchored-region/anchored-region.stories.ts index f11e95c6b7a..775c106acbd 100644 --- a/packages/web-components/fast-components/src/anchored-region/anchored-region.stories.ts +++ b/packages/web-components/fast-components/src/anchored-region/anchored-region.stories.ts @@ -1,8 +1,8 @@ import { Direction, RtlScrollConverter } from "@microsoft/fast-web-utilities"; import addons from "@storybook/addons"; import { STORY_RENDERED } from "@storybook/core-events"; +import { AnchoredRegion as FoundationAnchoredRegion } from "@microsoft/fast-foundation"; import AnchoredRegionTemplate from "./fixtures/base.html"; -import type { FASTAnchoredRegion } from "./index"; import "./index"; let scalingViewportPreviousXValue: number = 250; @@ -67,14 +67,14 @@ addons.getChannel().addListener(STORY_RENDERED, (name: string) => { const regionScalingUpdate = document.getElementById( "region-scaling-update" - ) as FASTAnchoredRegion; + ) as FoundationAnchoredRegion; document .getElementById("viewport-scaling-update")! .addEventListener("scroll", () => regionScalingUpdate.update()); const regionScalingOffset = document.getElementById( "region-scaling-offset" - ) as FASTAnchoredRegion; + ) as FoundationAnchoredRegion; document .getElementById("viewport-scaling-offset") ?.addEventListener("scroll", (e: MouseEvent) => { diff --git a/packages/web-components/fast-components/src/anchored-region/anchored-region.styles.ts b/packages/web-components/fast-components/src/anchored-region/anchored-region.styles.ts index 3c071b75eab..17e8260f248 100644 --- a/packages/web-components/fast-components/src/anchored-region/anchored-region.styles.ts +++ b/packages/web-components/fast-components/src/anchored-region/anchored-region.styles.ts @@ -1,6 +1,6 @@ import { css } from "@microsoft/fast-element"; -export const AnchoredRegionStyles = css` +export const anchoredRegionStyles = (context, definition) => css` :host { contain: layout; display: block; diff --git a/packages/web-components/fast-components/src/anchored-region/index.ts b/packages/web-components/fast-components/src/anchored-region/index.ts index c6cd04e5c28..0c4bf9df1da 100644 --- a/packages/web-components/fast-components/src/anchored-region/index.ts +++ b/packages/web-components/fast-components/src/anchored-region/index.ts @@ -1,25 +1,23 @@ -import { customElement } from "@microsoft/fast-element"; import { AnchoredRegion, - AnchoredRegionTemplate as template, + anchoredRegionTemplate as template, } from "@microsoft/fast-foundation"; -import { AnchoredRegionStyles as styles } from "./anchored-region.styles"; +import { anchoredRegionStyles as styles } from "./anchored-region.styles"; /** * The FAST AnchoredRegion Element. Implements {@link @microsoft/fast-foundation#AnchoredRegion}, - * {@link @microsoft/fast-foundation#AnchoredRegionTemplate} + * {@link @microsoft/fast-foundation#anchoredRegionTemplate} * * * @beta * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-anchored-region", +export const fastAnchoredRegion = AnchoredRegion.compose({ + baseName: "anchored-region", template, styles, -}) -export class FASTAnchoredRegion extends AnchoredRegion {} +}); /** * Styles for AnchoredRegion diff --git a/packages/web-components/fast-components/src/badge/badge.styles.ts b/packages/web-components/fast-components/src/badge/badge.styles.ts index 47bc5ce18b7..6ed2ed45bd7 100644 --- a/packages/web-components/fast-components/src/badge/badge.styles.ts +++ b/packages/web-components/fast-components/src/badge/badge.styles.ts @@ -2,7 +2,8 @@ import { css } from "@microsoft/fast-element"; import { display } from "@microsoft/fast-foundation"; import { accentForegroundRestBehavior, heightNumber } from "../styles/index"; -export const BadgeStyles = css` +export const badgeStyles = (context, definition) => + css` ${display("inline-block")} :host { box-sizing: border-box; font-family: var(--body-font); diff --git a/packages/web-components/fast-components/src/badge/index.ts b/packages/web-components/fast-components/src/badge/index.ts index 98c0a25651d..f4b396a1101 100644 --- a/packages/web-components/fast-components/src/badge/index.ts +++ b/packages/web-components/fast-components/src/badge/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Badge, BadgeTemplate as template } from "@microsoft/fast-foundation"; -import { BadgeStyles as styles } from "./badge.styles"; +import { Badge, badgeTemplate as template } from "@microsoft/fast-foundation"; +import { badgeStyles as styles } from "./badge.styles"; /** * The FAST Badge Element. Implements {@link @microsoft/fast-foundation#Badge}, - * {@link @microsoft/fast-foundation#BadgeTemplate} + * {@link @microsoft/fast-foundation#badgeTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-badge", +export const fastBadge = Badge.compose({ + baseName: "badge", template, styles, -}) -export class FASTBadge extends Badge {} +}); /** * Styles for Badge diff --git a/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts index e12e8ceb401..f55e67d1bb0 100644 --- a/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts +++ b/packages/web-components/fast-components/src/breadcrumb-item/breadcrumb-item.styles.ts @@ -4,16 +4,17 @@ import { focusVisible, forcedColorsStylesheetBehavior, } from "@microsoft/fast-foundation"; +import { SystemColors } from "@microsoft/fast-web-utilities"; import { accentForegroundActiveBehavior, accentForegroundHoverBehavior, accentForegroundRestBehavior, - neutralForegroundRestBehavior, heightNumber, + neutralForegroundRestBehavior, } from "../styles/index"; -import { SystemColors } from "@microsoft/fast-web-utilities"; -export const BreadcrumbItemStyles = css` +export const breadcrumbItemStyles = (context, definition) => + css` ${display("inline-flex")} :host { background: transparent; box-sizing: border-box; @@ -113,16 +114,16 @@ export const BreadcrumbItemStyles = css` margin-inline-start: 6px; } `.withBehaviors( - accentForegroundRestBehavior, - accentForegroundHoverBehavior, - accentForegroundActiveBehavior, - accentForegroundHoverBehavior, - neutralForegroundRestBehavior, - forcedColorsStylesheetBehavior( - css` - .control:hover .content::before { - background: ${SystemColors.LinkText}; - } - ` - ) -); + accentForegroundRestBehavior, + accentForegroundHoverBehavior, + accentForegroundActiveBehavior, + accentForegroundHoverBehavior, + neutralForegroundRestBehavior, + forcedColorsStylesheetBehavior( + css` + .control:hover .content::before { + background: ${SystemColors.LinkText}; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/breadcrumb-item/index.ts b/packages/web-components/fast-components/src/breadcrumb-item/index.ts index 3714caf5ac2..cd8457b7125 100644 --- a/packages/web-components/fast-components/src/breadcrumb-item/index.ts +++ b/packages/web-components/fast-components/src/breadcrumb-item/index.ts @@ -1,25 +1,23 @@ -import { customElement } from "@microsoft/fast-element"; import { BreadcrumbItem, - BreadcrumbItemTemplate as template, + breadcrumbItemTemplate as template, } from "@microsoft/fast-foundation"; -import { BreadcrumbItemStyles as styles } from "./breadcrumb-item.styles"; +import { breadcrumbItemStyles as styles } from "./breadcrumb-item.styles"; /** * The FAST BreadcrumbItem Element. Implements {@link @microsoft/fast-foundation#BreadcrumbItem}, - * {@link @microsoft/fast-foundation#BreadcrumbItemTemplate} + * {@link @microsoft/fast-foundation#breadcrumbItemTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-breadcrumb-item", +export const fastBreadcrumbItem = BreadcrumbItem.compose({ + baseName: "breadcrumb-item", template, styles, shadowOptions: { delegatesFocus: true, }, -}) -export class FASTBreadcrumbItem extends BreadcrumbItem {} +}); diff --git a/packages/web-components/fast-components/src/breadcrumb/breadcrumb.styles.ts b/packages/web-components/fast-components/src/breadcrumb/breadcrumb.styles.ts index 6fbc46f8acf..6cdd16b8710 100644 --- a/packages/web-components/fast-components/src/breadcrumb/breadcrumb.styles.ts +++ b/packages/web-components/fast-components/src/breadcrumb/breadcrumb.styles.ts @@ -1,7 +1,7 @@ import { css } from "@microsoft/fast-element"; import { display } from "@microsoft/fast-foundation"; -export const BreadcrumbStyles = css` +export const breadcrumbStyles = (context, definition) => css` ${display("inline-block")} :host { box-sizing: border-box; font-family: var(--body-font); diff --git a/packages/web-components/fast-components/src/breadcrumb/index.ts b/packages/web-components/fast-components/src/breadcrumb/index.ts index 95b71feda27..e8c5d92120a 100644 --- a/packages/web-components/fast-components/src/breadcrumb/index.ts +++ b/packages/web-components/fast-components/src/breadcrumb/index.ts @@ -1,19 +1,17 @@ -import { customElement } from "@microsoft/fast-element"; -import { Breadcrumb, BreadcrumbTemplate as template } from "@microsoft/fast-foundation"; -import { BreadcrumbStyles as styles } from "./breadcrumb.styles"; +import { Breadcrumb, breadcrumbTemplate as template } from "@microsoft/fast-foundation"; +import { breadcrumbStyles as styles } from "./breadcrumb.styles"; /** * The FAST Breadcrumb Element. Implements {@link @microsoft/fast-foundation#Breadcrumb}, - * {@link @microsoft/fast-foundation#BreadcrumbTemplate} + * {@link @microsoft/fast-foundation#breadcrumbTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-breadcrumb", +export const fastBreadcrumb = Breadcrumb.compose({ + baseName: "breadcrumb", template, styles, -}) -export class FASTBreadcrumb extends Breadcrumb {} +}); diff --git a/packages/web-components/fast-components/src/button/button.styles.ts b/packages/web-components/fast-components/src/button/button.styles.ts index db1c243379e..8c0ce071445 100644 --- a/packages/web-components/fast-components/src/button/button.styles.ts +++ b/packages/web-components/fast-components/src/button/button.styles.ts @@ -8,11 +8,12 @@ import { } from "../styles/index"; import { appearanceBehavior } from "../utilities/behaviors"; -export const ButtonStyles = css` - ${BaseButtonStyles} -`.withBehaviors( - appearanceBehavior("accent", AccentButtonStyles), - appearanceBehavior("lightweight", LightweightButtonStyles), - appearanceBehavior("outline", OutlineButtonStyles), - appearanceBehavior("stealth", StealthButtonStyles) -); +export const buttonStyles = (context, definition) => + css` + ${BaseButtonStyles} + `.withBehaviors( + appearanceBehavior("accent", AccentButtonStyles), + appearanceBehavior("lightweight", LightweightButtonStyles), + appearanceBehavior("outline", OutlineButtonStyles), + appearanceBehavior("stealth", StealthButtonStyles) + ); diff --git a/packages/web-components/fast-components/src/button/index.ts b/packages/web-components/fast-components/src/button/index.ts index f8a4f9c71ac..cc024ba2039 100644 --- a/packages/web-components/fast-components/src/button/index.ts +++ b/packages/web-components/fast-components/src/button/index.ts @@ -1,6 +1,9 @@ -import { attr, customElement } from "@microsoft/fast-element"; -import { Button, ButtonTemplate as template } from "@microsoft/fast-foundation"; -import { ButtonStyles as styles } from "./button.styles"; +import { attr } from "@microsoft/fast-element"; +import { + Button as FoundationButton, + buttonTemplate as template, +} from "@microsoft/fast-foundation"; +import { buttonStyles as styles } from "./button.styles"; /** * Types of button appearance. @@ -14,25 +17,9 @@ export type ButtonAppearance = | "stealth"; /** - * The FAST Button Element. Implements {@link @microsoft/fast-foundation#Button}, - * {@link @microsoft/fast-foundation#ButtonTemplate} - * - * - * @public - * @remarks - * HTML Element: \ - * - * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + * @internal */ -@customElement({ - name: "fast-button", - template, - styles, - shadowOptions: { - delegatesFocus: true, - }, -}) -export class FASTButton extends Button { +export class Button extends FoundationButton { /** * The appearance the button should have. * @@ -68,6 +55,26 @@ export class FASTButton extends Button { } } +/** + * The FAST Button Element. Implements {@link @microsoft/fast-foundation#Button}, + * {@link @microsoft/fast-foundation#buttonTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + */ +export const fastButton = Button.compose({ + baseName: "button", + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); + /** * Styles for Button * @public diff --git a/packages/web-components/fast-components/src/checkbox/checkbox.stories.ts b/packages/web-components/fast-components/src/checkbox/checkbox.stories.ts index ca78d64184c..ba5b1d27a10 100644 --- a/packages/web-components/fast-components/src/checkbox/checkbox.stories.ts +++ b/packages/web-components/fast-components/src/checkbox/checkbox.stories.ts @@ -1,14 +1,16 @@ import addons from "@storybook/addons"; import { STORY_RENDERED } from "@storybook/core-events"; +import { Checkbox as FoundationCheckbox } from "@microsoft/fast-foundation"; import Examples from "./fixtures/base.html"; import "./index"; -import { FASTCheckbox } from "./index"; addons.getChannel().addListener(STORY_RENDERED, (name: string) => { if (name.toLowerCase().startsWith("checkbox")) { - document.querySelectorAll(".flag-indeterminate").forEach((el: FASTCheckbox) => { - el.indeterminate = true; - }); + document + .querySelectorAll(".flag-indeterminate") + .forEach((el: FoundationCheckbox) => { + el.indeterminate = true; + }); } }); diff --git a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts index 825b64808cf..c3de84fa31e 100644 --- a/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts +++ b/packages/web-components/fast-components/src/checkbox/checkbox.styles.ts @@ -23,7 +23,8 @@ import { neutralOutlineRestBehavior, } from "../styles/index"; -export const CheckboxStyles = css` +export const checkboxStyles = (context, definition) => + css` ${display("inline-flex")} :host { align-items: center; outline: none; @@ -142,21 +143,21 @@ export const CheckboxStyles = css` opacity: var(--disabled-opacity); } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - accentForegroundCutRestBehavior, - neutralFillInputActiveBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + accentForegroundCutRestBehavior, + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` .control { forced-color-adjust: none; border-color: ${SystemColors.FieldText}; @@ -218,5 +219,5 @@ export const CheckboxStyles = css` fill: ${SystemColors.GrayText}; } ` - ) -); + ) + ); diff --git a/packages/web-components/fast-components/src/checkbox/index.ts b/packages/web-components/fast-components/src/checkbox/index.ts index 56f27b03bcc..2ca98f36d7a 100644 --- a/packages/web-components/fast-components/src/checkbox/index.ts +++ b/packages/web-components/fast-components/src/checkbox/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Checkbox, CheckboxTemplate as template } from "@microsoft/fast-foundation"; -import { CheckboxStyles as styles } from "./checkbox.styles"; +import { Checkbox, checkboxTemplate as template } from "@microsoft/fast-foundation"; +import { checkboxStyles as styles } from "./checkbox.styles"; /** * The FAST Checkbox Element. Implements {@link @microsoft/fast-foundation#Checkbox}, - * {@link @microsoft/fast-foundation#CheckboxTemplate} + * {@link @microsoft/fast-foundation#checkboxTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-checkbox", +export const fastCheckbox = Checkbox.compose({ + baseName: "checkbox", template, styles, -}) -export class FASTCheckbox extends Checkbox {} +}); /** * Styles for Checkbox diff --git a/packages/web-components/fast-components/src/combobox/combobox.styles.ts b/packages/web-components/fast-components/src/combobox/combobox.styles.ts index 10719715936..c19f1711968 100644 --- a/packages/web-components/fast-components/src/combobox/combobox.styles.ts +++ b/packages/web-components/fast-components/src/combobox/combobox.styles.ts @@ -1,9 +1,9 @@ import { css } from "@microsoft/fast-element"; import { disabledCursor, focusVisible } from "@microsoft/fast-foundation"; -import { SelectStyles } from "../select/select.styles"; +import { selectStyles } from "../select/select.styles"; -export const ComboboxStyles = css` - ${SelectStyles} +export const comboboxStyles = (context, definition) => css` + ${selectStyles(context, definition)} :host(:empty) .listbox { display: none; diff --git a/packages/web-components/fast-components/src/combobox/index.ts b/packages/web-components/fast-components/src/combobox/index.ts index 19f86b67ab2..2cebd0e4266 100644 --- a/packages/web-components/fast-components/src/combobox/index.ts +++ b/packages/web-components/fast-components/src/combobox/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Combobox, ComboboxTemplate as template } from "@microsoft/fast-foundation"; -import { ComboboxStyles as styles } from "./combobox.styles"; +import { Combobox, comboboxTemplate as template } from "@microsoft/fast-foundation"; +import { comboboxStyles as styles } from "./combobox.styles"; /** - * The FAST Combobox Custom Element. Implements {@link @microsoft/fast-foundation#Combobox|Combobox}, - * {@link @microsoft/fast-foundation#ComboboxTemplate|ComboboxTemplate} + * The FAST Combobox Custom Element. Implements {@link @microsoft/fast-foundation#Combobox}, + * {@link @microsoft/fast-foundation#comboboxTemplate} * * @public * @remarks * HTML Element: \ * */ -@customElement({ - name: "fast-combobox", +export const fastCombobox = Combobox.compose({ + baseName: "combobox", template, styles, -}) -export class FASTCombobox extends Combobox {} +}); /** * Styles for combobox diff --git a/packages/web-components/fast-components/src/data-grid/index.ts b/packages/web-components/fast-components/src/data-grid/index.ts index 19d14c6d103..8b6c7bb8392 100644 --- a/packages/web-components/fast-components/src/data-grid/index.ts +++ b/packages/web-components/fast-components/src/data-grid/index.ts @@ -1,11 +1,11 @@ import { customElement, ViewTemplate } from "@microsoft/fast-element"; import { - DataGrid, - createDataGridTemplate, - DataGridRow, + createDataGridCellTemplate, createDataGridRowTemplate, + createDataGridTemplate, + DataGrid, DataGridCell, - createDataGridCellTemplate, + DataGridRow, } from "@microsoft/fast-foundation"; import { DataGridStyles as gridStyles } from "./data-grid.styles"; import { DataGridRowStyles as rowStyles } from "./data-grid-row.styles"; diff --git a/packages/web-components/fast-components/src/dialog/dialog.styles.ts b/packages/web-components/fast-components/src/dialog/dialog.styles.ts index d34e001143b..1813c4efa27 100644 --- a/packages/web-components/fast-components/src/dialog/dialog.styles.ts +++ b/packages/web-components/fast-components/src/dialog/dialog.styles.ts @@ -1,7 +1,7 @@ import { css } from "@microsoft/fast-element"; import { elevation } from "../styles/elevation"; -export const DialogStyles = css` +export const dialogStyles = (context, definition) => css` :host([hidden]) { display: none; } diff --git a/packages/web-components/fast-components/src/dialog/index.ts b/packages/web-components/fast-components/src/dialog/index.ts index 875e26a6b81..605d9c5183e 100644 --- a/packages/web-components/fast-components/src/dialog/index.ts +++ b/packages/web-components/fast-components/src/dialog/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Dialog, DialogTemplate as template } from "@microsoft/fast-foundation"; -import { DialogStyles as styles } from "./dialog.styles"; +import { Dialog, dialogTemplate as template } from "@microsoft/fast-foundation"; +import { dialogStyles as styles } from "./dialog.styles"; /** * The FAST Dialog Element. Implements {@link @microsoft/fast-foundation#Dialog}, - * {@link @microsoft/fast-foundation#DialogTemplate} + * {@link @microsoft/fast-foundation#dialogTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-dialog", +export const fastDialog = Dialog.compose({ + baseName: "dialog", template, styles, -}) -export class FASTDialog extends Dialog {} +}); /** * Styles for Dialog diff --git a/packages/web-components/fast-components/src/disclosure/disclosure.styles.ts b/packages/web-components/fast-components/src/disclosure/disclosure.styles.ts index a0c70e2e911..1b87b863027 100644 --- a/packages/web-components/fast-components/src/disclosure/disclosure.styles.ts +++ b/packages/web-components/fast-components/src/disclosure/disclosure.styles.ts @@ -9,7 +9,7 @@ import { accentForegroundRestBehavior, } from "../styles/recipes"; -export const DisclosureStyles = css` +export const disclosureStyles = css` .disclosure { transition: height 0.35s; } diff --git a/packages/web-components/fast-components/src/disclosure/index.ts b/packages/web-components/fast-components/src/disclosure/index.ts index bbd612248e3..7be2bcd50a6 100644 --- a/packages/web-components/fast-components/src/disclosure/index.ts +++ b/packages/web-components/fast-components/src/disclosure/index.ts @@ -1,6 +1,9 @@ -import { attr, customElement } from "@microsoft/fast-element"; -import { Disclosure, DisclosureTemplate as template } from "@microsoft/fast-foundation"; -import { DisclosureStyles as styles } from "./disclosure.styles"; +import { attr } from "@microsoft/fast-element"; +import { + Disclosure as FoundationDisclosure, + disclosureTemplate as template, +} from "@microsoft/fast-foundation"; +import { disclosureStyles as styles } from "./disclosure.styles"; /** * Types of anchor appearance. * @public @@ -8,21 +11,9 @@ import { DisclosureStyles as styles } from "./disclosure.styles"; export type DisclosureAppearance = "accent" | "lightweight"; /** - * The FAST Disclosure Element. Implements {@link @microsoft/fast-foundation#Disclosure}, - * {@link @microsoft/fast-foundation#DisclosureTemplate} - * - * - * @public - * @remarks - * HTML Element: \ - * + * @internal */ -@customElement({ - name: "fast-disclosure", - template, - styles, -}) -export class FASTDisclosure extends Disclosure { +export class Disclosure extends FoundationDisclosure { /** * Disclosure default height */ @@ -91,3 +82,19 @@ export class FASTDisclosure extends Disclosure { * @public */ export const DisclosureStyles = styles; + +/** + * The FAST Disclosure Element. Implements {@link @microsoft/fast-foundation#Disclosure}, + * {@link @microsoft/fast-foundation#disclosureTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + */ +export const fastDisclosure = Disclosure.compose({ + baseName: "disclosure", + template, + styles, +}); diff --git a/packages/web-components/fast-components/src/divider/divider.styles.ts b/packages/web-components/fast-components/src/divider/divider.styles.ts index 6b3e2e2818a..2d2b25c4701 100644 --- a/packages/web-components/fast-components/src/divider/divider.styles.ts +++ b/packages/web-components/fast-components/src/divider/divider.styles.ts @@ -2,13 +2,14 @@ import { css } from "@microsoft/fast-element"; import { display } from "@microsoft/fast-foundation"; import { neutralDividerRestBehavior } from "../styles/index"; -export const DividerStyles = css` - ${display("block")} :host { - box-sizing: content-box; - height: 0; - margin: calc(var(--design-unit) * 1px) 0; - border: none; - border-top: calc(var(--outline-width) * 1px) solid - ${neutralDividerRestBehavior.var}; - } -`.withBehaviors(neutralDividerRestBehavior); +export const dividerStyles = (context, definition) => + css` + ${display("block")} :host { + box-sizing: content-box; + height: 0; + margin: calc(var(--design-unit) * 1px) 0; + border: none; + border-top: calc(var(--outline-width) * 1px) solid + ${neutralDividerRestBehavior.var}; + } + `.withBehaviors(neutralDividerRestBehavior); diff --git a/packages/web-components/fast-components/src/divider/index.ts b/packages/web-components/fast-components/src/divider/index.ts index d19600db589..f4a2c5310bd 100644 --- a/packages/web-components/fast-components/src/divider/index.ts +++ b/packages/web-components/fast-components/src/divider/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Divider, DividerTemplate as template } from "@microsoft/fast-foundation"; -import { DividerStyles as styles } from "./divider.styles"; +import { Divider, dividerTemplate as template } from "@microsoft/fast-foundation"; +import { dividerStyles as styles } from "./divider.styles"; /** * The FAST Divider Element. Implements {@link @microsoft/fast-foundation#Divider}, - * {@link @microsoft/fast-foundation#DividerTemplate} + * {@link @microsoft/fast-foundation#dividerTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-divider", +export const fastDivider = Divider.compose({ + baseName: "divider", template, styles, -}) -export class FASTDivider extends Divider {} +}); /** * Styles for Divider diff --git a/packages/web-components/fast-components/src/flipper/flipper.styles.ts b/packages/web-components/fast-components/src/flipper/flipper.styles.ts index 1b8278ea759..fd5444b09d6 100644 --- a/packages/web-components/fast-components/src/flipper/flipper.styles.ts +++ b/packages/web-components/fast-components/src/flipper/flipper.styles.ts @@ -19,7 +19,8 @@ import { neutralOutlineRestBehavior, } from "../styles/index"; -export const FlipperStyles = css` +export const flipperStyles = (context, definition) => + css` ${display("inline-flex")} :host { width: calc(${heightNumber} * 1px); height: calc(${heightNumber} * 1px); @@ -98,17 +99,17 @@ export const FlipperStyles = css` border: 0; } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - accentForegroundCutRestBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundRestBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + accentForegroundCutRestBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundRestBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` :host { background: ${SystemColors.Canvas}; } @@ -152,5 +153,5 @@ export const FlipperStyles = css` box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText}; } ` - ) -); + ) + ); diff --git a/packages/web-components/fast-components/src/flipper/index.ts b/packages/web-components/fast-components/src/flipper/index.ts index d8ea97d209f..07f0a9b727f 100644 --- a/packages/web-components/fast-components/src/flipper/index.ts +++ b/packages/web-components/fast-components/src/flipper/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Flipper, FlipperTemplate as template } from "@microsoft/fast-foundation"; -import { FlipperStyles as styles } from "./flipper.styles"; +import { Flipper, flipperTemplate as template } from "@microsoft/fast-foundation"; +import { flipperStyles as styles } from "./flipper.styles"; /** * The FAST Flipper Element. Implements {@link @microsoft/fast-foundation#Flipper}, - * {@link @microsoft/fast-foundation#FlipperTemplate} + * {@link @microsoft/fast-foundation#flipperTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-flipper", +export const fastFlipper = Flipper.compose({ + baseName: "flipper", template, styles, -}) -export class FASTFlipper extends Flipper {} +}); /** * Styles for Flipper diff --git a/packages/web-components/fast-components/src/horizontal-scroll/horizontal-scroll.styles.ts b/packages/web-components/fast-components/src/horizontal-scroll/horizontal-scroll.styles.ts index 1b7388acf19..0531a6e2fef 100644 --- a/packages/web-components/fast-components/src/horizontal-scroll/horizontal-scroll.styles.ts +++ b/packages/web-components/fast-components/src/horizontal-scroll/horizontal-scroll.styles.ts @@ -98,7 +98,7 @@ export const ActionsStyles = css` * Styles handling the scroll container and content * @public */ -export const HorizontalScrollStyles = css` +export const horizontalScrollStyles = (context, definition) => css` ${display("block")} :host { --scroll-align: center; --scroll-item-spacing: 5px; diff --git a/packages/web-components/fast-components/src/horizontal-scroll/index.ts b/packages/web-components/fast-components/src/horizontal-scroll/index.ts index 83da8426860..7fcfca13baf 100644 --- a/packages/web-components/fast-components/src/horizontal-scroll/index.ts +++ b/packages/web-components/fast-components/src/horizontal-scroll/index.ts @@ -1,28 +1,16 @@ -import { customElement } from "@microsoft/fast-element"; import { - HorizontalScroll, - HorizontalScrollTemplate as template, + HorizontalScroll as FoundationHorizontalScroll, + horizontalScrollTemplate as template, } from "@microsoft/fast-foundation"; import { ActionsStyles, - HorizontalScrollStyles as styles, + horizontalScrollStyles as styles, } from "./horizontal-scroll.styles"; /** - * The FAST HorizontalScroll Element. Implements {@link @microsoft/fast-foundation#HorizontalScroll}, - * {@link @microsoft/fast-foundation#HorizontalScrollTemplate} - * - * - * @public - * @remarks - * HTML Element: \ + * @internal */ -@customElement({ - name: "fast-horizontal-scroll", - template, - styles, -}) -export class FASTHorizontalScroll extends HorizontalScroll { +export class HorizontalScroll extends FoundationHorizontalScroll { /** * @public */ @@ -34,3 +22,18 @@ export class FASTHorizontalScroll extends HorizontalScroll { } } } + +/** + * The FAST HorizontalScroll Element. Implements {@link @microsoft/fast-foundation#HorizontalScroll}, + * {@link @microsoft/fast-foundation#horizontalScrollTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + */ +export const fastHorizontalScroll = HorizontalScroll.compose({ + baseName: "horizontal-scroll", + template, + styles, +}); diff --git a/packages/web-components/fast-components/src/index-rollup.ts b/packages/web-components/fast-components/src/index-rollup.ts index 0ab8fcfe0b5..70da4358729 100644 --- a/packages/web-components/fast-components/src/index-rollup.ts +++ b/packages/web-components/fast-components/src/index-rollup.ts @@ -1,3 +1,4 @@ +// TODO: Is exporting Foundation still necessary with the updated API's? +// export * from "@microsoft/fast-element"; +// export * from "@microsoft/fast-foundation"; export * from "./index"; -export * from "@microsoft/fast-element"; -export * from "@microsoft/fast-foundation"; diff --git a/packages/web-components/fast-components/src/listbox-option/index.ts b/packages/web-components/fast-components/src/listbox-option/index.ts index 58f2888bee1..be815151e26 100644 --- a/packages/web-components/fast-components/src/listbox-option/index.ts +++ b/packages/web-components/fast-components/src/listbox-option/index.ts @@ -1,13 +1,12 @@ -import { customElement } from "@microsoft/fast-element"; import { ListboxOption, - ListboxOptionTemplate as template, + listboxOptionTemplate as template, } from "@microsoft/fast-foundation"; -import { OptionStyles as styles } from "./listbox-option.styles"; +import { optionStyles as styles } from "./listbox-option.styles"; /** * The FAST option Custom Element. Implements {@link @microsoft/fast-foundation#ListboxOption} - * {@link @microsoft/fast-foundation#ListboxOptionTemplate} + * {@link @microsoft/fast-foundation#listboxOptionTemplate} * * * @public @@ -15,12 +14,11 @@ import { OptionStyles as styles } from "./listbox-option.styles"; * HTML Element: \ * */ -@customElement({ - name: "fast-option", +export const fastOption = ListboxOption.compose({ + baseName: "option", template, styles, -}) -export class FASTOption extends ListboxOption {} +}); /** * Styles for Option diff --git a/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts index d784a2f88c5..4331b62a0f7 100644 --- a/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts +++ b/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts @@ -23,7 +23,8 @@ import { } from "../styles/recipes"; import { heightNumber } from "../styles/size"; -export const OptionStyles = css` +export const optionStyles = (context, definition) => + css` ${display("inline-flex")} :host { align-items: center; font-family: var(--body-font); @@ -112,41 +113,41 @@ export const OptionStyles = css` } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillSelectedBehavior, - accentForegroundCutRestBehavior, - forcedColorsStylesheetBehavior( - css` - :host { - border-color: transparent; - forced-color-adjust: none; - color: ${SystemColors.ButtonText}; - fill: currentcolor; - } - - :host(:not([aria-selected="true"]):hover), - :host([aria-selected="true"]) { - background: ${SystemColors.Highlight}; - color: ${SystemColors.HighlightText}; - } - - :host([disabled]), - :host([disabled]:not([aria-selected="true"]):hover) { - background: ${SystemColors.Canvas}; - color: ${SystemColors.GrayText}; - fill: currentcolor; - opacity: 1; - } - ` - ), - neutralFillHoverBehavior, - neutralFillStealthHoverBehavior, - neutralFillStealthRestBehavior, - neutralFillStealthSelectedBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundHoverBehavior, - neutralForegroundRestBehavior, - neutralLayerL1Behavior -); + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillSelectedBehavior, + accentForegroundCutRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host { + border-color: transparent; + forced-color-adjust: none; + color: ${SystemColors.ButtonText}; + fill: currentcolor; + } + + :host(:not([aria-selected="true"]):hover), + :host([aria-selected="true"]) { + background: ${SystemColors.Highlight}; + color: ${SystemColors.HighlightText}; + } + + :host([disabled]), + :host([disabled]:not([aria-selected="true"]):hover) { + background: ${SystemColors.Canvas}; + color: ${SystemColors.GrayText}; + fill: currentcolor; + opacity: 1; + } + ` + ), + neutralFillHoverBehavior, + neutralFillStealthHoverBehavior, + neutralFillStealthRestBehavior, + neutralFillStealthSelectedBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, + neutralLayerL1Behavior + ); diff --git a/packages/web-components/fast-components/src/listbox/index.ts b/packages/web-components/fast-components/src/listbox/index.ts index 7a9129446a2..fa21815756f 100644 --- a/packages/web-components/fast-components/src/listbox/index.ts +++ b/packages/web-components/fast-components/src/listbox/index.ts @@ -1,10 +1,9 @@ -import { customElement } from "@microsoft/fast-element"; -import { Listbox, ListboxTemplate as template } from "@microsoft/fast-foundation"; -import { ListboxStyles as styles } from "./listbox.styles"; +import { Listbox, listboxTemplate as template } from "@microsoft/fast-foundation"; +import { listboxStyles as styles } from "./listbox.styles"; /** * The FAST listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox} - * {@link @microsoft/fast-foundation#ListboxTemplate} + * {@link @microsoft/fast-foundation#listboxTemplate} * * * @public @@ -12,12 +11,11 @@ import { ListboxStyles as styles } from "./listbox.styles"; * HTML Element: \ * */ -@customElement({ - name: "fast-listbox", +export const fastListbox = Listbox.compose({ + baseName: "listbox", template, styles, -}) -export class FASTListbox extends Listbox {} +}); /** * Styles for Listbox diff --git a/packages/web-components/fast-components/src/listbox/listbox.styles.ts b/packages/web-components/fast-components/src/listbox/listbox.styles.ts index a7f8a9b66fb..d4507d13a57 100644 --- a/packages/web-components/fast-components/src/listbox/listbox.styles.ts +++ b/packages/web-components/fast-components/src/listbox/listbox.styles.ts @@ -12,23 +12,25 @@ import { neutralOutlineRestBehavior, } from "../styles/recipes"; -export const ListboxStyles = css` - ${display("inline-flex")} :host { - background: ${neutralLayerFloatingBehavior.var}; - border: calc(var(--outline-width) * 1px) solid ${neutralOutlineRestBehavior.var}; - border-radius: calc(var(--corner-radius) * 1px); - box-sizing: border-box; - flex-direction: column; - padding: calc(var(--design-unit) * 1px) 0; - } +export const listboxStyles = (context, definition) => + css` + ${display("inline-flex")} :host { + background: ${neutralLayerFloatingBehavior.var}; + border: calc(var(--outline-width) * 1px) solid + ${neutralOutlineRestBehavior.var}; + border-radius: calc(var(--corner-radius) * 1px); + box-sizing: border-box; + flex-direction: column; + padding: calc(var(--design-unit) * 1px) 0; + } - :host(:focus-within:not([disabled])) { - border-color: ${neutralFocusBehavior.var}; - box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset; - } -`.withBehaviors( - forcedColorsStylesheetBehavior( - css` + :host(:focus-within:not([disabled])) { + border-color: ${neutralFocusBehavior.var}; + box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset; + } + `.withBehaviors( + forcedColorsStylesheetBehavior( + css` :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]) { background: ${SystemColors.Highlight}; border-color: ${SystemColors.ButtonText}; @@ -45,8 +47,8 @@ export const ListboxStyles = css` fill: currentcolor; } ` - ), - neutralLayerFloatingBehavior, - neutralOutlineRestBehavior, - neutralOutlineFocusBehavior -); + ), + neutralLayerFloatingBehavior, + neutralOutlineRestBehavior, + neutralOutlineFocusBehavior + ); diff --git a/packages/web-components/fast-components/src/menu-item/index.ts b/packages/web-components/fast-components/src/menu-item/index.ts index 2e96f686be3..393b8bf3d30 100644 --- a/packages/web-components/fast-components/src/menu-item/index.ts +++ b/packages/web-components/fast-components/src/menu-item/index.ts @@ -1,24 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { MenuItem, createMenuItemTemplate } from "@microsoft/fast-foundation"; -import { MenuItemStyles as styles } from "./menu-item.styles"; - -const template = createMenuItemTemplate("fast"); +import { MenuItem, menuItemTemplate as template } from "@microsoft/fast-foundation"; +import { menuItemStyles as styles } from "./menu-item.styles"; /** * The FAST Menu Item Element. Implements {@link @microsoft/fast-foundation#MenuItem}, - * {@link @microsoft/fast-foundation#MenuItemTemplate} + * {@link @microsoft/fast-foundation#menuItemTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-menu-item", +export const fastMenuItem = MenuItem.compose({ + baseName: "menu-item", template, styles, -}) -export class FASTMenuItem extends MenuItem {} +}); /** * Styles for MenuItem diff --git a/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts b/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts index dbf7085040a..0b490ff07b5 100644 --- a/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts +++ b/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts @@ -18,7 +18,8 @@ import { neutralLayerL3Behavior, } from "../styles/index"; -export const MenuItemStyles = css` +export const menuItemStyles = (context, definition) => + css` ${display("grid")} :host { contain: layout; overflow: visible; @@ -227,15 +228,15 @@ export const MenuItemStyles = css` pointer-events: none; } `.withBehaviors( - accentFillRestBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralForegroundHoverBehavior, - neutralForegroundRestBehavior, - neutralLayerL2Behavior, - neutralLayerL3Behavior, - forcedColorsStylesheetBehavior( - css` + accentFillRestBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, + neutralLayerL2Behavior, + neutralLayerL3Behavior, + forcedColorsStylesheetBehavior( + css` :host { border-color: transparent; color: ${SystemColors.ButtonText}; @@ -322,24 +323,24 @@ export const MenuItemStyles = css` background: ${SystemColors.Highlight}; } ` - ), - - new DirectionalStyleSheetBehavior( - css` - .expand-collapse-glyph { - transform: rotate(0deg); - } - :host([expanded="true"]) .expand-collapse-glyph { - transform: rotate(45deg); - } - `, - css` - .expand-collapse-glyph { - transform: rotate(180deg); - } - :host([expanded="true"]) .expand-collapse-glyph { - transform: rotate(135deg); - } - ` - ) -); + ), + + new DirectionalStyleSheetBehavior( + css` + .expand-collapse-glyph { + transform: rotate(0deg); + } + :host([expanded="true"]) .expand-collapse-glyph { + transform: rotate(45deg); + } + `, + css` + .expand-collapse-glyph { + transform: rotate(180deg); + } + :host([expanded="true"]) .expand-collapse-glyph { + transform: rotate(135deg); + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/menu/index.ts b/packages/web-components/fast-components/src/menu/index.ts index c20e91a06e0..5cd33efdcb1 100644 --- a/packages/web-components/fast-components/src/menu/index.ts +++ b/packages/web-components/fast-components/src/menu/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Menu, MenuTemplate as template } from "@microsoft/fast-foundation"; -import { MenuStyles as styles } from "./menu.styles"; +import { Menu, menuTemplate as template } from "@microsoft/fast-foundation"; +import { menuStyles as styles } from "./menu.styles"; /** * The FAST Menu Element. Implements {@link @microsoft/fast-foundation#Menu}, - * {@link @microsoft/fast-foundation#MenuTemplate} + * {@link @microsoft/fast-foundation#menuTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-menu", +export const fastMenu = Menu.compose({ + baseName: "menu", template, styles, -}) -export class FASTMenu extends Menu {} +}); /** * Styles for Menu diff --git a/packages/web-components/fast-components/src/menu/menu.styles.ts b/packages/web-components/fast-components/src/menu/menu.styles.ts index 07745175cd9..ebe2ffec239 100644 --- a/packages/web-components/fast-components/src/menu/menu.styles.ts +++ b/packages/web-components/fast-components/src/menu/menu.styles.ts @@ -7,40 +7,41 @@ import { neutralLayerFloatingBehavior, } from "../styles/index"; -export const MenuStyles = css` - ${display("block")} :host { - --elevation: 11; - background: ${neutralLayerFloatingBehavior.var}; - border: calc(var(--outline-width) * 1px) solid transparent; - ${elevation} - margin: 0; - border-radius: calc(var(--corner-radius) * 1px); - padding: calc(var(--design-unit) * 1px) 0; - max-width: 368px; - min-width: 64px; - } +export const menuStyles = (context, definition) => + css` + ${display("block")} :host { + --elevation: 11; + background: ${neutralLayerFloatingBehavior.var}; + border: calc(var(--outline-width) * 1px) solid transparent; + ${elevation} + margin: 0; + border-radius: calc(var(--corner-radius) * 1px); + padding: calc(var(--design-unit) * 1px) 0; + max-width: 368px; + min-width: 64px; + } - :host([slot="submenu"]) { - width: max-content; - margin: 0 calc(var(--design-unit) * 1px); - } + :host([slot="submenu"]) { + width: max-content; + margin: 0 calc(var(--design-unit) * 1px); + } - ::slotted(hr) { - box-sizing: content-box; - height: 0; - margin: 0; - border: none; - border-top: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest); - } -`.withBehaviors( - neutralLayerFloatingBehavior, - neutralDividerRestBehavior, - forcedColorsStylesheetBehavior( - css` - :host { - background: ${SystemColors.Canvas}; - border-color: ${SystemColors.CanvasText}; - } - ` - ) -); + ::slotted(hr) { + box-sizing: content-box; + height: 0; + margin: 0; + border: none; + border-top: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest); + } + `.withBehaviors( + neutralLayerFloatingBehavior, + neutralDividerRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host { + background: ${SystemColors.Canvas}; + border-color: ${SystemColors.CanvasText}; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/number-field/index.ts b/packages/web-components/fast-components/src/number-field/index.ts index e669fa36896..ac63b0a5fc8 100644 --- a/packages/web-components/fast-components/src/number-field/index.ts +++ b/packages/web-components/fast-components/src/number-field/index.ts @@ -1,6 +1,9 @@ -import { attr, customElement } from "@microsoft/fast-element"; -import { NumberField, NumberFieldTemplate as template } from "@microsoft/fast-foundation"; -import { NumberFieldStyles as styles } from "./number-field.styles"; +import { attr } from "@microsoft/fast-element"; +import { + NumberField as FoundationNumberField, + numberFieldTemplate as template, +} from "@microsoft/fast-foundation"; +import { numberFieldStyles as styles } from "./number-field.styles"; /** * Number field appearances @@ -9,25 +12,9 @@ import { NumberFieldStyles as styles } from "./number-field.styles"; export type NumberFieldAppearance = "filled" | "outline"; /** - * The FAST Number Field Custom Element. Implements {@link @microsoft/fast-foundation#NumberField}, - * {@link @microsoft/fast-foundation#NumberFieldTemplate} - * - * - * @public - * @remarks - * HTML Element: \ - * - * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + * @internal */ -@customElement({ - name: "fast-number-field", - shadowOptions: { - delegatesFocus: true, - }, - styles, - template, -}) -export class FASTNumberField extends NumberField { +export class NumberField extends FoundationNumberField { /** * The appearance of the element. * @@ -55,3 +42,23 @@ export class FASTNumberField extends NumberField { * @public */ export const NumberFieldStyles = styles; + +/** + * The FAST Number Field Custom Element. Implements {@link @microsoft/fast-foundation#NumberField}, + * {@link @microsoft/fast-foundation#numberFieldTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + */ +export const fastNumberField = NumberField.compose({ + baseName: "number-field", + styles, + template, + shadowOptions: { + delegatesFocus: true, + }, +}); diff --git a/packages/web-components/fast-components/src/number-field/number-field.styles.ts b/packages/web-components/fast-components/src/number-field/number-field.styles.ts index 42b11f057a8..d56f04af029 100644 --- a/packages/web-components/fast-components/src/number-field/number-field.styles.ts +++ b/packages/web-components/fast-components/src/number-field/number-field.styles.ts @@ -20,7 +20,8 @@ import { neutralOutlineRestBehavior, } from "../styles/index"; -export const NumberFieldStyles = css` +export const numberFieldStyles = (context, definition) => + css` ${display("inline-block")} :host { font-family: var(--body-font); outline: none; @@ -166,46 +167,46 @@ export const NumberFieldStyles = css` border-color: ${neutralOutlineRestBehavior.var}; } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - neutralFillHoverBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFillRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` - .root, - :host([appearance="filled"]) .root { - forced-color-adjust: none; - background: ${SystemColors.Field}; - border-color: ${SystemColors.FieldText}; - } - :host(:hover:not([disabled])) .root, - :host([appearance="filled"]:hover:not([disabled])) .root, - :host([appearance="filled"]:hover) .root { - background: ${SystemColors.Field}; - border-color: ${SystemColors.Highlight}; - } - .start, - .end { - fill: currentcolor; - } - :host([disabled]) { - opacity: 1; - } - :host([disabled]) .root, - :host([appearance="filled"]:hover[disabled]) .root { - border-color: ${SystemColors.GrayText}; - background: ${SystemColors.Field}; - } - :host(:focus-within:enabled) .root { - border-color: ${SystemColors.Highlight}; - box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset; - } - ` - ) -); + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + neutralFillHoverBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .root, + :host([appearance="filled"]) .root { + forced-color-adjust: none; + background: ${SystemColors.Field}; + border-color: ${SystemColors.FieldText}; + } + :host(:hover:not([disabled])) .root, + :host([appearance="filled"]:hover:not([disabled])) .root, + :host([appearance="filled"]:hover) .root { + background: ${SystemColors.Field}; + border-color: ${SystemColors.Highlight}; + } + .start, + .end { + fill: currentcolor; + } + :host([disabled]) { + opacity: 1; + } + :host([disabled]) .root, + :host([appearance="filled"]:hover[disabled]) .root { + border-color: ${SystemColors.GrayText}; + background: ${SystemColors.Field}; + } + :host(:focus-within:enabled) .root { + border-color: ${SystemColors.Highlight}; + box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/progress-ring/index.ts b/packages/web-components/fast-components/src/progress-ring/index.ts index 217340c948d..b1ca7ea5c35 100644 --- a/packages/web-components/fast-components/src/progress-ring/index.ts +++ b/packages/web-components/fast-components/src/progress-ring/index.ts @@ -1,25 +1,23 @@ -import { customElement } from "@microsoft/fast-element"; import { - BaseProgress, - ProgressRingTemplate as template, + BaseProgress as Progress, + progressRingTemplate as template, } from "@microsoft/fast-foundation"; -import { ProgressRingStyles as styles } from "./progress-ring.styles"; +import { progressRingStyles as styles } from "./progress-ring.styles"; /** * The FAST Progress Ring Element. Implements {@link @microsoft/fast-foundation#BaseProgress}, - * {@link @microsoft/fast-foundation#ProgressRingTemplate} + * {@link @microsoft/fast-foundation#progressRingTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-progress-ring", +export const fastProgressRing = Progress.compose({ + baseName: "progress-ring", template, styles, -}) -export class FASTProgressRing extends BaseProgress {} +}); /** * Styles for ProgressRing diff --git a/packages/web-components/fast-components/src/progress-ring/progress-ring.styles.ts b/packages/web-components/fast-components/src/progress-ring/progress-ring.styles.ts index f88f782f7eb..24717581a72 100644 --- a/packages/web-components/fast-components/src/progress-ring/progress-ring.styles.ts +++ b/packages/web-components/fast-components/src/progress-ring/progress-ring.styles.ts @@ -8,89 +8,90 @@ import { neutralForegroundHintBehavior, } from "../styles"; -export const ProgressRingStyles = css` - ${display("flex")} :host { - align-items: center; - outline: none; - height: calc(${heightNumber} * 1px); - width: calc(${heightNumber} * 1px); - margin: calc(${heightNumber} * 1px) 0; - } - - .progress { - height: 100%; - width: 100%; - } - - .background { - stroke: ${neutralFillRestBehavior.var}; - fill: none; - stroke-width: 2px; - } - - .determinate { - stroke: ${accentForegroundRestBehavior.var}; - fill: none; - stroke-width: 2px; - stroke-linecap: round; - transform-origin: 50% 50%; - transform: rotate(-90deg); - transition: all 0.2s ease-in-out; - } +export const progressRingStyles = (context, defintion) => + css` + ${display("flex")} :host { + align-items: center; + outline: none; + height: calc(${heightNumber} * 1px); + width: calc(${heightNumber} * 1px); + margin: calc(${heightNumber} * 1px) 0; + } - .indeterminate-indicator-1 { - stroke: ${accentForegroundRestBehavior.var}; - fill: none; - stroke-width: 2px; - stroke-linecap: round; - transform-origin: 50% 50%; - transform: rotate(-90deg); - transition: all 0.2s ease-in-out; - animation: spin-infinite 2s linear infinite; - } + .progress { + height: 100%; + width: 100%; + } - :host([paused]) .indeterminate-indicator-1 { - animation-play-state: paused; - stroke: ${neutralFillRestBehavior.var}; - } + .background { + stroke: ${neutralFillRestBehavior.var}; + fill: none; + stroke-width: 2px; + } - :host([paused]) .determinate { - stroke: ${neutralForegroundHintBehavior.var}; - } + .determinate { + stroke: ${accentForegroundRestBehavior.var}; + fill: none; + stroke-width: 2px; + stroke-linecap: round; + transform-origin: 50% 50%; + transform: rotate(-90deg); + transition: all 0.2s ease-in-out; + } - @keyframes spin-infinite { - 0% { - stroke-dasharray: 0.01px 43.97px; - transform: rotate(0deg); + .indeterminate-indicator-1 { + stroke: ${accentForegroundRestBehavior.var}; + fill: none; + stroke-width: 2px; + stroke-linecap: round; + transform-origin: 50% 50%; + transform: rotate(-90deg); + transition: all 0.2s ease-in-out; + animation: spin-infinite 2s linear infinite; } - 50% { - stroke-dasharray: 21.99px 21.99px; - transform: rotate(450deg); + + :host([paused]) .indeterminate-indicator-1 { + animation-play-state: paused; + stroke: ${neutralFillRestBehavior.var}; } - 100% { - stroke-dasharray: 0.01px 43.97px; - transform: rotate(1080deg); + + :host([paused]) .determinate { + stroke: ${neutralForegroundHintBehavior.var}; } - } -`.withBehaviors( - accentForegroundRestBehavior, - neutralFillRestBehavior, - neutralForegroundHintBehavior, - forcedColorsStylesheetBehavior( - css` - .indeterminate-indicator-1, - .determinate { - stroke: ${SystemColors.FieldText}; - } - .background { - stroke: ${SystemColors.Field}; + + @keyframes spin-infinite { + 0% { + stroke-dasharray: 0.01px 43.97px; + transform: rotate(0deg); } - :host([paused]) .indeterminate-indicator-1 { - stroke: ${SystemColors.Field}; + 50% { + stroke-dasharray: 21.99px 21.99px; + transform: rotate(450deg); } - :host([paused]) .determinate { - stroke: ${SystemColors.GrayText}; + 100% { + stroke-dasharray: 0.01px 43.97px; + transform: rotate(1080deg); } - ` - ) -); + } + `.withBehaviors( + accentForegroundRestBehavior, + neutralFillRestBehavior, + neutralForegroundHintBehavior, + forcedColorsStylesheetBehavior( + css` + .indeterminate-indicator-1, + .determinate { + stroke: ${SystemColors.FieldText}; + } + .background { + stroke: ${SystemColors.Field}; + } + :host([paused]) .indeterminate-indicator-1 { + stroke: ${SystemColors.Field}; + } + :host([paused]) .determinate { + stroke: ${SystemColors.GrayText}; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/progress/index.ts b/packages/web-components/fast-components/src/progress/index.ts index 47e4e13b6fc..f78142bf5b4 100644 --- a/packages/web-components/fast-components/src/progress/index.ts +++ b/packages/web-components/fast-components/src/progress/index.ts @@ -1,22 +1,23 @@ -import { customElement } from "@microsoft/fast-element"; -import { BaseProgress, ProgressTemplate as template } from "@microsoft/fast-foundation"; -import { ProgressStyles as styles } from "./progress.styles"; +import { + BaseProgress as Progress, + progressTemplate as template, +} from "@microsoft/fast-foundation"; +import { progressStyles as styles } from "./progress.styles"; /** * The FAST Progress Element. Implements {@link @microsoft/fast-foundation#BaseProgress}, - * {@link @microsoft/fast-foundation#ProgressTemplate} + * {@link @microsoft/fast-foundation#progressTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-progress", +export const fastProgress = Progress.compose({ + baseName: "progress", template, styles, -}) -export class FASTProgress extends BaseProgress {} +}); /** * Styles for Progress diff --git a/packages/web-components/fast-components/src/progress/progress.styles.ts b/packages/web-components/fast-components/src/progress/progress.styles.ts index 48ad88c5e44..355e4523828 100644 --- a/packages/web-components/fast-components/src/progress/progress.styles.ts +++ b/packages/web-components/fast-components/src/progress/progress.styles.ts @@ -7,130 +7,131 @@ import { neutralForegroundHintBehavior, } from "../styles"; -export const ProgressStyles = css` - ${display("flex")} :host { - align-items: center; - outline: none; - height: calc(var(--design-unit) * 1px); - margin: calc(var(--design-unit) * 1px) 0; - } - - .progress { - background-color: ${neutralFillRestBehavior.var}; - border-radius: calc(var(--design-unit) * 1px); - width: 100%; - height: 100%; - display: flex; - align-items: center; - position: relative; - } - - .determinate { - background-color: ${accentForegroundRestBehavior.var}; - border-radius: calc(var(--design-unit) * 1px); - height: 100%; - transition: all 0.2s ease-in-out; - display: flex; - } - - .indeterminate { - height: 100%; - border-radius: calc(var(--design-unit) * 1px); - display: flex; - width: 100%; - position: relative; - overflow: hidden; - } - - .indeterminate-indicator-1 { - position: absolute; - opacity: 0; - height: 100%; - background-color: ${accentForegroundRestBehavior.var}; - border-radius: calc(var(--design-unit) * 1px); - animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); - width: 40%; - animation: indeterminate-1 2s infinite; - } - - .indeterminate-indicator-2 { - position: absolute; - opacity: 0; - height: 100%; - background-color: ${accentForegroundRestBehavior.var}; - border-radius: calc(var(--design-unit) * 1px); - animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); - width: 60%; - animation: indeterminate-2 2s infinite; - } - - :host([paused]) .indeterminate-indicator-1, - :host([paused]) .indeterminate-indicator-2 { - animation-play-state: paused; - background-color: ${neutralFillRestBehavior.var}; - } - - :host([paused]) .determinate { - background-color: ${neutralForegroundHintBehavior.var}; - } +export const progressStyles = (context, definition) => + css` + ${display("flex")} :host { + align-items: center; + outline: none; + height: calc(var(--design-unit) * 1px); + margin: calc(var(--design-unit) * 1px) 0; + } - @keyframes indeterminate-1 { - 0% { - opacity: 1; - transform: translateX(-100%); + .progress { + background-color: ${neutralFillRestBehavior.var}; + border-radius: calc(var(--design-unit) * 1px); + width: 100%; + height: 100%; + display: flex; + align-items: center; + position: relative; } - 70% { - opacity: 1; - transform: translateX(300%); + + .determinate { + background-color: ${accentForegroundRestBehavior.var}; + border-radius: calc(var(--design-unit) * 1px); + height: 100%; + transition: all 0.2s ease-in-out; + display: flex; } - 70.01% { - opacity: 0; + + .indeterminate { + height: 100%; + border-radius: calc(var(--design-unit) * 1px); + display: flex; + width: 100%; + position: relative; + overflow: hidden; } - 100% { + + .indeterminate-indicator-1 { + position: absolute; opacity: 0; - transform: translateX(300%); + height: 100%; + background-color: ${accentForegroundRestBehavior.var}; + border-radius: calc(var(--design-unit) * 1px); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + width: 40%; + animation: indeterminate-1 2s infinite; } - } - @keyframes indeterminate-2 { - 0% { + .indeterminate-indicator-2 { + position: absolute; opacity: 0; - transform: translateX(-150%); + height: 100%; + background-color: ${accentForegroundRestBehavior.var}; + border-radius: calc(var(--design-unit) * 1px); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + width: 60%; + animation: indeterminate-2 2s infinite; } - 29.99% { - opacity: 0; + + :host([paused]) .indeterminate-indicator-1, + :host([paused]) .indeterminate-indicator-2 { + animation-play-state: paused; + background-color: ${neutralFillRestBehavior.var}; } - 30% { - opacity: 1; - transform: translateX(-150%); + + :host([paused]) .determinate { + background-color: ${neutralForegroundHintBehavior.var}; } - 100% { - transform: translateX(166.66%); - opacity: 1; + + @keyframes indeterminate-1 { + 0% { + opacity: 1; + transform: translateX(-100%); + } + 70% { + opacity: 1; + transform: translateX(300%); + } + 70.01% { + opacity: 0; + } + 100% { + opacity: 0; + transform: translateX(300%); + } } - } -`.withBehaviors( - accentForegroundRestBehavior, - neutralFillRestBehavior, - neutralForegroundHintBehavior, - forcedColorsStylesheetBehavior( - css` - .progress { - forced-color-adjust: none; - background-color: ${SystemColors.Field}; - box-shadow: 0 0 0 1px inset ${SystemColors.FieldText}; + + @keyframes indeterminate-2 { + 0% { + opacity: 0; + transform: translateX(-150%); + } + 29.99% { + opacity: 0; } - .determinate, - .indeterminate-indicator-1, - .indeterminate-indicator-2 { - forced-color-adjust: none; - background-color: ${SystemColors.FieldText}; + 30% { + opacity: 1; + transform: translateX(-150%); } - :host([paused]) .determinate, - :host([paused]) .indeterminate-indicator-1, - :host([paused]) .indeterminate-indicator-2 { - background-color: ${SystemColors.GrayText}; + 100% { + transform: translateX(166.66%); + opacity: 1; } - ` - ) -); + } + `.withBehaviors( + accentForegroundRestBehavior, + neutralFillRestBehavior, + neutralForegroundHintBehavior, + forcedColorsStylesheetBehavior( + css` + .progress { + forced-color-adjust: none; + background-color: ${SystemColors.Field}; + box-shadow: 0 0 0 1px inset ${SystemColors.FieldText}; + } + .determinate, + .indeterminate-indicator-1, + .indeterminate-indicator-2 { + forced-color-adjust: none; + background-color: ${SystemColors.FieldText}; + } + :host([paused]) .determinate, + :host([paused]) .indeterminate-indicator-1, + :host([paused]) .indeterminate-indicator-2 { + background-color: ${SystemColors.GrayText}; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/radio-group/index.ts b/packages/web-components/fast-components/src/radio-group/index.ts index 29c89088d41..776f9cfd7b7 100644 --- a/packages/web-components/fast-components/src/radio-group/index.ts +++ b/packages/web-components/fast-components/src/radio-group/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { RadioGroup, RadioGroupTemplate as template } from "@microsoft/fast-foundation"; -import { RadioGroupStyles as styles } from "./radio-group.styles"; +import { RadioGroup, radioGroupTemplate as template } from "@microsoft/fast-foundation"; +import { radioGroupStyles as styles } from "./radio-group.styles"; /** * The FAST Radio Group Element. Implements {@link @microsoft/fast-foundation#RadioGroup}, - * {@link @microsoft/fast-foundation#RadioGroupTemplate} + * {@link @microsoft/fast-foundation#radioGroupTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-radio-group", +export const fastRadioGroup = RadioGroup.compose({ + baseName: "radio-group", template, styles, -}) -export class FASTRadioGroup extends RadioGroup {} +}); /** * Styles for RadioGroup diff --git a/packages/web-components/fast-components/src/radio-group/radio-group.styles.ts b/packages/web-components/fast-components/src/radio-group/radio-group.styles.ts index 6c4056458ea..c0841361eca 100644 --- a/packages/web-components/fast-components/src/radio-group/radio-group.styles.ts +++ b/packages/web-components/fast-components/src/radio-group/radio-group.styles.ts @@ -1,7 +1,7 @@ import { css } from "@microsoft/fast-element"; import { display } from "@microsoft/fast-foundation"; -export const RadioGroupStyles = css` +export const radioGroupStyles = (context, definition) => css` ${display("flex")} :host { align-items: flex-start; margin: calc(var(--design-unit) * 1px) 0; diff --git a/packages/web-components/fast-components/src/radio/index.ts b/packages/web-components/fast-components/src/radio/index.ts index 740f5fa9808..fac6a3d165d 100644 --- a/packages/web-components/fast-components/src/radio/index.ts +++ b/packages/web-components/fast-components/src/radio/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Radio, RadioTemplate as template } from "@microsoft/fast-foundation"; -import { RadioStyles as styles } from "./radio.styles"; +import { Radio, radioTemplate as template } from "@microsoft/fast-foundation"; +import { radioStyles as styles } from "./radio.styles"; /** * The FAST Radio Element. Implements {@link @microsoft/fast-foundation#Radio}, - * {@link @microsoft/fast-foundation#RadioTemplate} + * {@link @microsoft/fast-foundation#radioTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-radio", +export const fastRadio = Radio.compose({ + baseName: "radio", template, styles, -}) -export class FASTRadio extends Radio {} +}); /** * Styles for Radio diff --git a/packages/web-components/fast-components/src/radio/radio.styles.ts b/packages/web-components/fast-components/src/radio/radio.styles.ts index 5c80c647c87..c3eef7b0b7c 100644 --- a/packages/web-components/fast-components/src/radio/radio.styles.ts +++ b/packages/web-components/fast-components/src/radio/radio.styles.ts @@ -22,7 +22,8 @@ import { neutralOutlineRestBehavior, } from "../styles/index"; -export const RadioStyles = css` +export const radioStyles = (context, definition) => + css` ${display("inline-flex")} :host { --input-size: calc((${heightNumber} / 2) + var(--design-unit)); align-items: center; @@ -140,20 +141,20 @@ export const RadioStyles = css` opacity: var(--disabled-opacity); } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - accentForegroundCutRestBehavior, - neutralFillInputActiveBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + accentForegroundCutRestBehavior, + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` .control, :host([checked]:not([disabled])) .control { forced-color-adjust: none; @@ -204,5 +205,5 @@ export const RadioStyles = css` background: ${SystemColors.GrayText}; } ` - ) -); + ) + ); diff --git a/packages/web-components/fast-components/src/select/index.ts b/packages/web-components/fast-components/src/select/index.ts index 7ab5d5ecc4f..667c9ee5e78 100644 --- a/packages/web-components/fast-components/src/select/index.ts +++ b/packages/web-components/fast-components/src/select/index.ts @@ -1,10 +1,9 @@ -import { customElement } from "@microsoft/fast-element"; -import { Select, SelectTemplate as template } from "@microsoft/fast-foundation"; -import { SelectStyles as styles } from "./select.styles"; +import { Select, selectTemplate as template } from "@microsoft/fast-foundation"; +import { selectStyles as styles } from "./select.styles"; /** * The FAST select Custom Element. Implements, {@link @microsoft/fast-foundation#Select} - * {@link @microsoft/fast-foundation#SelectTemplate} + * {@link @microsoft/fast-foundation#selectTemplate} * * * @public @@ -12,12 +11,11 @@ import { SelectStyles as styles } from "./select.styles"; * HTML Element: \ * */ -@customElement({ - name: "fast-select", +export const fastSelect = Select.compose({ + baseName: "fast", template, styles, -}) -export class FASTSelect extends Select {} +}); /** * Styles for Select diff --git a/packages/web-components/fast-components/src/select/select.styles.ts b/packages/web-components/fast-components/src/select/select.styles.ts index ee1a40116bd..d51628a6477 100644 --- a/packages/web-components/fast-components/src/select/select.styles.ts +++ b/packages/web-components/fast-components/src/select/select.styles.ts @@ -25,7 +25,8 @@ import { } from "../styles/recipes"; import { heightNumber } from "../styles/size"; -export const SelectStyles = css` +export const selectStyles = (context, definition) => + css` ${display("inline-flex")} :host { --elevation: 14; background: ${neutralFillInputRestBehavior.var}; @@ -188,13 +189,13 @@ export const SelectStyles = css` } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - accentForegroundCutRestBehavior, - accentForegroundFocusBehavior, - forcedColorsStylesheetBehavior( - css` + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + accentForegroundCutRestBehavior, + accentForegroundFocusBehavior, + forcedColorsStylesheetBehavior( + css` :host(:not([disabled]):hover), :host(:not([disabled]):active) { border-color: ${SystemColors.Highlight}; @@ -253,13 +254,13 @@ export const SelectStyles = css` fill: currentcolor; } ` - ), - neutralFillInputActiveBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundRestBehavior, - neutralLayerFloatingBehavior, - neutralOutlineRestBehavior -); + ), + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundRestBehavior, + neutralLayerFloatingBehavior, + neutralOutlineRestBehavior + ); diff --git a/packages/web-components/fast-components/src/skeleton/index.ts b/packages/web-components/fast-components/src/skeleton/index.ts index d7ba700b3ee..db5cdbda858 100644 --- a/packages/web-components/fast-components/src/skeleton/index.ts +++ b/packages/web-components/fast-components/src/skeleton/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Skeleton, SkeletonTemplate as template } from "@microsoft/fast-foundation"; -import { SkeletonStyles as styles } from "./skeleton.styles"; +import { Skeleton, skeletonTemplate as template } from "@microsoft/fast-foundation"; +import { skeletonStyles as styles } from "./skeleton.styles"; /** * The FAST Skeleton Element. Implements {@link @microsoft/fast-foundation#Skeleton}, - * {@link @microsoft/fast-foundation#SkeletonTemplate} + * {@link @microsoft/fast-foundation#skeletonTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-skeleton", +export const fastSkeleton = Skeleton.compose({ + baseName: "skeleton", template, styles, -}) -export class FASTSkeleton extends Skeleton {} +}); /** * Styles for Skeleton diff --git a/packages/web-components/fast-components/src/skeleton/skeleton.styles.ts b/packages/web-components/fast-components/src/skeleton/skeleton.styles.ts index bf474e8447a..9d67c27aff0 100644 --- a/packages/web-components/fast-components/src/skeleton/skeleton.styles.ts +++ b/packages/web-components/fast-components/src/skeleton/skeleton.styles.ts @@ -4,93 +4,97 @@ import { SystemColors } from "@microsoft/fast-web-utilities"; 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([shape="rect"]) { - border-radius: calc(var(--corner-radius) * 1px); - } - - :host([shape="circle"]) { - border-radius: 100%; - overflow: hidden; - } +export const skeletonStyles = (context, definition) => + 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; + } - object { - position: absolute; - width: 100%; - height: auto; - z-index: 2; - } + :host([shape="rect"]) { + border-radius: calc(var(--corner-radius) * 1px); + } - object img { - width: 100%; - height: auto; - } + :host([shape="circle"]) { + border-radius: 100%; + overflow: hidden; + } - ${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; - } + object { + position: absolute; + width: 100%; + height: auto; + z-index: 2; + } - ::slotted(svg) { - z-index: 2; - } + object img { + width: 100%; + height: auto; + } - ::slotted(.pattern) { - width: 100%; - height: 100%; - } + ${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; + } - @keyframes shimmer { - 0% { - transform: translateX(-100%); + ::slotted(svg) { + z-index: 2; } - 100% { - transform: translateX(100%); + + ::slotted(.pattern) { + width: 100%; + height: 100%; } - } -`.withBehaviors( - neutralFillRestBehavior, - forcedColorsStylesheetBehavior( - css` - :host { - forced-color-adjust: none; - background-color: ${SystemColors.ButtonFace}; - box-shadow: 0 0 0 1px ${SystemColors.ButtonText}; - } - ${display("block")} span.shimmer { - display: none; + @keyframes shimmer { + 0% { + transform: translateX(-100%); } - ` - ) -); + 100% { + transform: translateX(100%); + } + } + `.withBehaviors( + neutralFillRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host { + forced-color-adjust: none; + background-color: ${SystemColors.ButtonFace}; + box-shadow: 0 0 0 1px ${SystemColors.ButtonText}; + } + + ${display("block")} span.shimmer { + display: none; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/slider-label/index.ts b/packages/web-components/fast-components/src/slider-label/index.ts index 1e5e46fa77f..0de94585445 100644 --- a/packages/web-components/fast-components/src/slider-label/index.ts +++ b/packages/web-components/fast-components/src/slider-label/index.ts @@ -1,27 +1,18 @@ -import { customElement } from "@microsoft/fast-element"; -import { SliderLabel, SliderLabelTemplate as template } from "@microsoft/fast-foundation"; +import { + SliderLabel as FoundationSliderLabel, + sliderLabelTemplate as template, +} from "@microsoft/fast-foundation"; import { Orientation } from "@microsoft/fast-web-utilities"; import { horizontalSliderStyles, - SliderLabelStyles as styles, + sliderLabelStyles as styles, verticalSliderStyles, } from "./slider-label.styles"; /** - * The FAST Slider Label Custom Element. Implements {@link @microsoft/fast-foundation#(SliderLabel:class)}, - * {@link @microsoft/fast-foundation#SliderLabelTemplate} - * - * - * @public - * @remarks - * HTML Element: \ + * @internal */ -@customElement({ - name: "fast-slider-label", - template, - styles, -}) -export class FASTSliderLabel extends SliderLabel { +export class SliderLabel extends FoundationSliderLabel { protected sliderOrientationChanged(): void { if (this.sliderOrientation === Orientation.horizontal) { this.$fastController.addStyles(horizontalSliderStyles); @@ -33,6 +24,22 @@ export class FASTSliderLabel extends SliderLabel { } } +/** + * The FAST Slider Label Custom Element. Implements {@link @microsoft/fast-foundation#(SliderLabel:class)}, + * {@link @microsoft/fast-foundation#sliderLabelTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + */ + +export const fastSliderLabel = SliderLabel.compose({ + baseName: "slider-label", + template, + styles, +}); + /** * Styles for SliderLabel * @public diff --git a/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts b/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts index 8fb4465b8b0..d000efca0f5 100644 --- a/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts +++ b/packages/web-components/fast-components/src/slider-label/slider-label.styles.ts @@ -48,54 +48,55 @@ export const verticalSliderStyles = css` } `; -export const SliderLabelStyles = css` - ${display("block")} :host { - font-family: var(--body-font); - color: ${neutralForegroundRestBehavior.var}; - fill: currentcolor; - } - .root { - position: absolute; - display: grid; - } - .container { - display: grid; - justify-self: center; - } - .label { - justify-self: center; - align-self: center; - white-space: nowrap; - max-width: 30px; - } - .mark { - width: calc((var(--design-unit) / 4) * 1px); - height: calc(${heightNumber} * 0.25 * 1px); - background: ${neutralOutlineRestBehavior.var}; - justify-self: center; - } - :host(.disabled) { - opacity: var(--disabled-opacity); - } -`.withBehaviors( - neutralForegroundRestBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` - .mark { - forced-color-adjust: none; - background: ${SystemColors.FieldText}; - } - :host(.disabled) { - forced-color-adjust: none; - opacity: 1; - } - :host(.disabled) .label { - color: ${SystemColors.GrayText}; - } - :host(.disabled) .mark { - background: ${SystemColors.GrayText}; - } - ` - ) -); +export const sliderLabelStyles = (context, definition) => + css` + ${display("block")} :host { + font-family: var(--body-font); + color: ${neutralForegroundRestBehavior.var}; + fill: currentcolor; + } + .root { + position: absolute; + display: grid; + } + .container { + display: grid; + justify-self: center; + } + .label { + justify-self: center; + align-self: center; + white-space: nowrap; + max-width: 30px; + } + .mark { + width: calc((var(--design-unit) / 4) * 1px); + height: calc(${heightNumber} * 0.25 * 1px); + background: ${neutralOutlineRestBehavior.var}; + justify-self: center; + } + :host(.disabled) { + opacity: var(--disabled-opacity); + } + `.withBehaviors( + neutralForegroundRestBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .mark { + forced-color-adjust: none; + background: ${SystemColors.FieldText}; + } + :host(.disabled) { + forced-color-adjust: none; + opacity: 1; + } + :host(.disabled) .label { + color: ${SystemColors.GrayText}; + } + :host(.disabled) .mark { + background: ${SystemColors.GrayText}; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/slider/index.ts b/packages/web-components/fast-components/src/slider/index.ts index 3edc407209c..47263db5ba2 100644 --- a/packages/web-components/fast-components/src/slider/index.ts +++ b/packages/web-components/fast-components/src/slider/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Slider, SliderTemplate as template } from "@microsoft/fast-foundation"; -import { SliderStyles as styles } from "./slider.styles"; +import { Slider, sliderTemplate as template } from "@microsoft/fast-foundation"; +import { sliderStyles as styles } from "./slider.styles"; /** * The FAST Slider Custom Element. Implements {@link @microsoft/fast-foundation#(Slider:class)}, - * {@link @microsoft/fast-foundation#SliderTemplate} + * {@link @microsoft/fast-foundation#sliderTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-slider", +export const fastSlider = Slider.compose({ + baseName: "slider", template, styles, -}) -export class FASTSlider extends Slider {} +}); /** * Styles for Slider diff --git a/packages/web-components/fast-components/src/slider/slider.stories.ts b/packages/web-components/fast-components/src/slider/slider.stories.ts index 0e4c4c95538..a35f92ae371 100644 --- a/packages/web-components/fast-components/src/slider/slider.stories.ts +++ b/packages/web-components/fast-components/src/slider/slider.stories.ts @@ -1,7 +1,7 @@ import addons from "@storybook/addons"; import { STORY_RENDERED } from "@storybook/core-events"; +import type { Slider as FoundationSlider } from "@microsoft/fast-foundation"; import Examples from "./fixtures/base.html"; -import type { FASTSlider } from "./index"; import "./index"; function valueTextFormatter(value: string): string { @@ -11,7 +11,7 @@ function valueTextFormatter(value: string): string { addons.getChannel().addListener(STORY_RENDERED, (name: string) => { if (name.toLowerCase().endsWith("slider")) { ["switcher", "switcher2", "slider1"].forEach(x => { - const slider = document.getElementById(x) as FASTSlider; + const slider = document.getElementById(x) as FoundationSlider; slider.valueTextFormatter = valueTextFormatter; }); } diff --git a/packages/web-components/fast-components/src/slider/slider.styles.ts b/packages/web-components/fast-components/src/slider/slider.styles.ts index 5a8d5eddc9c..5b23efa4c08 100644 --- a/packages/web-components/fast-components/src/slider/slider.styles.ts +++ b/packages/web-components/fast-components/src/slider/slider.styles.ts @@ -16,7 +16,8 @@ import { neutralOutlineRestBehavior, } from "../styles/index"; -export const SliderStyles = css` +export const sliderStyles = (context, definition) => + css` :host([hidden]) { display: none; } @@ -116,14 +117,14 @@ export const SliderStyles = css` opacity: var(--disabled-opacity); } `.withBehaviors( - neutralFocusBehavior, - neutralForegroundActiveBehavior, - neutralForegroundHoverBehavior, - neutralForegroundRestBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` + neutralFocusBehavior, + neutralForegroundActiveBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` .thumb-cursor { forced-color-adjust: none; border-color: ${SystemColors.FieldText}; @@ -155,5 +156,5 @@ export const SliderStyles = css` box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText}; } ` - ) -); + ) + ); diff --git a/packages/web-components/fast-components/src/switch/index.ts b/packages/web-components/fast-components/src/switch/index.ts index ead89c50b94..eb54c139441 100644 --- a/packages/web-components/fast-components/src/switch/index.ts +++ b/packages/web-components/fast-components/src/switch/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Switch, SwitchTemplate as template } from "@microsoft/fast-foundation"; -import { SwitchStyles as styles } from "./switch.styles"; +import { Switch, switchTemplate as template } from "@microsoft/fast-foundation"; +import { switchStyles as styles } from "./switch.styles"; /** * The FAST Switch Custom Element. Implements {@link @microsoft/fast-foundation#Switch}, - * {@link @microsoft/fast-foundation#SwitchTemplate} + * {@link @microsoft/fast-foundation#switchTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-switch", +export const fastSwitch = Switch.compose({ + baseName: "switch", template, styles, -}) -export class FASTSwitch extends Switch {} +}); /** * Styles for Switch diff --git a/packages/web-components/fast-components/src/switch/switch.styles.ts b/packages/web-components/fast-components/src/switch/switch.styles.ts index 8a8d45a8936..cd188b2bbe1 100644 --- a/packages/web-components/fast-components/src/switch/switch.styles.ts +++ b/packages/web-components/fast-components/src/switch/switch.styles.ts @@ -23,7 +23,8 @@ import { neutralOutlineRestBehavior, } from "../styles/index"; -export const SwitchStyles = css` +export const switchStyles = (context, definition) => + css` :host([hidden]) { display: none; } @@ -173,20 +174,20 @@ export const SwitchStyles = css` display: block; } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - accentForegroundCutRestBehavior, - neutralFillInputActiveBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + accentForegroundCutRestBehavior, + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineActiveBehavior, + neutralOutlineHoverBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` .checked-indicator, :host(:not([disabled])) .switch:active .checked-indicator { forced-color-adjust: none; @@ -234,29 +235,29 @@ export const SwitchStyles = css` border-color: ${SystemColors.GrayText}; } ` - ), - new DirectionalStyleSheetBehavior( - css` - .checked-indicator { - left: 5px; - right: calc(((${heightNumber} / 2) + 1) * 1px); - } + ), + new DirectionalStyleSheetBehavior( + css` + .checked-indicator { + left: 5px; + right: calc(((${heightNumber} / 2) + 1) * 1px); + } - :host([aria-checked="true"]) .checked-indicator { - left: calc(((${heightNumber} / 2) + 1) * 1px); - right: 5px; - } - `, - css` - .checked-indicator { - right: 5px; - left: calc(((${heightNumber} / 2) + 1) * 1px); - } + :host([aria-checked="true"]) .checked-indicator { + left: calc(((${heightNumber} / 2) + 1) * 1px); + right: 5px; + } + `, + css` + .checked-indicator { + right: 5px; + left: calc(((${heightNumber} / 2) + 1) * 1px); + } - :host([aria-checked="true"]) .checked-indicator { - right: calc(((${heightNumber} / 2) + 1) * 1px); - left: 5px; - } - ` - ) -); + :host([aria-checked="true"]) .checked-indicator { + right: calc(((${heightNumber} / 2) + 1) * 1px); + left: 5px; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/tab-panel/index.ts b/packages/web-components/fast-components/src/tab-panel/index.ts index e50adc11e49..4ebbba6dad3 100644 --- a/packages/web-components/fast-components/src/tab-panel/index.ts +++ b/packages/web-components/fast-components/src/tab-panel/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { TabPanel, TabPanelTemplate as template } from "@microsoft/fast-foundation"; -import { TabPanelStyles as styles } from "./tab-panel.styles"; +import { TabPanel, tabPanelTemplate as template } from "@microsoft/fast-foundation"; +import { tabPanelStyles as styles } from "./tab-panel.styles"; /** * The FAST Tab Panel Custom Element. Implements {@link @microsoft/fast-foundation#TabPanel}, - * {@link @microsoft/fast-foundation#TabPanelTemplate} + * {@link @microsoft/fast-foundation#tabPanelTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-tab-panel", +export const fastTabPanel = TabPanel.compose({ + baseName: "tab-panel", template, styles, -}) -export class FASTTabPanel extends TabPanel {} +}); /** * Styles for TabPanel diff --git a/packages/web-components/fast-components/src/tab-panel/tab-panel.styles.ts b/packages/web-components/fast-components/src/tab-panel/tab-panel.styles.ts index c33b97caeb8..b7b8f95e2e6 100644 --- a/packages/web-components/fast-components/src/tab-panel/tab-panel.styles.ts +++ b/packages/web-components/fast-components/src/tab-panel/tab-panel.styles.ts @@ -1,7 +1,7 @@ import { css } from "@microsoft/fast-element"; import { display } from "@microsoft/fast-foundation"; -export const TabPanelStyles = css` +export const tabPanelStyles = (context, definition) => css` ${display("flex")} :host { box-sizing: border-box; font-size: var(--type-ramp-base-font-size); diff --git a/packages/web-components/fast-components/src/tab/index.ts b/packages/web-components/fast-components/src/tab/index.ts index 461166579f4..58f42c13e5c 100644 --- a/packages/web-components/fast-components/src/tab/index.ts +++ b/packages/web-components/fast-components/src/tab/index.ts @@ -1,22 +1,20 @@ -import { customElement } from "@microsoft/fast-element"; -import { Tab, TabTemplate as template } from "@microsoft/fast-foundation"; -import { TabStyles as styles } from "./tab.styles"; +import { Tab, tabTemplate as template } from "@microsoft/fast-foundation"; +import { tabStyles as styles } from "./tab.styles"; /** * The FAST Tab Custom Element. Implements {@link @microsoft/fast-foundation#Tab}, - * {@link @microsoft/fast-foundation#TabTemplate} + * {@link @microsoft/fast-foundation#tabTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-tab", +export const fastTab = Tab.compose({ + baseName: "tab", template, styles, -}) -export class FASTTab extends Tab {} +}); /** * Styles for Tab diff --git a/packages/web-components/fast-components/src/tab/tab.styles.ts b/packages/web-components/fast-components/src/tab/tab.styles.ts index a5d7e03c3fc..08342baead4 100644 --- a/packages/web-components/fast-components/src/tab/tab.styles.ts +++ b/packages/web-components/fast-components/src/tab/tab.styles.ts @@ -25,7 +25,8 @@ import { neutralForegroundRestBehavior, } from "../styles"; -export const TabStyles = css` +export const tabStyles = (context, definition) => + css` ${display("inline-flex")} :host { box-sizing: border-box; font-family: var(--body-font); @@ -112,23 +113,23 @@ export const TabStyles = css` :host(.vertical:hover[aria-selected="true"]) { } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - accentForegroundActiveBehavior, - accentForegroundHoverBehavior, - accentForegroundRestBehavior, - neutralFillActiveBehavior, - neutralFillHoverBehavior, - neutralFillRestBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralForegroundHintBehavior, - neutralForegroundActiveBehavior, - neutralForegroundHoverBehavior, - neutralForegroundRestBehavior, - forcedColorsStylesheetBehavior( - css` + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + accentForegroundActiveBehavior, + accentForegroundHoverBehavior, + accentForegroundRestBehavior, + neutralFillActiveBehavior, + neutralFillHoverBehavior, + neutralFillRestBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralForegroundHintBehavior, + neutralForegroundActiveBehavior, + neutralForegroundHoverBehavior, + neutralForegroundRestBehavior, + forcedColorsStylesheetBehavior( + css` :host { forced-color-adjust: none; border-color: transparent; @@ -152,5 +153,5 @@ export const TabStyles = css` box-shadow: none; } ` - ) -); + ) + ); diff --git a/packages/web-components/fast-components/src/tabs/index.ts b/packages/web-components/fast-components/src/tabs/index.ts index 027ad862044..a274ed7a1eb 100644 --- a/packages/web-components/fast-components/src/tabs/index.ts +++ b/packages/web-components/fast-components/src/tabs/index.ts @@ -1,22 +1,21 @@ -import { customElement } from "@microsoft/fast-element"; -import { Tabs, TabsTemplate as template } from "@microsoft/fast-foundation"; -import { TabsStyles as styles } from "./tabs.styles"; +import { Tabs, tabsTemplate as template } from "@microsoft/fast-foundation"; +import { tabsStyles as styles } from "./tabs.styles"; /** * The FAST Tabs Custom Element. Implements {@link @microsoft/fast-foundation#Tabs}, - * {@link @microsoft/fast-foundation#TabsTemplate} + * {@link @microsoft/fast-foundation#tabsTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-tabs", +export const fastTabs = Tabs.compose({ + baseName: "tabs", template, styles, -}) -export class FASTTabs extends Tabs {} +}); + export * from "../tab"; export * from "../tab-panel"; /** diff --git a/packages/web-components/fast-components/src/tabs/tabs.styles.ts b/packages/web-components/fast-components/src/tabs/tabs.styles.ts index 62b99be5c45..bacb53c1247 100644 --- a/packages/web-components/fast-components/src/tabs/tabs.styles.ts +++ b/packages/web-components/fast-components/src/tabs/tabs.styles.ts @@ -7,112 +7,113 @@ import { neutralForegroundRestBehavior, } from "../styles/index"; -export const TabsStyles = css` - ${display("grid")} :host { - box-sizing: border-box; - font-family: var(--body-font); - font-size: var(--type-ramp-base-font-size); - line-height: var(--type-ramp-base-line-height); - color: ${neutralForegroundRestBehavior.var}; - grid-template-columns: auto 1fr auto; - grid-template-rows: auto 1fr; - } +export const tabsStyles = (context, definition) => + css` + ${display("grid")} :host { + box-sizing: border-box; + font-family: var(--body-font); + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); + color: ${neutralForegroundRestBehavior.var}; + grid-template-columns: auto 1fr auto; + grid-template-rows: auto 1fr; + } - .tablist { - display: grid; - grid-template-rows: auto auto; - grid-template-columns: auto; - position: relative; - width: max-content; - align-self: end; - padding: calc(var(--design-unit) * 4px) calc(var(--design-unit) * 4px) 0; - box-sizing: border-box; - } + .tablist { + display: grid; + grid-template-rows: auto auto; + grid-template-columns: auto; + position: relative; + width: max-content; + align-self: end; + padding: calc(var(--design-unit) * 4px) calc(var(--design-unit) * 4px) 0; + box-sizing: border-box; + } - .start, - .end { - align-self: center; - } + .start, + .end { + align-self: center; + } - .activeIndicator { - grid-row: 2; - grid-column: 1; - width: 100%; - height: 5px; - justify-self: center; - background: ${accentFillRestBehavior.var}; - margin-top: 10px; - border-radius: calc(var(--corner-radius) * 1px) calc(var(--corner-radius) * 1px) 0 - 0; - } + .activeIndicator { + grid-row: 2; + grid-column: 1; + width: 100%; + height: 5px; + justify-self: center; + background: ${accentFillRestBehavior.var}; + margin-top: 10px; + border-radius: calc(var(--corner-radius) * 1px) + calc(var(--corner-radius) * 1px) 0 0; + } - .activeIndicatorTransition { - transition: transform 0.2s ease-in-out; - } + .activeIndicatorTransition { + transition: transform 0.2s ease-in-out; + } - .tabpanel { - grid-row: 2; - grid-column-start: 1; - grid-column-end: 4; - position: relative; - } + .tabpanel { + grid-row: 2; + grid-column-start: 1; + grid-column-end: 4; + position: relative; + } - :host([orientation="vertical"]) { - grid-template-rows: auto 1fr auto; - grid-template-columns: auto 1fr; - } + :host([orientation="vertical"]) { + grid-template-rows: auto 1fr auto; + grid-template-columns: auto 1fr; + } - :host([orientation="vertical"]) .tablist { - grid-row-start: 2; - grid-row-end: 2; - display: grid; - grid-template-rows: auto; - grid-template-columns: auto 1fr; - position: relative; - width: max-content; - justify-self: end; - width: 100%; - padding: calc((${heightNumber} - var(--design-unit)) * 1px) - calc(var(--design-unit) * 4px) - calc((${heightNumber} - var(--design-unit)) * 1px) 0; - } + :host([orientation="vertical"]) .tablist { + grid-row-start: 2; + grid-row-end: 2; + display: grid; + grid-template-rows: auto; + grid-template-columns: auto 1fr; + position: relative; + width: max-content; + justify-self: end; + width: 100%; + padding: calc((${heightNumber} - var(--design-unit)) * 1px) + calc(var(--design-unit) * 4px) + calc((${heightNumber} - var(--design-unit)) * 1px) 0; + } - :host([orientation="vertical"]) .tabpanel { - grid-column: 2; - grid-row-start: 1; - grid-row-end: 4; - } + :host([orientation="vertical"]) .tabpanel { + grid-column: 2; + grid-row-start: 1; + grid-row-end: 4; + } - :host([orientation="vertical"]) .end { - grid-row: 3; - } + :host([orientation="vertical"]) .end { + grid-row: 3; + } - :host([orientation="vertical"]) .activeIndicator { - grid-column: 1; - grid-row: 1; - width: 5px; - height: 100%; - margin-inline-end: 10px; - align-self: center; - background: ${accentFillRestBehavior.var}; - margin-top: 0; - border-radius: 0 calc(var(--corner-radius) * 1px) calc(var(--corner-radius) * 1px) - 0; - } + :host([orientation="vertical"]) .activeIndicator { + grid-column: 1; + grid-row: 1; + width: 5px; + height: 100%; + margin-inline-end: 10px; + align-self: center; + background: ${accentFillRestBehavior.var}; + margin-top: 0; + border-radius: 0 calc(var(--corner-radius) * 1px) + calc(var(--corner-radius) * 1px) 0; + } - :host([orientation="vertical"]) .activeIndicatorTransition { - transition: transform 0.2s linear; - } -`.withBehaviors( - accentFillRestBehavior, - neutralForegroundRestBehavior, - forcedColorsStylesheetBehavior( - css` - .activeIndicator, - :host([orientation="vertical"]) .activeIndicator { - forced-color-adjust: none; - background: ${SystemColors.Highlight}; - } - ` - ) -); + :host([orientation="vertical"]) .activeIndicatorTransition { + transition: transform 0.2s linear; + } + `.withBehaviors( + accentFillRestBehavior, + neutralForegroundRestBehavior, + forcedColorsStylesheetBehavior( + css` + .activeIndicator, + :host([orientation="vertical"]) .activeIndicator { + forced-color-adjust: none; + background: ${SystemColors.Highlight}; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/text-area/index.ts b/packages/web-components/fast-components/src/text-area/index.ts index d85ef1b26aa..1fce5d0e3a3 100644 --- a/packages/web-components/fast-components/src/text-area/index.ts +++ b/packages/web-components/fast-components/src/text-area/index.ts @@ -1,6 +1,9 @@ -import { attr, customElement } from "@microsoft/fast-element"; -import { TextAreaTemplate as template, TextArea } from "@microsoft/fast-foundation"; -import { TextAreaStyles as styles } from "./text-area.styles"; +import { attr } from "@microsoft/fast-element"; +import { + TextArea as FoundationTextArea, + textAreaTemplate as template, +} from "@microsoft/fast-foundation"; +import { textAreaStyles as styles } from "./text-area.styles"; /** * Text area appearances @@ -9,25 +12,9 @@ import { TextAreaStyles as styles } from "./text-area.styles"; export type TextAreaAppearance = "filled" | "outline"; /** - * The FAST Text Area Custom Element. Implements {@link @microsoft/fast-foundation#TextArea}, - * {@link @microsoft/fast-foundation#TextAreaTemplate} - * - * - * @public - * @remarks - * HTML Element: \ - * - * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + * @internal */ -@customElement({ - name: "fast-text-area", - template, - styles, - shadowOptions: { - delegatesFocus: true, - }, -}) -export class FASTTextArea extends TextArea { +export class TextArea extends FoundationTextArea { /** * The appearance of the element. * @@ -50,6 +37,26 @@ export class FASTTextArea extends TextArea { } } +/** + * The FAST Text Area Custom Element. Implements {@link @microsoft/fast-foundation#TextArea}, + * {@link @microsoft/fast-foundation#textAreaTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + */ +export const fastTextArea = TextArea.compose({ + baseName: "text-area", + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); + /** * Styles for TextArea * @public diff --git a/packages/web-components/fast-components/src/text-area/text-area.styles.ts b/packages/web-components/fast-components/src/text-area/text-area.styles.ts index f7ded40dc9e..cf825aa3372 100644 --- a/packages/web-components/fast-components/src/text-area/text-area.styles.ts +++ b/packages/web-components/fast-components/src/text-area/text-area.styles.ts @@ -20,7 +20,8 @@ import { neutralOutlineRestBehavior, } from "../styles/index"; -export const TextAreaStyles = css` +export const textAreaStyles = (context, definition) => + css` ${display("inline-block")} :host { font-family: var(--body-font); outline: none; @@ -112,22 +113,22 @@ export const TextAreaStyles = css` border-color: ${neutralOutlineRestBehavior.var}; } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - neutralFillHoverBehavior, - neutralFillInputActiveBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFillRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` - :host([disabled]) { - opacity: 1; - } - ` - ) -); + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + neutralFillHoverBehavior, + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host([disabled]) { + opacity: 1; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/text-field/index.ts b/packages/web-components/fast-components/src/text-field/index.ts index cb3bbab3249..83ad0a14674 100644 --- a/packages/web-components/fast-components/src/text-field/index.ts +++ b/packages/web-components/fast-components/src/text-field/index.ts @@ -1,6 +1,9 @@ -import { attr, customElement } from "@microsoft/fast-element"; -import { TextFieldTemplate as template, TextField } from "@microsoft/fast-foundation"; -import { TextFieldStyles as styles } from "./text-field.styles"; +import { attr } from "@microsoft/fast-element"; +import { + TextField as FoundationTextField, + textFieldTemplate as template, +} from "@microsoft/fast-foundation"; +import { textFieldStyles as styles } from "./text-field.styles"; /** * Text field appearances @@ -9,25 +12,9 @@ import { TextFieldStyles as styles } from "./text-field.styles"; export type TextFieldAppearance = "filled" | "outline"; /** - * The FAST Text Field Custom Element. Implements {@link @microsoft/fast-foundation#TextField}, - * {@link @microsoft/fast-foundation#TextFieldTemplate} - * - * - * @public - * @remarks - * HTML Element: \ - * - * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + * @internal */ -@customElement({ - name: "fast-text-field", - template, - styles, - shadowOptions: { - delegatesFocus: true, - }, -}) -export class FASTTextField extends TextField { +export class TextField extends FoundationTextField { /** * The appearance of the element. * @@ -50,6 +37,26 @@ export class FASTTextField extends TextField { } } +/** + * The FAST Text Field Custom Element. Implements {@link @microsoft/fast-foundation#TextField}, + * {@link @microsoft/fast-foundation#textFieldTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus} + */ +export const fastTextField = TextField.compose({ + baseName: "text-field", + template, + styles, + shadowOptions: { + delegatesFocus: true, + }, +}); + /** * Styles for TextField * @public diff --git a/packages/web-components/fast-components/src/text-field/text-field.styles.ts b/packages/web-components/fast-components/src/text-field/text-field.styles.ts index 1e046834047..f42db831d84 100644 --- a/packages/web-components/fast-components/src/text-field/text-field.styles.ts +++ b/packages/web-components/fast-components/src/text-field/text-field.styles.ts @@ -20,7 +20,8 @@ import { neutralOutlineRestBehavior, } from "../styles/index"; -export const TextFieldStyles = css` +export const textFieldStyles = (context, definition) => + css` ${display("inline-block")} :host { font-family: var(--body-font); outline: none; @@ -136,46 +137,46 @@ export const TextFieldStyles = css` border-color: ${neutralOutlineRestBehavior.var}; } `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - neutralFillHoverBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFillRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` - .root, - :host([appearance="filled"]) .root { - forced-color-adjust: none; - background: ${SystemColors.Field}; - border-color: ${SystemColors.FieldText}; - } - :host(:hover:not([disabled])) .root, - :host([appearance="filled"]:hover:not([disabled])) .root, - :host([appearance="filled"]:hover) .root { - background: ${SystemColors.Field}; - border-color: ${SystemColors.Highlight}; - } - .start, - .end { - fill: currentcolor; - } - :host([disabled]) { - opacity: 1; - } - :host([disabled]) .root, - :host([appearance="filled"]:hover[disabled]) .root { - border-color: ${SystemColors.GrayText}; - background: ${SystemColors.Field}; - } - :host(:focus-within:enabled) .root { - border-color: ${SystemColors.Highlight}; - box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset; - } - ` - ) -); + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + neutralFillHoverBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + .root, + :host([appearance="filled"]) .root { + forced-color-adjust: none; + background: ${SystemColors.Field}; + border-color: ${SystemColors.FieldText}; + } + :host(:hover:not([disabled])) .root, + :host([appearance="filled"]:hover:not([disabled])) .root, + :host([appearance="filled"]:hover) .root { + background: ${SystemColors.Field}; + border-color: ${SystemColors.Highlight}; + } + .start, + .end { + fill: currentcolor; + } + :host([disabled]) { + opacity: 1; + } + :host([disabled]) .root, + :host([appearance="filled"]:hover[disabled]) .root { + border-color: ${SystemColors.GrayText}; + background: ${SystemColors.Field}; + } + :host(:focus-within:enabled) .root { + border-color: ${SystemColors.Highlight}; + box-shadow: 0 0 0 1px ${SystemColors.Highlight} inset; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/tooltip/index.ts b/packages/web-components/fast-components/src/tooltip/index.ts index 033ea0fc671..5d69622aa5e 100644 --- a/packages/web-components/fast-components/src/tooltip/index.ts +++ b/packages/web-components/fast-components/src/tooltip/index.ts @@ -1,23 +1,17 @@ -import { customElement } from "@microsoft/fast-element"; -import { createTooltipTemplate, Tooltip } from "@microsoft/fast-foundation"; -import { TooltipStyles as styles } from "./tooltip.styles"; -import { FASTAnchoredRegion } from "../anchored-region"; - -// prevent tree shaking -FASTAnchoredRegion; +import { tooltipTemplate as template, Tooltip } from "@microsoft/fast-foundation"; +import { tooltipStyles as styles } from "./tooltip.styles"; /** * The FAST Tooltip Custom Element. Implements {@link @microsoft/fast-foundation#Tooltip}, - * {@link @microsoft/fast-foundation#createTooltipTemplate} + * {@link @microsoft/fast-foundation#tooltipTemplate} * * * @public * @remarks * HTML Element: \ */ -@customElement({ - name: "fast-tooltip", - template: createTooltipTemplate("fast"), +export const fastTooltip = Tooltip.compose({ + baseName: "tooltip", + template, styles, -}) -export class FASTTooltip extends Tooltip {} +}); diff --git a/packages/web-components/fast-components/src/tooltip/tooltip.stories.ts b/packages/web-components/fast-components/src/tooltip/tooltip.stories.ts index 505708babc9..c1b6f31a39a 100644 --- a/packages/web-components/fast-components/src/tooltip/tooltip.stories.ts +++ b/packages/web-components/fast-components/src/tooltip/tooltip.stories.ts @@ -1,7 +1,7 @@ import { STORY_RENDERED } from "@storybook/core-events"; import addons from "@storybook/addons"; +import type { Tooltip as FoundationTooltip } from "@microsoft/fast-foundation"; import TooltipTemplate from "./fixtures/base.html"; -import type { FASTTooltip } from "./index"; import "../button"; import "./index"; @@ -9,7 +9,7 @@ function onShowClick(): void { for (let i = 1; i <= 4; i++) { const tooltipInstance = document.getElementById( `tooltip-show-${i}` - ) as FASTTooltip; + ) as FoundationTooltip; tooltipInstance.visible = !tooltipInstance.visible; } } @@ -21,7 +21,7 @@ function onAnchorMouseEnter(e: MouseEvent): void { const tooltipInstance = document.getElementById( "tooltip-anchor-switch" - ) as FASTTooltip; + ) as FoundationTooltip; tooltipInstance.anchorElement = e.target as HTMLElement; } diff --git a/packages/web-components/fast-components/src/tooltip/tooltip.styles.ts b/packages/web-components/fast-components/src/tooltip/tooltip.styles.ts index b9e357bea9c..8dcb1732ffc 100644 --- a/packages/web-components/fast-components/src/tooltip/tooltip.styles.ts +++ b/packages/web-components/fast-components/src/tooltip/tooltip.styles.ts @@ -14,78 +14,79 @@ import { neutralOutlineRestBehavior, } from "../styles/index"; -export const TooltipStyles = css` - :host { - contain: layout; - overflow: visible; - height: 0; - width: 0; - } +export const tooltipStyles = (context, definition) => + css` + :host { + contain: layout; + overflow: visible; + height: 0; + width: 0; + } - .tooltip { - box-sizing: border-box; - border-radius: calc(var(--corner-radius) * 1px); - border: calc(var(--outline-width) * 1px) solid ${neutralFocusBehavior.var}; - box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset; - background: ${neutralFillRestBehavior.var}; - color: ${neutralForegroundRestBehavior.var}; - padding: 4px; - height: fit-content; - width: fit-content; - font-family: var(--body-font); - font-size: var(--type-ramp-base-font-size); - line-height: var(--type-ramp-base-line-height); - white-space: nowrap; - ${/* TODO: a mechanism to manage z-index across components + .tooltip { + box-sizing: border-box; + border-radius: calc(var(--corner-radius) * 1px); + border: calc(var(--outline-width) * 1px) solid ${neutralFocusBehavior.var}; + box-shadow: 0 0 0 1px ${neutralFocusBehavior.var} inset; + background: ${neutralFillRestBehavior.var}; + color: ${neutralForegroundRestBehavior.var}; + padding: 4px; + height: fit-content; + width: fit-content; + font-family: var(--body-font); + font-size: var(--type-ramp-base-font-size); + line-height: var(--type-ramp-base-line-height); + white-space: nowrap; + ${/* TODO: a mechanism to manage z-index across components https://github.com/microsoft/fast/issues/3813 */ ""} - z-index: 10000; - } + z-index: 10000; + } - fast-anchored-region { - display: flex; - justify-content: center; - align-items: center; - overflow: visible; - flex-direction: row; - } + fast-anchored-region { + display: flex; + justify-content: center; + align-items: center; + overflow: visible; + flex-direction: row; + } - fast-anchored-region.right, - fast-anchored-region.left { - flex-direction: column; - } + fast-anchored-region.right, + fast-anchored-region.left { + flex-direction: column; + } - fast-anchored-region.top .tooltip { - margin-bottom: 4px; - } + fast-anchored-region.top .tooltip { + margin-bottom: 4px; + } - fast-anchored-region.bottom .tooltip { - margin-top: 4px; - } + fast-anchored-region.bottom .tooltip { + margin-top: 4px; + } - fast-anchored-region.left .tooltip { - margin-right: 4px; - } + fast-anchored-region.left .tooltip { + margin-right: 4px; + } - fast-anchored-region.right .tooltip { - margin-left: 4px; - } -`.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - neutralFillHoverBehavior, - neutralFillInputActiveBehavior, - neutralFillInputHoverBehavior, - neutralFillInputRestBehavior, - neutralFillRestBehavior, - neutralFocusBehavior, - neutralForegroundRestBehavior, - neutralOutlineRestBehavior, - forcedColorsStylesheetBehavior( - css` - :host([disabled]) { - opacity: 1; - } - ` - ) -); + fast-anchored-region.right .tooltip { + margin-left: 4px; + } + `.withBehaviors( + accentFillActiveBehavior, + accentFillHoverBehavior, + accentFillRestBehavior, + neutralFillHoverBehavior, + neutralFillInputActiveBehavior, + neutralFillInputHoverBehavior, + neutralFillInputRestBehavior, + neutralFillRestBehavior, + neutralFocusBehavior, + neutralForegroundRestBehavior, + neutralOutlineRestBehavior, + forcedColorsStylesheetBehavior( + css` + :host([disabled]) { + opacity: 1; + } + ` + ) + ); diff --git a/packages/web-components/fast-components/src/tree-item/index.ts b/packages/web-components/fast-components/src/tree-item/index.ts index e8c066afd18..e2a1ee44e36 100644 --- a/packages/web-components/fast-components/src/tree-item/index.ts +++ b/packages/web-components/fast-components/src/tree-item/index.ts @@ -1,10 +1,9 @@ -import { customElement } from "@microsoft/fast-element"; -import { TreeItemTemplate as template, TreeItem } from "@microsoft/fast-foundation"; -import { TreeItemStyles as styles } from "./tree-item.styles"; +import { treeItemTemplate as template, TreeItem } from "@microsoft/fast-foundation"; +import { treeItemStyles as styles } from "./tree-item.styles"; /** * The FAST tree item Custom Element. Implements, {@link @microsoft/fast-foundation#TreeItem} - * {@link @microsoft/fast-foundation#TreeItemTemplate} + * {@link @microsoft/fast-foundation#treeItemTemplate} * * * @public @@ -12,12 +11,11 @@ import { TreeItemStyles as styles } from "./tree-item.styles"; * HTML Element: \ * */ -@customElement({ - name: "fast-tree-item", +export const fastTreeItem = TreeItem.compose({ + baseName: "tree-item", template, styles, -}) -export class FASTTreeItem extends TreeItem {} +}); /** * Styles for TreeItem diff --git a/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts b/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts index 6284b2c5eba..7e982059d6b 100644 --- a/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts +++ b/packages/web-components/fast-components/src/tree-item/tree-item.styles.ts @@ -68,7 +68,8 @@ const selectedExpandCollapseHoverBehavior = cssCustomPropertyBehaviorFactory( FASTDesignSystemProvider.findProvider ); -export const TreeItemStyles = css` +export const treeItemStyles = (context, definition) => + css` ${display("block")} :host { contain: content; position: relative; @@ -243,20 +244,20 @@ export const TreeItemStyles = css` --expand-collapse-button-nested-width: calc(${heightNumber} * -1px); } `.withBehaviors( - accentForegroundRestBehavior, - neutralFillStealthSelectedBehavior, - neutralFillStealthActiveBehavior, - expandCollapseHoverBehavior, - neutralFillStealthHoverBehavior, - selectedExpandCollapseHoverBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundActiveBehavior, - neutralForegroundRestBehavior, - new DirectionalStyleSheetBehavior(ltr, rtl), - forcedColorsStylesheetBehavior( - css` + accentForegroundRestBehavior, + neutralFillStealthSelectedBehavior, + neutralFillStealthActiveBehavior, + expandCollapseHoverBehavior, + neutralFillStealthHoverBehavior, + selectedExpandCollapseHoverBehavior, + neutralFillStealthRestBehavior, + neutralFocusBehavior, + neutralFocusInnerAccentBehavior, + neutralForegroundActiveBehavior, + neutralForegroundRestBehavior, + new DirectionalStyleSheetBehavior(ltr, rtl), + forcedColorsStylesheetBehavior( + css` :host { forced-color-adjust: none; border-color: transparent; @@ -318,5 +319,5 @@ export const TreeItemStyles = css` fill: ${SystemColors.FieldText}; } ` - ) -); + ) + ); diff --git a/packages/web-components/fast-components/src/tree-view/index.ts b/packages/web-components/fast-components/src/tree-view/index.ts index be698694c52..a6cdfd86349 100644 --- a/packages/web-components/fast-components/src/tree-view/index.ts +++ b/packages/web-components/fast-components/src/tree-view/index.ts @@ -1,10 +1,9 @@ -import { customElement } from "@microsoft/fast-element"; -import { TreeViewTemplate as template, TreeView } from "@microsoft/fast-foundation"; -import { TreeViewStyles as styles } from "./tree-view.styles"; +import { treeViewTemplate as template, TreeView } from "@microsoft/fast-foundation"; +import { treeViewStyles as styles } from "./tree-view.styles"; /** * The FAST tree view Custom Element. Implements, {@link @microsoft/fast-foundation#TreeView} - * {@link @microsoft/fast-foundation#TreeViewTemplate} + * {@link @microsoft/fast-foundation#treeViewTemplate} * * * @public @@ -12,12 +11,11 @@ import { TreeViewStyles as styles } from "./tree-view.styles"; * HTML Element: \ * */ -@customElement({ - name: "fast-tree-view", +export const fastTreeView = TreeView.compose({ + baseName: "tree-view", template, styles, -}) -export class FASTTreeView extends TreeView {} +}); /** * Styles for TreeView diff --git a/packages/web-components/fast-components/src/tree-view/tree-view.styles.ts b/packages/web-components/fast-components/src/tree-view/tree-view.styles.ts index 660d1a504a7..ea89e2f9463 100644 --- a/packages/web-components/fast-components/src/tree-view/tree-view.styles.ts +++ b/packages/web-components/fast-components/src/tree-view/tree-view.styles.ts @@ -1,7 +1,7 @@ import { css } from "@microsoft/fast-element"; import { display } from "@microsoft/fast-foundation"; -export const TreeViewStyles = css` +export const treeViewStyles = (context, definition) => css` :host([hidden]) { display: none; } diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index af00714c8b1..235d1210a53 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -18,8 +18,10 @@ import { Orientation } from '@microsoft/fast-web-utilities'; import { PartialFASTElementDefinition } from '@microsoft/fast-element'; import { ViewTemplate } from '@microsoft/fast-element'; +// Warning: (ae-incompatible-release-tags) The symbol "Accordion" is marked as @public, but its signature references "FoundationElement" which is marked as @alpha +// // @public -export class Accordion extends FASTElement { +export class Accordion extends FoundationElement { // @internal (undocumented) accordionItems: HTMLElement[]; // @internal (undocumented) @@ -34,10 +36,11 @@ export enum AccordionExpandMode { } // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag +// Warning: (ae-incompatible-release-tags) The symbol "AccordionItem" is marked as @public, but its signature references "FoundationElement" which is marked as @alpha // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "AccordionItem" because one of its declarations is marked as @internal // // @public -export class AccordionItem extends FASTElement { +export class AccordionItem extends FoundationElement { // @internal (undocumented) clickHandler: (e: MouseEvent) => void; // @internal (undocumented) @@ -52,19 +55,20 @@ export interface AccordionItem extends StartEnd { } // @public -export const AccordionItemTemplate: ViewTemplate; +export const accordionItemTemplate: (context: any, definition: any) => ViewTemplate; // @public -export const AccordionTemplate: ViewTemplate; +export const accordionTemplate: (context: any, definition: any) => ViewTemplate; // @alpha (undocumented) export const all: (key: any, searchAncestors?: boolean | undefined) => ReturnType; // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag +// Warning: (ae-incompatible-release-tags) The symbol "Anchor" is marked as @public, but its signature references "FoundationElement" which is marked as @alpha // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Anchor" because one of its declarations is marked as @internal // // @public -export class Anchor extends FASTElement { +export class Anchor extends FoundationElement { control: HTMLAnchorElement; // @internal defaultSlottedContent: HTMLElement[]; @@ -82,8 +86,10 @@ export class Anchor extends FASTElement { export interface Anchor extends StartEnd, DelegatesARIALink { } +// Warning: (ae-incompatible-release-tags) The symbol "AnchoredRegion" is marked as @beta, but its signature references "FoundationElement" which is marked as @alpha +// // @beta -export class AnchoredRegion extends FASTElement { +export class AnchoredRegion extends FoundationElement { // @internal (undocumented) adoptedCallback(): void; anchor: string; @@ -118,10 +124,10 @@ export class AnchoredRegion extends FASTElement { } // @beta -export const AnchoredRegionTemplate: ViewTemplate; +export const anchoredRegionTemplate: (context: any, definition: any) => ViewTemplate; // @public -export const AnchorTemplate: ViewTemplate; +export const anchorTemplate: (context: any, definition: any) => ViewTemplate; // @public export function applyMixins(derivedCtor: any, ...baseCtors: any[]): void; @@ -158,8 +164,10 @@ export type AxisPositioningMode = "uncontrolled" | "locktodefault" | "dynamic"; // @beta export type AxisScalingMode = "anchor" | "fill" | "content"; +// Warning: (ae-incompatible-release-tags) The symbol "Badge" is marked as @public, but its signature references "FoundationElement" which is marked as @alpha +// // @public -export class Badge extends FASTElement { +export class Badge extends FoundationElement { circular: boolean; color: string; fill: string; @@ -168,18 +176,22 @@ export class Badge extends FASTElement { } // @public -export const BadgeTemplate: ViewTemplate; +export const badgeTemplate: (context: any, definition: any) => ViewTemplate; +// Warning: (ae-incompatible-release-tags) The symbol "BaseProgress" is marked as @public, but its signature references "FoundationElement" which is marked as @alpha +// // @public -export class BaseProgress extends FASTElement { +export class BaseProgress extends FoundationElement { max: number; min: number; paused: any; value: number | null; } +// Warning: (ae-incompatible-release-tags) The symbol "Breadcrumb" is marked as @public, but its signature references "FoundationElement" which is marked as @alpha +// // @public -export class Breadcrumb extends FASTElement { +export class Breadcrumb extends FoundationElement { // @internal (undocumented) slottedBreadcrumbItems: HTMLElement[]; // (undocumented) @@ -200,10 +212,10 @@ export interface BreadcrumbItem extends StartEnd, DelegatesARIALink { } // @public -export const BreadcrumbItemTemplate: ViewTemplate; +export const breadcrumbItemTemplate: (context: any, definition: any) => ViewTemplate; // @public -export const BreadcrumbTemplate: ViewTemplate; +export const breadcrumbTemplate: (context: any, definition: any) => ViewTemplate; // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag // Warning: (ae-forgotten-export) The symbol "FormAssociatedButton" needs to be exported by the entry point index.d.ts @@ -233,7 +245,7 @@ export interface Button extends StartEnd, DelegatesARIAButton { } // @public -export const ButtonTemplate: ViewTemplate