@fluentui/web-components 2.1.3 → 2.2.0

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Wed, 15 Dec 2021 07:28:31 GMT",
+      "date": "Fri, 07 Jan 2022 07:25:58 GMT",
+      "tag": "@fluentui/web-components_v2.2.0",
+      "version": "2.2.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "jes@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "ebe29c6b802a65fd6a568d511e067ec4a272f817",
+            "comment": "feat: add search web component"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 15 Dec 2021 07:31:29 GMT",
       "tag": "@fluentui/web-components_v2.1.3",
       "version": "2.1.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Wed, 15 Dec 2021 07:28:31 GMT and should not be manually modified.
+This log was last generated on Fri, 07 Jan 2022 07:25:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [2.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.2.0)
+
+Fri, 07 Jan 2022 07:25:58 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.1.3..@fluentui/web-components_v2.2.0)
+
+### Minor changes
+
+- feat: add search web component ([PR #21177](https://github.com/microsoft/fluentui/pull/21177) by jes@microsoft.com)
+
 ## [2.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.1.3)
 
-Wed, 15 Dec 2021 07:28:31 GMT 
+Wed, 15 Dec 2021 07:31:29 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.1.2..@fluentui/web-components_v2.1.3)
 
 ### Patches

package/dist/dts/component-definitions.d.ts

@@ -26,6 +26,7 @@ import fluentProgressRingDefinition from "./progress/progress-ring/progress-ring
 import fluentProgressDefinition from "./progress/progress/progress.vscode.definition.json";
 import fluentRadioDefinition from "./radio/radio.vscode.definition.json";
 import fluentRadioGroupDefinition from "./radio-group/radio-group.vscode.definition.json";
+import fluentSearchDefinition from "./search/search.vscode.definition.json";
 import fluentSelectDefinition from "./select/select.vscode.definition.json";
 import fluentSkeletonDefinition from "./skeleton/skeleton.vscode.definition.json";
 import fluentSliderDefinition from "./slider/slider.vscode.definition.json";
@@ -39,4 +40,4 @@ import fluentTextFieldDefinition from "./text-field/text-field.vscode.definition
 import fluentTooltipDefinition from "./tooltip/tooltip.vscode.definition.json";
 import fluentTreeItemDefinition from "./tree-item/tree-item.vscode.definition.json";
 import fluentTreeViewDefinition from "./tree-view/tree-view.vscode.definition.json";
-export { fluentAccordionItemDefinition, fluentAccordionDefinition, fluentAnchorDefinition, fluentAnchoredRegionDefinition, fluentBadgeDefinition, fluentBreadcrumbDefinition, fluentBreadcrumbItemDefinition, fluentButtonDefinition, fluentCardDefinition, fluentCheckboxDefinition, fluentComboboxDefinition, fluentDataGridDefinition, fluentDataGridCellDefinition, fluentDataGridRowDefinition, fluentDesignSystemProviderDefinition, fluentDialogDefinition, fluentDividerDefinition, fluentFlipperDefinition, fluentHorizontalScrollDefinition, fluentListboxDefinition, fluentListboxOptionDefinition, fluentMenuDefinition, fluentMenuItemDefinition, fluentNumberFieldDefinition, fluentProgressRingDefinition, fluentProgressDefinition, fluentRadioDefinition, fluentRadioGroupDefinition, fluentSelectDefinition, fluentSkeletonDefinition, fluentSliderDefinition, fluentSliderLabelDefinition, fluentSwitchDefinition, fluentTabPanelDefinition, fluentTabDefinition, fluentTabsDefinition, fluentTextAreaDefinition, fluentTextFieldDefinition, fluentTooltipDefinition, fluentTreeItemDefinition, fluentTreeViewDefinition };
+export { fluentAccordionItemDefinition, fluentAccordionDefinition, fluentAnchorDefinition, fluentAnchoredRegionDefinition, fluentBadgeDefinition, fluentBreadcrumbDefinition, fluentBreadcrumbItemDefinition, fluentButtonDefinition, fluentCardDefinition, fluentCheckboxDefinition, fluentComboboxDefinition, fluentDataGridDefinition, fluentDataGridCellDefinition, fluentDataGridRowDefinition, fluentDesignSystemProviderDefinition, fluentDialogDefinition, fluentDividerDefinition, fluentFlipperDefinition, fluentHorizontalScrollDefinition, fluentListboxDefinition, fluentListboxOptionDefinition, fluentMenuDefinition, fluentMenuItemDefinition, fluentNumberFieldDefinition, fluentProgressRingDefinition, fluentProgressDefinition, fluentRadioDefinition, fluentRadioGroupDefinition, fluentSearchDefinition, fluentSelectDefinition, fluentSkeletonDefinition, fluentSliderDefinition, fluentSliderLabelDefinition, fluentSwitchDefinition, fluentTabPanelDefinition, fluentTabDefinition, fluentTabsDefinition, fluentTextAreaDefinition, fluentTextFieldDefinition, fluentTooltipDefinition, fluentTreeItemDefinition, fluentTreeViewDefinition };

package/dist/dts/custom-elements.d.ts

@@ -27,6 +27,7 @@ import { fluentNumberField } from './number-field/index';
 import { fluentProgress, fluentProgressRing } from './progress/index';
 import { fluentRadio } from './radio/index';
 import { fluentRadioGroup } from './radio-group/index';
+import { fluentSearch } from './search/index';
 import { fluentSelect } from './select/index';
 import { fluentSkeleton } from './skeleton/index';
 import { fluentSlider } from './slider/index';
@@ -39,7 +40,7 @@ import { fluentToolbar } from './toolbar/index';
 import { fluentTooltip } from './tooltip/index';
 import { fluentTreeView } from './tree-view/index';
 import { fluentTreeItem } from './tree-item/index';
-export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCalendar, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
+export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCalendar, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSearch, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
 /**
  * All Fluent UI Web Components
  * @public
@@ -73,7 +74,7 @@ export declare const allComponents: {
     fluentDivider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Divider>;
     fluentFlipper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FlipperOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FlipperOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentHorizontalScroll: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").HorizontalScrollOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").HorizontalScrollOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-    fluentListbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Listbox>;
+    fluentListbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./listbox/index").Listbox>;
     fluentOption: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").ListboxOption>;
     fluentMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./menu/index").Menu>;
     fluentMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").MenuItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").MenuItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -82,6 +83,7 @@ export declare const allComponents: {
     fluentProgressRing: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").ProgressRingOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").ProgressRingOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentRadio: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").RadioOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").RadioOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentRadioGroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").RadioGroup>;
+    fluentSearch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").SearchOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").SearchOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").SelectOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").SelectOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     fluentSkeleton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Skeleton>;
     fluentSlider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").SliderOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").SliderOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/dist/dts/index.d.ts

@@ -27,6 +27,7 @@ export * from './number-field/';
 export * from './progress/';
 export * from './radio/';
 export * from './radio-group/';
+export * from './search/';
 export * from './select';
 export * from './skeleton/';
 export * from './slider/';

package/dist/dts/listbox/index.d.ts

@@ -1,4 +1,6 @@
-import { Listbox } from '@microsoft/fast-foundation';
+import { Listbox as FoundationListboxElement } from '@microsoft/fast-foundation';
+export declare class Listbox extends FoundationListboxElement {
+}
 /**
  * The Fluent listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox}
  * {@link @microsoft/fast-foundation#listboxTemplate}
@@ -15,8 +17,3 @@ export declare const fluentListbox: (overrideDefinition?: import("@microsoft/fas
  * @public
  */
 export declare const listboxStyles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").FoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles;
-/**
- * Listbox base class
- * @public
- */
-export { Listbox };

package/dist/dts/listbox/listbox.stories.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("@microsoft/fast-foundation").Listbox>;
+    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./index").Listbox>;
 };
 export default _default;
 export declare const Listbox: any;

