@genesislcap/foundation-zero 14.65.2 → 14.66.0-select-search-poc.1

package/dist/custom-elements.json

@@ -12,7 +12,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{\n  zeroAccordion,\n  zeroAccordionItem,\n  zeroActionsMenu,\n  zeroAnchor,\n  zeroAnchoredRegion,\n  zeroAvatar,\n  zeroBadge,\n  zeroBanner,\n  zeroBreadcrumbItem,\n  zeroBreadcrumb,\n  zeroButton,\n  zeroCalendar,\n  zeroCard,\n  zeroCheckbox,\n  zeroCombobox,\n  zeroConnectionIndicator,\n  zeroDataGrid,\n  zeroDesignSystemProvider,\n  zeroDialog,\n  zeroDatePicker,\n  zeroDisclosure,\n  zeroDivider,\n  zeroDropdownMenu,\n  zeroErrorBoundary,\n  zeroNotificationListener,\n  zeroErrorBanner,\n  zeroErrorDialog,\n  zeroFileUpload,\n  zeroFilter,\n  zeroFilterBar,\n  zeroFlexLayout,\n  zeroFlipper,\n  zeroFlyout,\n  zeroGridLayout,\n  zeroGridLayoutItem,\n  zeroHorizontalScroll,\n  zeroIcon,\n  zeroListbox,\n  zeroListboxOption,\n  zeroMenu,\n  zeroMenuItem,\n  zeroModal,\n  zeroMultiselect,\n  zeroNumberField,\n  zeroProgress,\n  zeroProgressRing,\n  zeroRadio,\n  zeroRadioGroup,\n  zeroSegmentedControl,\n  zeroSegmentedItem,\n  zeroSelect,\n  zeroSkeleton,\n  zeroSlider,\n  zeroSliderLabel,\n  zeroSnackbar,\n  zeroSwitch,\n  zeroTab,\n  zeroTabPanel,\n  zeroTabs,\n  zeroTextArea,\n  zeroTextField,\n  zeroToast,\n  zeroToolbar,\n  zeroTooltip,\n  zeroTreeItem,\n  zeroTreeView,\n  zeroUrlInput,\n  register(container?: Container, ...rest: any[]) {\n    if (!container) {\n      // preserve backward compatibility with code that loops through\n      // the values of this object and calls them as funcs with no args\n      return;\n    }\n\n    for (const key in this) {\n      if (key === 'register') {\n        continue;\n      }\n\n      this[key]().register(container, ...rest);\n    }\n  },\n}"
+          "default": "{\n  zeroAccordion,\n  zeroAccordionItem,\n  zeroActionsMenu,\n  zeroAnchor,\n  zeroAnchoredRegion,\n  zeroAvatar,\n  zeroBadge,\n  zeroBanner,\n  zeroBreadcrumbItem,\n  zeroBreadcrumb,\n  zeroButton,\n  zeroCalendar,\n  zeroCard,\n  zeroCheckbox,\n  zeroCombobox,\n  zeroConnectionIndicator,\n  zeroDataGrid,\n  zeroDesignSystemProvider,\n  zeroDialog,\n  zeroDatePicker,\n  zeroDisclosure,\n  zeroDivider,\n  zeroDropdownMenu,\n  zeroErrorBoundary,\n  zeroNotificationListener,\n  zeroErrorBanner,\n  zeroErrorDialog,\n  zeroFileUpload,\n  zeroFilter,\n  zeroFilterBar,\n  zeroFlexLayout,\n  zeroFlipper,\n  zeroFlyout,\n  zeroGridLayout,\n  zeroGridLayoutItem,\n  zeroHorizontalScroll,\n  zeroIcon,\n  zeroListbox,\n  zeroListboxOption,\n  zeroMenu,\n  zeroMenuItem,\n  zeroModal,\n  zeroMultiselect,\n  zeroNumberField,\n  zeroProgress,\n  zeroProgressRing,\n  zeroRadio,\n  zeroRadioGroup,\n  zeroSegmentedControl,\n  zeroSegmentedItem,\n  zeroSelect,\n  zeroSelectSearch,\n  zeroSkeleton,\n  zeroSlider,\n  zeroSliderLabel,\n  zeroSnackbar,\n  zeroSwitch,\n  zeroTab,\n  zeroTabPanel,\n  zeroTabs,\n  zeroTextArea,\n  zeroTextField,\n  zeroToast,\n  zeroToolbar,\n  zeroTooltip,\n  zeroTreeItem,\n  zeroTreeView,\n  zeroUrlInput,\n  register(container?: Container, ...rest: any[]) {\n    if (!container) {\n      // preserve backward compatibility with code that loops through\n      // the values of this object and calls them as funcs with no args\n      return;\n    }\n\n    for (const key in this) {\n      if (key === 'register') {\n        continue;\n      }\n\n      this[key]().register(container, ...rest);\n    }\n  },\n}"
         }
       ],
       "exports": [
@@ -9552,6 +9552,184 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/select-search/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./select-search"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./select-search.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./select-search.template"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/select-search/select-search.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "type": {
+            "text": "Meta"
+          },
+          "default": "{\n  title: 'Select Search',\n  component: 'zero-select-search',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "Primary",
+          "type": {
+            "text": "StoryObj"
+          },
+          "default": "{\n  render: ({ name, text, countries, search }) => html`\n    <div style=\"min-height: 400px;\">\n      <zero-select-search name=\"${name}\" .options=\"${countries}\" search=\"${search}\">\n        ${text}\n      </zero-select-search>\n    </div>\n  `,\n  args: {\n    name: 'Countries',\n    text: 'Select Search',\n    search: true,\n    countries: [\n      'Afghanistan',\n      'Aland Islands',\n      'Albania',\n      'Algeria',\n      'American Samoa',\n      'Andorra',\n      'Angola',\n      'Anguilla',\n      'Antarctica',\n      'Antigua and Barbuda',\n      'Argentina',\n      'Armenia',\n      'Aruba',\n      'Australia',\n      'Austria',\n      'Azerbaijan',\n      'Bahamas',\n      'Bahrain',\n      'Bangladesh',\n      'Barbados',\n      'Belarus',\n      'Belgium',\n      'Belize',\n      'Benin',\n      'Bermuda',\n      'Bhutan',\n      'Bolivia',\n      'Bonaire, Sint Eustatius and Saba',\n      'Bosnia and Herzegovina',\n      'Botswana',\n      'Bouvet Island',\n      'Brazil',\n      'British Indian Ocean Territory',\n      'Brunei Darussalam',\n      'Bulgaria',\n      'Burkina Faso',\n      'Burundi',\n      'Cambodia',\n      'Cameroon',\n      'Canada',\n      'Cape Verde',\n      'Cayman Islands',\n      'Central African Republic',\n      'Chad',\n    ],\n  },\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "src/select-search/select-search.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Primary",
+          "declaration": {
+            "name": "Primary",
+            "module": "src/select-search/select-search.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/select-search/select-search.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "selectSearchStyles",
+          "default": "css`\n  ${foundationMultiselectStyles}\n\n  :host {\n    --primary-gradient-angle: -113.5deg;\n  }\n\n  #display-field {\n    background: ${defaultRapidBGColor};\n  }\n\n  #display-field:focus {\n    outline: none;\n    background:\n      linear-gradient(\n          var(--primary-gradient-angle),\n          ${PrimaryRapidColorHEX.blue} 0%,\n          ${PrimaryRapidColorHEX.purple} 100%\n        )\n        top/100% 1px,\n      linear-gradient(\n          var(--primary-gradient-angle),\n          ${PrimaryRapidColorHEX.blue} 0%,\n          ${PrimaryRapidColorHEX.purple} 100%\n        )\n        bottom/100% 1px;\n    background-origin: border-box;\n    background-repeat: no-repeat;\n    border: 1px solid transparent;\n    border-right-color: ${PrimaryRapidColorHEX.blue};\n    border-left-color: ${PrimaryRapidColorHEX.purple};\n  }\n\n  ::slotted(zero-checkbox),\n  zero-checkbox {\n    border-bottom: 1px solid rgb(46 48 52);\n    padding: 5px 0 5px 5px;\n    margin: 0;\n  }\n\n  ::slotted(zero-checkbox:hover),\n  zero-checkbox:hover {\n    background-color: rgb(45 47 51);\n    cursor: pointer;\n  }\n\n  ::slotted(zero-checkbox)::part(label),\n  zero-checkbox::part(label) {\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .label {\n    color: ${defaultRapidLabelColor};\n  }\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "selectSearchStyles",
+          "declaration": {
+            "name": "selectSearchStyles",
+            "module": "src/select-search/select-search.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/select-search/select-search.template.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "selectSearchTemplate",
+          "default": "html<SelectSearch>`\n  ${getPrefixedSelectSearch('zero')}\n`"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "selectSearchTemplate",
+          "declaration": {
+            "name": "selectSearchTemplate",
+            "module": "src/select-search/select-search.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/select-search/select-search.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SelectSearch",
+          "superclass": {
+            "name": "FoundationSelectSearch",
+            "package": "@genesislcap/foundation-ui"
+          },
+          "tagName": "%%prefix%%-select-search",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "defaultSelectSearchConfig",
+          "default": "foundationSelectSearchConfig"
+        },
+        {
+          "kind": "variable",
+          "name": "zeroSelectSearchShadowOptions",
+          "default": "foundationMultiselectShadowOptions"
+        },
+        {
+          "kind": "variable",
+          "name": "zeroSelectSearch"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SelectSearch",
+          "declaration": {
+            "name": "SelectSearch",
+            "module": "src/select-search/select-search.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultSelectSearchConfig",
+          "declaration": {
+            "name": "defaultSelectSearchConfig",
+            "module": "src/select-search/select-search.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zeroSelectSearchShadowOptions",
+          "declaration": {
+            "name": "zeroSelectSearchShadowOptions",
+            "module": "src/select-search/select-search.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "zeroSelectSearch",
+          "declaration": {
+            "name": "zeroSelectSearch",
+            "module": "src/select-search/select-search.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/skeleton/index.ts",

package/dist/dts/base-components.d.ts

@@ -199,6 +199,17 @@ export declare const baseComponents: {
     zeroSegmentedControl: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./segmented-control").SegmentedControl>;
     zeroSegmentedItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").RadioOptions>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").RadioOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
     zeroSelect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./select").Select>;
+    zeroSelectSearch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+        baseName: string;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./select-search").SelectSearch, any>;
+        styles: import("@microsoft/fast-element").ElementStyles;
+        shadowOptions: ShadowRootInit;
+    }>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+        baseName: string;
+        template: import("@microsoft/fast-element").ViewTemplate<import("./select-search").SelectSearch, any>;
+        styles: import("@microsoft/fast-element").ElementStyles;
+        shadowOptions: ShadowRootInit;
+    }, typeof import("./select-search").SelectSearch>;
     zeroSkeleton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./skeleton").Skeleton>;
     zeroSlider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./slider").Slider>;
     zeroSliderLabel: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition>) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./slider-label").SliderLabel>;

package/dist/dts/base-components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAqE5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAoEJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}
+{"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAsE5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAqEJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}

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

@@ -0,0 +1,4 @@
+export * from './select-search';
+export * from './select-search.styles';
+export * from './select-search.template';
+//# sourceMappingURL=index.d.ts.map

package/dist/dts/select-search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/select-search/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC"}

package/dist/dts/select-search/select-search.d.ts

@@ -0,0 +1,20 @@
+import { SelectSearch as FoundationSelectSearch } from '@genesislcap/foundation-ui';
+/**
+ * @tagname %%prefix%%-select-search
+ */
+export declare class SelectSearch extends FoundationSelectSearch {
+}
+export declare const defaultSelectSearchConfig: {};
+export declare const zeroSelectSearchShadowOptions: ShadowRootInit;
+export declare const zeroSelectSearch: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+    baseName: string;
+    template: import("@microsoft/fast-element").ViewTemplate<SelectSearch, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
+    shadowOptions: ShadowRootInit;
+}>) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+    baseName: string;
+    template: import("@microsoft/fast-element").ViewTemplate<SelectSearch, any>;
+    styles: import("@microsoft/fast-element").ElementStyles;
+    shadowOptions: ShadowRootInit;
+}, typeof SelectSearch>;
+//# sourceMappingURL=select-search.d.ts.map

package/dist/dts/select-search/select-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-search.d.ts","sourceRoot":"","sources":["../../../src/select-search/select-search.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,IAAI,sBAAsB,EAGvC,MAAM,4BAA4B,CAAC;AAIpC;;GAEG;AACH,qBAAa,YAAa,SAAQ,sBAAsB;CAAG;AAE3D,eAAO,MAAM,yBAAyB,IAA+B,CAAC;AAEtE,eAAO,MAAM,6BAA6B,gBAAqC,CAAC;AAEhF,eAAO,MAAM,gBAAgB;;;;;;;;;;uBAM3B,CAAC"}

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Primary: StoryObj;
+//# sourceMappingURL=select-search.stories.d.ts.map

package/dist/dts/select-search/select-search.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-search.stories.d.ts","sourceRoot":"","sources":["../../../src/select-search/select-search.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QA2DrB,CAAC"}

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

@@ -0,0 +1,2 @@
+export declare const selectSearchStyles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=select-search.styles.d.ts.map

package/dist/dts/select-search/select-search.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-search.styles.d.ts","sourceRoot":"","sources":["../../../src/select-search/select-search.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB,iDAwD9B,CAAC"}

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

@@ -0,0 +1,3 @@
+import { SelectSearch } from './select-search';
+export declare const selectSearchTemplate: import("@microsoft/fast-element").ViewTemplate<SelectSearch, any>;
+//# sourceMappingURL=select-search.template.d.ts.map

package/dist/dts/select-search/select-search.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-search.template.d.ts","sourceRoot":"","sources":["../../../src/select-search/select-search.template.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,eAAO,MAAM,oBAAoB,mEAEhC,CAAC"}

package/dist/esm/base-components.js

@@ -50,6 +50,7 @@ import { zeroRadioGroup } from './radio-group';
 import { zeroSegmentedControl } from './segmented-control';
 import { zeroSegmentedItem } from './segmented-item';
 import { zeroSelect } from './select';
+import { zeroSelectSearch } from './select-search';
 import { zeroSkeleton } from './skeleton';
 import { zeroSlider } from './slider';
 import { zeroSliderLabel } from './slider-label';
@@ -118,6 +119,7 @@ export const baseComponents = {
     zeroSegmentedControl,
     zeroSegmentedItem,
     zeroSelect,
+    zeroSelectSearch,
     zeroSkeleton,
     zeroSlider,
     zeroSliderLabel,

package/dist/esm/select-search/index.js

@@ -0,0 +1,3 @@
+export * from './select-search';
+export * from './select-search.styles';
+export * from './select-search.template';

package/dist/esm/select-search/select-search.js

@@ -0,0 +1,12 @@
+import { SelectSearch as FoundationSelectSearch, defaultSelectSearchConfig as foundationSelectSearchConfig, foundationMultiselectShadowOptions, } from '@genesislcap/foundation-ui';
+import { selectSearchStyles as styles } from './select-search.styles';
+import { selectSearchTemplate as template } from './select-search.template';
+/**
+ * @tagname %%prefix%%-select-search
+ */
+export class SelectSearch extends FoundationSelectSearch {
+}
+export const defaultSelectSearchConfig = foundationSelectSearchConfig;
+export const zeroSelectSearchShadowOptions = foundationMultiselectShadowOptions;
+export const zeroSelectSearch = SelectSearch.compose(Object.assign({ baseName: 'select-search', template,
+    styles, shadowOptions: zeroSelectSearchShadowOptions }, defaultSelectSearchConfig));

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

@@ -0,0 +1,66 @@
+import { html } from 'lit-html';
+const meta = {
+    title: 'Select Search',
+    component: 'zero-select-search',
+};
+export default meta;
+export const Primary = {
+    render: ({ name, text, countries, search }) => html `
+    <div style="min-height: 400px;">
+      <zero-select-search name="${name}" .options="${countries}" search="${search}">
+        ${text}
+      </zero-select-search>
+    </div>
+  `,
+    args: {
+        name: 'Countries',
+        text: 'Select Search',
+        search: true,
+        countries: [
+            'Afghanistan',
+            'Aland Islands',
+            'Albania',
+            'Algeria',
+            'American Samoa',
+            'Andorra',
+            'Angola',
+            'Anguilla',
+            'Antarctica',
+            'Antigua and Barbuda',
+            'Argentina',
+            'Armenia',
+            'Aruba',
+            'Australia',
+            'Austria',
+            'Azerbaijan',
+            'Bahamas',
+            'Bahrain',
+            'Bangladesh',
+            'Barbados',
+            'Belarus',
+            'Belgium',
+            'Belize',
+            'Benin',
+            'Bermuda',
+            'Bhutan',
+            'Bolivia',
+            'Bonaire, Sint Eustatius and Saba',
+            'Bosnia and Herzegovina',
+            'Botswana',
+            'Bouvet Island',
+            'Brazil',
+            'British Indian Ocean Territory',
+            'Brunei Darussalam',
+            'Bulgaria',
+            'Burkina Faso',
+            'Burundi',
+            'Cambodia',
+            'Cameroon',
+            'Canada',
+            'Cape Verde',
+            'Cayman Islands',
+            'Central African Republic',
+            'Chad',
+        ],
+    },
+};

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

@@ -0,0 +1,61 @@
+import { multiselectStyles as foundationMultiselectStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+import { defaultRapidBGColor, defaultRapidLabelColor } from '../_common';
+import { PrimaryRapidColorHEX } from '../_common';
+export const selectSearchStyles = css `
+  ${foundationMultiselectStyles}
+
+  :host {
+    --primary-gradient-angle: -113.5deg;
+  }
+
+  #display-field {
+    background: ${defaultRapidBGColor};
+  }
+
+  #display-field:focus {
+    outline: none;
+    background:
+      linear-gradient(
+          var(--primary-gradient-angle),
+          ${PrimaryRapidColorHEX.blue} 0%,
+          ${PrimaryRapidColorHEX.purple} 100%
+        )
+        top/100% 1px,
+      linear-gradient(
+          var(--primary-gradient-angle),
+          ${PrimaryRapidColorHEX.blue} 0%,
+          ${PrimaryRapidColorHEX.purple} 100%
+        )
+        bottom/100% 1px;
+    background-origin: border-box;
+    background-repeat: no-repeat;
+    border: 1px solid transparent;
+    border-right-color: ${PrimaryRapidColorHEX.blue};
+    border-left-color: ${PrimaryRapidColorHEX.purple};
+  }
+
+  ::slotted(zero-checkbox),
+  zero-checkbox {
+    border-bottom: 1px solid rgb(46 48 52);
+    padding: 5px 0 5px 5px;
+    margin: 0;
+  }
+
+  ::slotted(zero-checkbox:hover),
+  zero-checkbox:hover {
+    background-color: rgb(45 47 51);
+    cursor: pointer;
+  }
+
+  ::slotted(zero-checkbox)::part(label),
+  zero-checkbox::part(label) {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .label {
+    color: ${defaultRapidLabelColor};
+  }
+`;

package/dist/esm/select-search/select-search.template.js

@@ -0,0 +1,5 @@
+import { getPrefixedSelectSearch } from '@genesislcap/foundation-ui';
+import { html } from '@microsoft/fast-element';
+export const selectSearchTemplate = html `
+  ${getPrefixedSelectSearch('zero')}
+`;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-zero",
   "description": "Genesis Foundation Zero Design System",
-  "version": "14.65.2",
+  "version": "14.66.0-select-search-poc.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -62,7 +62,7 @@
     "storybook": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@genesislcap/genx": "14.65.2",
+    "@genesislcap/genx": "14.66.0-select-search-poc.1",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-links": "^7.1.0",
     "@storybook/addons": "^7.1.0",
@@ -75,9 +75,9 @@
     "storybook": "^7.1.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.65.2",
-    "@genesislcap/foundation-ui": "14.65.2",
-    "@genesislcap/foundation-utils": "14.65.2",
+    "@genesislcap/foundation-comms": "14.66.0-select-search-poc.1",
+    "@genesislcap/foundation-ui": "14.66.0-select-search-poc.1",
+    "@genesislcap/foundation-utils": "14.66.0-select-search-poc.1",
     "@microsoft/fast-colors": "^5.1.4",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
@@ -94,5 +94,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "81839d85755a99ca03bc641c4c61e7546cee2194"
+  "gitHead": "635f27fccd9aa5f638135861b1b7c07faada70a9"
 }