package/dist/dts/search/index.d.ts

@@ -0,0 +1,38 @@
+import { Search as FoundationSearch, SearchOptions } from '@microsoft/fast-foundation';
+/**
+ * Search appearances
+ * @public
+ */
+export declare type SearchAppearance = 'filled' | 'outline';
+/**
+ * The Fluent search class
+ * @internal
+ */
+export declare class Search extends FoundationSearch {
+    /**
+     * The appearance of the element.
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: SearchAppearance;
+}
+/**
+ * The Fluent Search Custom Element. Implements {@link @microsoft/fast-foundation#Search},
+ * {@link @microsoft/fast-foundation#searchTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-search\>
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
+ */
+export declare const fluentSearch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<SearchOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<SearchOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export * from './search.template';
+/**
+ * Styles for Search
+ * @public
+ */
+export declare const searchStyles: (context: any, definition: any) => import("@microsoft/fast-element").ElementStyles;

package/dist/dts/search/search.stories.d.ts

@@ -0,0 +1,75 @@
+declare const _default: {
+    title: string;
+    component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").SearchOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").SearchOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+    argTypes: {
+        appearance: {
+            options: string[];
+            defaultValue: string;
+            control: {
+                type: string;
+            };
+        };
+        autoFocus: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        list: {
+            control: {
+                type: string;
+            };
+        };
+        maxlength: {
+            control: {
+                type: string;
+            };
+        };
+        name: {
+            control: {
+                type: string;
+            };
+        };
+        minlength: {
+            control: {
+                type: string;
+            };
+        };
+        pattern: {
+            description: string;
+            control: {
+                type: string;
+            };
+        };
+        placeholder: {
+            description: string;
+            defaultValue: string;
+            control: {
+                type: string;
+            };
+        };
+        readonly: {
+            control: {
+                type: string;
+            };
+        };
+        required: {
+            control: {
+                type: string;
+            };
+        };
+        spellcheck: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Search: any;

package/dist/dts/search/search.styles.d.ts

@@ -0,0 +1,4 @@
+import { ElementStyles } from '@microsoft/fast-element';
+import { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const searchFilledStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles;
+export declare const searchStyles: (context: any, definition: any) => ElementStyles;

package/dist/dts/search/search.template.d.ts

@@ -0,0 +1,6 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import { ElementDefinitionContext, Search, SearchOptions } from '@microsoft/fast-foundation';
+/**
+ * @public
+ */
+export declare const searchTemplate: (context: ElementDefinitionContext, definition: SearchOptions) => ViewTemplate<Search>;

package/dist/esm/component-definitions.js

@@ -54,6 +54,8 @@ import fluentRadioDefinition from './radio/radio.vscode.definition.json';
 export { fluentRadioDefinition };
 import fluentRadioGroupDefinition from './radio-group/radio-group.vscode.definition.json';
 export { fluentRadioGroupDefinition };
+import fluentSearchDefinition from './search/search.vscode.definition.json';
+export { fluentSearchDefinition };
 import fluentSelectDefinition from './select/select.vscode.definition.json';
 export { fluentSelectDefinition };
 import fluentSkeletonDefinition from './skeleton/skeleton.vscode.definition.json';

package/dist/esm/custom-elements.js

@@ -23,6 +23,7 @@ import { fluentNumberField } from './number-field/index';
 import { fluentProgress, fluentProgressRing } from './progress/index';
 import { fluentRadio } from './radio/index';
 import { fluentRadioGroup } from './radio-group/index';
+import { fluentSearch } from './search/index';
 import { fluentSelect } from './select/index';
 import { fluentSkeleton } from './skeleton/index';
 import { fluentSlider } from './slider/index';
@@ -35,7 +36,7 @@ import { fluentToolbar } from './toolbar/index';
 import { fluentTooltip } from './tooltip/index';
 import { fluentTreeView } from './tree-view/index';
 import { fluentTreeItem } from './tree-item/index';
-export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCalendar, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
+export { fluentAccordion, fluentAccordionItem, fluentAnchor, fluentAnchoredRegion, fluentBadge, fluentBreadcrumb, fluentBreadcrumbItem, fluentButton, fluentCard, fluentCalendar, fluentCheckbox, fluentCombobox, fluentDataGrid, fluentDataGridCell, fluentDataGridRow, fluentDesignSystemProvider, fluentDialog, fluentDivider, fluentFlipper, fluentHorizontalScroll, fluentListbox, fluentOption, fluentMenu, fluentMenuItem, fluentNumberField, fluentProgress, fluentProgressRing, fluentRadio, fluentRadioGroup, fluentSearch, fluentSelect, fluentSkeleton, fluentSlider, fluentSliderLabel, fluentSwitch, fluentTabs, fluentTab, fluentTabPanel, fluentTextArea, fluentTextField, fluentToolbar, fluentTooltip, fluentTreeView, fluentTreeItem, };
 /**
  * All Fluent UI Web Components
  * @public
@@ -70,6 +71,7 @@ export const allComponents = {
     fluentProgressRing,
     fluentRadio,
     fluentRadioGroup,
+    fluentSearch,
     fluentSelect,
     fluentSkeleton,
     fluentSlider,

package/dist/esm/index.js

@@ -27,6 +27,7 @@ export * from './number-field/';
 export * from './progress/';
 export * from './radio/';
 export * from './radio-group/';
+export * from './search/';
 export * from './select';
 export * from './skeleton/';
 export * from './slider/';

package/dist/esm/listbox/index.js

@@ -1,5 +1,7 @@
-import { Listbox, listboxTemplate as template } from '@microsoft/fast-foundation';
+import { Listbox as FoundationListboxElement, listboxTemplate as template } from '@microsoft/fast-foundation';
 import { listboxStyles as styles } from './listbox.styles';
+export class Listbox extends FoundationListboxElement {
+}
 /**
  * The Fluent listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox}
  * {@link @microsoft/fast-foundation#listboxTemplate}
@@ -20,8 +22,3 @@ export const fluentListbox = Listbox.compose({
  * @public
  */
 export const listboxStyles = styles;
-/**
- * Listbox base class
- * @public
- */
-export { Listbox };

package/dist/esm/search/index.js

@@ -0,0 +1,52 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { Search as FoundationSearch } from '@microsoft/fast-foundation';
+import { searchTemplate as template } from './search.template';
+import { searchStyles as styles } from './search.styles';
+/**
+ * The Fluent search class
+ * @internal
+ */
+export class Search extends FoundationSearch {
+    constructor() {
+        super(...arguments);
+        /**
+         * The appearance of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: appearance
+         */
+        this.appearance = 'outline';
+    }
+}
+__decorate([
+    attr
+], Search.prototype, "appearance", void 0);
+/**
+ * The Fluent Search Custom Element. Implements {@link @microsoft/fast-foundation#Search},
+ * {@link @microsoft/fast-foundation#searchTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-search\>
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
+ */
+export const fluentSearch = Search.compose({
+    baseName: 'search',
+    baseClass: FoundationSearch,
+    template,
+    styles,
+    start: `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg%22%3E"><path d="M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"/></svg>`,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+});
+export * from './search.template';
+/**
+ * Styles for Search
+ * @public
+ */
+export const searchStyles = styles;

package/dist/esm/search/search.stories.js

@@ -0,0 +1,83 @@
+import { fluentSearch } from './index';
+export default {
+    title: 'Components/Search',
+    component: fluentSearch,
+    argTypes: {
+        appearance: {
+            options: ['filled', 'outline'],
+            defaultValue: 'outline',
+            control: { type: 'radio' },
+        },
+        autoFocus: {
+            description: 'Automatically focuses the control',
+            control: { type: 'boolean' },
+        },
+        disabled: {
+            description: 'The search box should be submitted with the form but should not be editable',
+            control: { type: 'boolean' },
+        },
+        list: {
+            control: { type: 'text' },
+        },
+        maxlength: {
+            control: { type: 'number' },
+        },
+        name: {
+            control: { type: 'text' },
+        },
+        minlength: {
+            control: { type: 'number' },
+        },
+        pattern: {
+            description: `A regular expression the input's contents must match in order to be valid`,
+            control: { type: 'text' },
+        },
+        placeholder: {
+            description: 'An exemplar value to display in the input field whenever it is empty',
+            defaultValue: 'Placeholder',
+            control: { type: 'text' },
+        },
+        readonly: {
+            control: { type: 'boolean' },
+        },
+        required: {
+            control: { type: 'boolean' },
+        },
+        spellcheck: {
+            control: { type: 'boolean' },
+        },
+    },
+};
+const SearchTemplate = ({ appearance, autoFocus, disabled, list, maxlength, name, minlength, pattern, placeholder, readonly, required, size, spellcheck, }) => `<fluent-search
+    ${appearance ? `appearance="${appearance}"` : ''}
+    ${autoFocus ? 'autofocus' : ''}
+    ${disabled ? 'disabled' : ''}
+    ${list ? `list="${list}"` : ''}
+    ${maxlength ? `maxlength="${maxlength}"` : ''}
+    ${name ? `name="${name}"` : ''}
+    ${minlength ? `minlength="${minlength}"` : ''}
+    ${pattern ? `pattern="${pattern}"` : ''}
+    ${placeholder ? `placeholder="${placeholder}"` : ''}
+    ${readonly ? 'readonly' : ''}
+    ${required ? 'required' : ''}
+    ${spellcheck ? `spellcheck="${spellcheck}"` : ''}
+    ${size ? `size="${size}"` : ''}
+  ></fluent-search>`;
+export const Search = SearchTemplate.bind({});
+Search.args = {
+    placeholder: 'placeholder',
+    autoFocus: false,
+    disabled: false,
+    readonly: false,
+    required: false,
+};
+const example = `
+<fluent-search appearance="outline"></fluent-search>
+`;
+Search.parameters = {
+    docs: {
+        source: {
+            code: example,
+        },
+    },
+};

package/dist/esm/search/search.styles.js

@@ -0,0 +1,108 @@
+import { css } from '@microsoft/fast-element';
+import { Button, DesignToken, display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
+import { heightNumber, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles';
+import { appearanceBehavior } from '../utilities/behaviors';
+import { bodyFont, controlCornerRadius, density, designUnit, neutralFillInputRecipe, neutralFillStealthRecipe, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
+const clearButtonHover = DesignToken.create("clear-button-hover").withDefault((target) => {
+    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
+    const inputRecipe = neutralFillInputRecipe.getValueFor(target);
+    return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).hover;
+});
+const clearButtonActive = DesignToken.create("clear-button-active").withDefault((target) => {
+    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
+    const inputRecipe = neutralFillInputRecipe.getValueFor(target);
+    return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).active;
+});
+export const searchFilledStyles = (context, definition) => css `
+    ${inputFilledStyles(context, definition, '.root')}
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        ${inputFilledForcedColorStyles(context, definition, '.root')}
+      `));
+export const searchStyles = (context, definition) => css `
+    ${display('inline-block')}
+    ${inputStyles(context, definition, '.root')}
+    ${inputStateStyles(context, definition, '.root')}
+    .root {
+      display: flex;
+      flex-direction: row;
+    }
+    .control {
+      -webkit-appearance: none;
+      color: inherit;
+      background: transparent;
+      border: 0;
+      height: calc(100% - 4px);
+      margin-top: auto;
+      margin-bottom: auto;
+      padding: 0 calc(${designUnit} * 2px + 1px);
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+    .clear-button {
+      display: inline-flex;
+      align-items: center;
+      margin: 1px;
+      height: calc(100% - 2px);
+      opacity: 0;
+      background: transparent;
+      color: ${neutralForegroundRest};
+      fill: currentcolor;
+      border: none;
+      border-radius: calc(${controlCornerRadius} * 1px);
+      min-width: calc(${heightNumber} * 1px);
+      font-size: ${typeRampBaseFontSize};
+      line-height: ${typeRampBaseLineHeight};
+      outline: none;
+      font-family: ${bodyFont};
+      padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);
+    }
+    .clear-button:hover {
+      background: ${clearButtonHover};
+    }
+    .clear-button:active {
+      background: ${clearButtonActive};
+    }
+    :host(:hover:not([disabled], [readOnly])) .clear-button,
+    :host(:active:not([disabled], [readOnly])) .clear-button,
+    :host(:focus-within:not([disabled], [readOnly])) .clear-button {
+        opacity: 1;
+    }
+    :host(:hover:not([disabled], [readOnly])) .clear-button__hidden,
+    :host(:active:not([disabled], [readOnly])) .clear-button__hidden,
+    :host(:focus-within:not([disabled], [readOnly])) .clear-button__hidden {
+        opacity: 0;
+    }
+    .control::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+    }
+    .input-wrapper {
+      display: flex;
+      position: relative;
+      width: 100%;
+    }
+    .start,
+    .end {
+      display: flex;
+      margin: 1px;
+      align-items: center;
+    }
+    .start {
+      display: flex;
+      margin-inline-start: 11px;
+    }
+    ::slotted([slot="end"]) {
+      height: 100%
+    }
+    .clear-button__hidden {
+      opacity: 0;
+    }
+    .end {
+        margin-inline-end: 11px;
+    }
+    ::slotted(${context.tagFor(Button)}) {
+      margin-inline-end: 1px;
+    }
+  `.withBehaviors(appearanceBehavior('filled', searchFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
+        ${inputForcedColorStyles(context, definition, '.root')}
+      `));