@genesislcap/foundation-ui 14.192.0-accessibility.2 → 14.192.1

package/dist/custom-elements.json

@@ -862,6 +862,188 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "foundationAccordionStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "foundationAccordionStyles",
+          "declaration": {
+            "name": "foundationAccordionStyles",
+            "module": "src/accordion/accordion.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.template.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "foundationAccordionTemplate",
+          "return": {
+            "type": {
+              "text": "ViewTemplate<Accordion>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "context",
+              "type": {
+                "text": "ElementDefinitionContext"
+              }
+            },
+            {
+              "name": "definition",
+              "type": {
+                "text": "FoundationElementDefinition"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "foundationAccordionTemplate",
+          "declaration": {
+            "name": "foundationAccordionTemplate",
+            "module": "src/accordion/accordion.template.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Accordion",
+          "superclass": {
+            "name": "FASTAccordion",
+            "package": "@microsoft/fast-foundation"
+          },
+          "tagName": "%%prefix%%-accordion",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "foundationAccordionShadowOptions",
+          "type": {
+            "text": "ShadowRootInit"
+          },
+          "default": "{\n  delegatesFocus: true,\n  mode: 'open',\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultAccordionConfig",
+          "type": {
+            "text": "object"
+          },
+          "default": "{}"
+        },
+        {
+          "kind": "variable",
+          "name": "foundationAccordion",
+          "description": "The Foundation Accordion",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Accordion",
+          "declaration": {
+            "name": "Accordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "foundationAccordionShadowOptions",
+          "declaration": {
+            "name": "foundationAccordionShadowOptions",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultAccordionConfig",
+          "declaration": {
+            "name": "defaultAccordionConfig",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "foundationAccordion",
+          "declaration": {
+            "name": "foundationAccordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion.template"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion.styles"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./accordion"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/_config/index.ts",
@@ -2366,188 +2548,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "foundationAccordionStyles",
-          "return": {
-            "type": {
-              "text": "ElementStyles"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "foundationAccordionStyles",
-          "declaration": {
-            "name": "foundationAccordionStyles",
-            "module": "src/accordion/accordion.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.template.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "foundationAccordionTemplate",
-          "return": {
-            "type": {
-              "text": "ViewTemplate<Accordion>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "context",
-              "type": {
-                "text": "ElementDefinitionContext"
-              }
-            },
-            {
-              "name": "definition",
-              "type": {
-                "text": "FoundationElementDefinition"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "foundationAccordionTemplate",
-          "declaration": {
-            "name": "foundationAccordionTemplate",
-            "module": "src/accordion/accordion.template.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/accordion.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Accordion",
-          "superclass": {
-            "name": "FASTAccordion",
-            "package": "@microsoft/fast-foundation"
-          },
-          "tagName": "%%prefix%%-accordion",
-          "customElement": true
-        },
-        {
-          "kind": "variable",
-          "name": "foundationAccordionShadowOptions",
-          "type": {
-            "text": "ShadowRootInit"
-          },
-          "default": "{\n  delegatesFocus: true,\n  mode: 'open',\n}"
-        },
-        {
-          "kind": "variable",
-          "name": "defaultAccordionConfig",
-          "type": {
-            "text": "object"
-          },
-          "default": "{}"
-        },
-        {
-          "kind": "variable",
-          "name": "foundationAccordion",
-          "description": "The Foundation Accordion",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Accordion",
-          "declaration": {
-            "name": "Accordion",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "foundationAccordionShadowOptions",
-          "declaration": {
-            "name": "foundationAccordionShadowOptions",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "defaultAccordionConfig",
-          "declaration": {
-            "name": "defaultAccordionConfig",
-            "module": "src/accordion/accordion.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "foundationAccordion",
-          "declaration": {
-            "name": "foundationAccordion",
-            "module": "src/accordion/accordion.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/accordion/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion.template"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion.styles"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./accordion"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/anchored-region/anchor-region.template.ts",
@@ -23749,7 +23749,7 @@
         {
           "kind": "variable",
           "name": "multiselectStyles",
-          "default": "css`\n  .root {\n    position: relative;\n    width: inherit;\n    min-width: 250px;\n  }\n\n  .control {\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border-radius: calc(var(--control-corner-radius) * 1px);\n  }\n\n  #display-field {\n    width: 100%;\n    cursor: pointer;\n    color: rgb(241 241 241);\n    min-height: 40px;\n    padding: 0 calc(var(--design-unit) * 2.25px);\n    border-width: 0;\n    background-color: var(--neutral-fill-input-rest);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n  }\n\n  #display-field[disabled] {\n    cursor: not-allowed;\n    opacity: 30%;\n  }\n\n  #display-field:focus {\n    outline: 1px solid var(--accent-fill-rest);\n    background: var(--neutral-fill-input-rest);\n    border-style: none;\n    box-shadow: none;\n  }\n\n  #display-field:hover:not(:focus):not([disabled]) {\n    outline: 1px solid rgb(231 232 232);\n  }\n\n  button {\n    pointer-events: none;\n  }\n\n  .indicator {\n    position: absolute;\n    left: calc(100% - 26px);\n    padding: 0;\n    cursor: pointer;\n  }\n\n  #arrow-icon {\n    width: 16px;\n    fill: white;\n    transform: rotate(0deg);\n    transition: transform 0.2s linear 0s;\n  }\n\n  #arrow-icon.flipped {\n    transform: rotate(180deg);\n  }\n\n  .disabled-svg {\n    pointer-events: none;\n    opacity: 30%;\n  }\n\n  .options {\n    display: flex;\n    flex-direction: column;\n    position: absolute;\n    height: max-content;\n    overflow-y: hidden;\n    margin-top: 5px;\n    border: calc(var(--stroke-width) * 1px) solid var(--neutral-layer-2);\n    border-radius: 4px;\n    background: var(--neutral-fill-input-rest);\n    width: 100%;\n    max-height: 0;\n    visibility: hidden;\n    transition:\n      max-height 0.4s ease 0s,\n      visibility 0.4s ease 0s;\n    z-index: 999;\n  }\n\n  .position-above {\n    bottom: 100%;\n  }\n\n  .checkbox-container {\n    display: flex;\n    flex-direction: column;\n    overflow-y: scroll;\n    scrollbar-width: thin;\n    scrollbar-color: var(--neutral-layer-2) var(--neutral-layer-4);\n    list-style: none;\n  }\n\n  .checkbox-container zero-checkbox {\n    min-width: fit-content;\n  }\n\n  .checkbox-container zero-checkbox[disabled],\n  .checkbox-container foundation-checkbox[disabled] {\n    cursor: not-allowed;\n  }\n\n  ::-webkit-scrollbar {\n    width: 12px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background: var(--neutral-layer-4);\n  }\n\n  ::-webkit-scrollbar-thumb {\n    width: 8px;\n    border-radius: 10px;\n    box-shadow: inset 0 0 6px rgba(0 0 0 / 30%);\n    background-color: var(--neutral-layer-2);\n    border: 3px solid var(--neutral-layer-4);\n  }\n\n  .visible {\n    visibility: visible;\n    max-height: ${maxheight.toString()}px;\n  }\n\n  ::slotted(foundation-checkbox),\n  foundation-checkbox {\n    border-bottom: 1px solid var(--neutral-layer-4);\n    padding: 5px 0 5px 5px;\n    margin: 0;\n  }\n\n  ::slotted(foundation-checkbox:hover),\n  foundation-checkbox:hover {\n    background-color: var(--neutral-layer-3);\n    cursor: pointer;\n  }\n\n  ::slotted(foundation-checkbox)::part(label),\n  foundation-checkbox::part(label) {\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .label {\n    display: block;\n    cursor: pointer;\n    font-size: var(--type-ramp-base-font-size);\n    line-height: var(--type-ramp-base-line-height);\n    font-style: normal;\n    margin: calc(var(--design-unit) * 2px) 0;\n  }\n\n  .label-hidden {\n    display: none;\n  }\n\n  ol,\n  li {\n    margin: 0;\n    padding: 0;\n  }\n\n  .checkbox {\n    width: 100%;\n  }\n\n  .select-all {\n    width: 100%;\n  }\n\n  .display-value {\n    position: absolute;\n    right: 40px;\n    line-height: var(--type-ramp-base-line-height);\n    color: var(--neutral-foreground-rest);\n    font-size: var(--type-ramp-base-font-size);\n    line-height: var(--type-ramp-base-line-height);\n    font-family: var(--body-font);\n  }\n`"
+          "default": "css`\n  .root {\n    position: relative;\n    width: inherit;\n    min-width: 250px;\n  }\n\n  .control {\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    border-radius: calc(var(--control-corner-radius) * 1px);\n  }\n\n  #display-field {\n    width: 100%;\n    cursor: pointer;\n    color: rgb(241 241 241);\n    min-height: 40px;\n    padding: 0 calc(var(--design-unit) * 2.25px);\n    border-width: 0;\n    background: var(--neutral-fill-input-rest);\n    border-radius: calc(var(--control-corner-radius) * 1px);\n  }\n\n  #display-field[disabled] {\n    cursor: not-allowed;\n    opacity: 30%;\n  }\n\n  #display-field:focus {\n    outline: 1px solid var(--accent-fill-rest);\n    background: var(--neutral-fill-input-rest);\n    border-style: none;\n    box-shadow: none;\n  }\n\n  #display-field:hover:not(:focus):not([disabled]) {\n    outline: 1px solid rgb(231 232 232);\n  }\n\n  button {\n    pointer-events: none;\n  }\n\n  .indicator {\n    position: absolute;\n    left: calc(100% - 26px);\n    padding: 0;\n    cursor: pointer;\n  }\n\n  #arrow-icon {\n    width: 16px;\n    fill: white;\n    transform: rotate(0deg);\n    transition: transform 0.2s linear 0s;\n  }\n\n  #arrow-icon.flipped {\n    transform: rotate(180deg);\n  }\n\n  .disabled-svg {\n    pointer-events: none;\n    opacity: 30%;\n  }\n\n  .options {\n    display: flex;\n    flex-direction: column;\n    position: absolute;\n    height: max-content;\n    overflow-y: hidden;\n    margin-top: 5px;\n    border: calc(var(--stroke-width) * 1px) solid var(--neutral-layer-2);\n    border-radius: 4px;\n    background: var(--neutral-fill-input-rest);\n    width: 100%;\n    max-height: 0;\n    visibility: hidden;\n    transition:\n      max-height 0.4s ease 0s,\n      visibility 0.4s ease 0s;\n    z-index: 999;\n  }\n\n  .position-above {\n    bottom: 100%;\n  }\n\n  .checkbox-container {\n    display: flex;\n    flex-direction: column;\n    overflow-y: scroll;\n    scrollbar-width: thin;\n    scrollbar-color: var(--neutral-layer-2) var(--neutral-layer-4);\n  }\n\n  .checkbox-container zero-checkbox {\n    min-width: fit-content;\n  }\n\n  .checkbox-container zero-checkbox[disabled],\n  .checkbox-container foundation-checkbox[disabled] {\n    cursor: not-allowed;\n  }\n\n  #filter-search {\n    padding: 5px;\n  }\n\n  ::-webkit-scrollbar {\n    width: 12px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background: var(--neutral-layer-4);\n  }\n\n  ::-webkit-scrollbar-thumb {\n    width: 8px;\n    border-radius: 10px;\n    box-shadow: inset 0 0 6px rgba(0 0 0 / 30%);\n    background-color: var(--neutral-layer-2);\n    border: 3px solid var(--neutral-layer-4);\n  }\n\n  .visible {\n    visibility: visible;\n    max-height: ${maxheight.toString()}px;\n  }\n\n  ::slotted(foundation-checkbox),\n  foundation-checkbox {\n    border-bottom: 1px solid var(--neutral-layer-4);\n    padding: 5px 0 5px 5px;\n    margin: 0;\n  }\n\n  ::slotted(foundation-checkbox:hover),\n  foundation-checkbox:hover {\n    background-color: var(--neutral-layer-3);\n    cursor: pointer;\n  }\n\n  ::slotted(foundation-checkbox)::part(label),\n  foundation-checkbox::part(label) {\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .label {\n    display: block;\n    cursor: pointer;\n    font-size: var(--type-ramp-base-font-size);\n    line-height: var(--type-ramp-base-line-height);\n    font-style: normal;\n    margin: calc(var(--design-unit) * 2px) 0;\n  }\n\n  .label-hidden {\n    display: none;\n  }\n`"
         }
       ],
       "exports": [
@@ -24132,6 +24132,11 @@
               "name": "getPlaceholder",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "isAllSelected",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "isAllOptionsDisabled",
@@ -24171,24 +24176,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "checkboxKeyDown",
-              "parameters": [
-                {
-                  "name": "normalizedOption",
-                  "type": {
-                    "text": "MultiselectOption"
-                  }
-                },
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "getEnabledOptionsCount"
@@ -24242,23 +24229,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "keydownHandler",
-              "return": {
-                "type": {
-                  "text": "boolean | void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "Event & KeyboardEvent"
-                  }
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "_presentation",
@@ -43810,55 +43780,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/flex-layout/responsiveness/flex-layout-rwd.styles.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "flexLayoutRWDStyles",
-          "return": {
-            "type": {
-              "text": "ElementStyles"
-            }
-          },
-          "parameters": [
-            {
-              "name": "breakPoint",
-              "optional": true,
-              "type": {
-                "text": "FlexBreakPointType"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "flexLayoutRWDStyles",
-          "declaration": {
-            "name": "flexLayoutRWDStyles",
-            "module": "src/flex-layout/responsiveness/flex-layout-rwd.styles.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/flex-layout/responsiveness/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./flex-layout-rwd.styles"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/_config/values/color.ts",
@@ -44008,6 +43929,55 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/flex-layout/responsiveness/flex-layout-rwd.styles.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "flexLayoutRWDStyles",
+          "return": {
+            "type": {
+              "text": "ElementStyles"
+            }
+          },
+          "parameters": [
+            {
+              "name": "breakPoint",
+              "optional": true,
+              "type": {
+                "text": "FlexBreakPointType"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "flexLayoutRWDStyles",
+          "declaration": {
+            "name": "flexLayoutRWDStyles",
+            "module": "src/flex-layout/responsiveness/flex-layout-rwd.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/flex-layout/responsiveness/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./flex-layout-rwd.styles"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/grid-layout/responsiveness/grid-layout-rwd.styles.ts",

package/dist/dts/multiselect/multiselect.d.ts

@@ -66,11 +66,11 @@ export declare class Multiselect extends FoundationElement {
     isOptionDisabled(option: MultiselectOption): boolean;
     get getDisplayValue(): string;
     get getPlaceholder(): string;
+    get isAllSelected(): boolean;
     get isAllOptionsDisabled(): boolean;
     get showCreatable(): boolean;
     isOptionSelected(normalizedOption: MultiselectOption): boolean;
     selectCheckboxOne(normalizedOption: MultiselectOption): void;
-    checkboxKeyDown(normalizedOption: MultiselectOption, event: KeyboardEvent): boolean;
     getEnabledOptionsCount(): number;
     selectCheckboxAll(): void;
     inputHandler(): void;
@@ -80,7 +80,6 @@ export declare class Multiselect extends FoundationElement {
     asyncSetFilter(): void;
     changeHandler(event: Event): void;
     private handleClickOutside;
-    keydownHandler(e: Event & KeyboardEvent): boolean | void;
 }
 export declare const foundationMultiselect: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
     baseName: string;

package/dist/dts/multiselect/multiselect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAO9D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMhD,eAAO,MAAM,kCAAkC,EAAE,cAA0B,CAAC;AAE5E,eAAO,MAAM,wBAAwB,IAAK,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GACzB;IACE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD,MAAM,CAAC;AAEX;;GAEG;AACH,qBAAa,WAAY,SAAQ,iBAAiB;IAC1C,IAAI,SAAM;IACuC,YAAY,EAAE,OAAO,CAAQ;IACzD,GAAG,UAAQ;IACX,WAAW,UAAS;IACpB,MAAM,UAAQ;IACd,QAAQ,UAAS;IACjB,SAAS,UAAS;IAClB,KAAK,UAAS;IACnC,QAAQ,EAAE,MAAM,CAAiB;IAEvC,2FAA2F;IAC/B,gBAAgB,UAAS;IAErF,eAAe,CAAC,QAAQ,KAAA,EAAE,QAAQ,EAAE,MAAM;IAG1C,qBAAqB,MAAC;IACV,mBAAmB,EAAE,IAAI,EAAE,CAAC;IAC5B,iBAAiB,EAAE,qBAAqB,EAAE,CAAC;IAC3C,cAAc,MAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAM;IAC3C,OAAO,CAAC,YAAY,CAAiD;IACzD,IAAI,UAAS;IACzB,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO;IAYhC,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClC,eAAe,EAAE,MAAM,EAAE,CAAM;IAC/B,wBAAwB,EAAE,iBAAiB,EAAE,CAAqB;IAClE,eAAe,EAAE,WAAW,CAAC;IAEzC;;;;OAIG;IACS,QAAQ,EAAE,QAAQ,CAAkB;IAEpC,qBAAqB,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAElE,OAAO,CAAC,kBAAkB,CAAkB;IAE5C,SAAS,EAAE,UAAU,CAAC;IACtB,cAAc,EAAE,WAAW,CAAC;IAE5B,iBAAiB;IAOjB,oBAAoB;IAKpB,MAAM;IAON,cAAc;IAQd,sBAAsB;IAOtB;;;;;;;OAOG;IACH,OAAO,CAAC,mBAAmB;IAqC3B,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAOtC,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAetC,gBAAgB,CAAC,MAAM,EAAE,iBAAiB;IAQ1C,IACI,eAAe,WAyBlB;IAED,IACI,cAAc,WAEjB;IAED,IACI,oBAAoB,YAEvB;IAED,IACI,aAAa,YAMhB;IAED,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,GAAG,OAAO;IAI9D,iBAAiB,CAAC,gBAAgB,EAAE,iBAAiB;IAarD,eAAe,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,KAAK,EAAE,aAAa;IAQzE,sBAAsB;IAItB,iBAAiB;IAajB,YAAY;IAcZ,qBAAqB;IAQrB,SAAS;IAcT,SAAS;IAST,cAAc;IAkBd,aAAa,CAAC,KAAK,EAAE,KAAK;IAK1B,OAAO,CAAC,kBAAkB;IAM1B,cAAc,CAAC,CAAC,EAAE,KAAK,GAAG,aAAa,GAAG,OAAO,GAAG,IAAI;CAgCzD;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;sBAMhC,CAAC"}
+{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAO9D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAMhD,eAAO,MAAM,kCAAkC,EAAE,cAA0B,CAAC;AAE5E,eAAO,MAAM,wBAAwB,IAAK,CAAC;AAE3C,MAAM,MAAM,iBAAiB,GACzB;IACE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACD,MAAM,CAAC;AAEX;;GAEG;AACH,qBAAa,WAAY,SAAQ,iBAAiB;IAC1C,IAAI,SAAM;IACuC,YAAY,EAAE,OAAO,CAAQ;IACzD,GAAG,UAAQ;IACX,WAAW,UAAS;IACpB,MAAM,UAAQ;IACd,QAAQ,UAAS;IACjB,SAAS,UAAS;IAClB,KAAK,UAAS;IACnC,QAAQ,EAAE,MAAM,CAAiB;IAEvC,2FAA2F;IAC/B,gBAAgB,UAAS;IAErF,eAAe,CAAC,QAAQ,KAAA,EAAE,QAAQ,EAAE,MAAM;IAG1C,qBAAqB,MAAC;IACV,mBAAmB,EAAE,IAAI,EAAE,CAAC;IAC5B,iBAAiB,EAAE,qBAAqB,EAAE,CAAC;IAC3C,cAAc,MAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,MAAM,CAAM;IAC3C,OAAO,CAAC,YAAY,CAAiD;IACzD,IAAI,UAAS;IACzB,WAAW,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO;IAYhC,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClC,eAAe,EAAE,MAAM,EAAE,CAAM;IAC/B,wBAAwB,EAAE,iBAAiB,EAAE,CAAqB;IAClE,eAAe,EAAE,WAAW,CAAC;IAEzC;;;;OAIG;IACS,QAAQ,EAAE,QAAQ,CAAkB;IAEpC,qBAAqB,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;IAElE,OAAO,CAAC,kBAAkB,CAAkB;IAE5C,SAAS,EAAE,UAAU,CAAC;IACtB,cAAc,EAAE,WAAW,CAAC;IAE5B,iBAAiB;IAOjB,oBAAoB;IAKpB,MAAM;IAON,cAAc;IAQd,sBAAsB;IAOtB;;;;;;;OAOG;IACH,OAAO,CAAC,mBAAmB;IAqC3B,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAOtC,YAAY,CAAC,MAAM,EAAE,iBAAiB;IAetC,gBAAgB,CAAC,MAAM,EAAE,iBAAiB;IAQ1C,IACI,eAAe,WAyBlB;IAED,IACI,cAAc,WAEjB;IAED,IACI,aAAa,YAIhB;IAED,IACI,oBAAoB,YAEvB;IAED,IACI,aAAa,YAMhB;IAED,gBAAgB,CAAC,gBAAgB,EAAE,iBAAiB,GAAG,OAAO;IAI9D,iBAAiB,CAAC,gBAAgB,EAAE,iBAAiB;IAarD,sBAAsB;IAItB,iBAAiB;IAajB,YAAY;IAUZ,qBAAqB;IAQrB,SAAS;IAcT,SAAS;IAST,cAAc;IAkBd,aAAa,CAAC,KAAK,EAAE,KAAK;IAK1B,OAAO,CAAC,kBAAkB;CAK3B;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;sBAMhC,CAAC"}

package/dist/dts/multiselect/multiselect.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.styles.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,MAAM,CAAC;AAE7B,eAAO,MAAM,iBAAiB,iDA4L7B,CAAC"}
+{"version":3,"file":"multiselect.styles.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,MAAM,CAAC;AAE7B,eAAO,MAAM,iBAAiB,iDAuK7B,CAAC"}

package/dist/dts/multiselect/multiselect.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.template.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.template.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAKjD,eAAO,MAAM,sBAAsB,uFAyGlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,kEAE/B,CAAC"}
+{"version":3,"file":"multiselect.template.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.template.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAKjD,eAAO,MAAM,sBAAsB,uFAuGlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,kEAE/B,CAAC"}

package/dist/esm/multiselect/multiselect.js

@@ -177,6 +177,9 @@ export class Multiselect extends FoundationElement {
     get getPlaceholder() {
         return `Search ${this.name}`.trim().concat('...');
     }
+    get isAllSelected() {
+        return (!this.isAllOptionsDisabled && this.selectedOptions.length === this.getEnabledOptionsCount());
+    }
     get isAllOptionsDisabled() {
         return this.options.length === this.options.filter(this.isOptionDisabled).length;
     }
@@ -200,13 +203,6 @@ export class Multiselect extends FoundationElement {
         }
         this.$emit('selectionChange', this.selectedOptions);
     }
-    checkboxKeyDown(normalizedOption, event) {
-        if (event.key === ' ') {
-            event.preventDefault();
-            this.selectCheckboxOne(normalizedOption);
-        }
-        return true;
-    }
     getEnabledOptionsCount() {
         return this.options.length - this.options.filter(this.isOptionDisabled).length;
     }
@@ -223,9 +219,6 @@ export class Multiselect extends FoundationElement {
         this.$emit('selectionChange', this.selectedOptions);
     }
     inputHandler() {
-        if (!this.open) {
-            this.open = true;
-        }
         if (this.async) {
             this.loading = true;
             this.filteredAvailableOptions = [];
@@ -287,32 +280,6 @@ export class Multiselect extends FoundationElement {
             this.open = false;
         }
     }
-    keydownHandler(e) {
-        const key = e.key;
-        if (e.ctrlKey || e.shiftKey) {
-            return true;
-        }
-        switch (key) {
-            case 'Escape': {
-                if (this.open) {
-                    this.open = false;
-                    break;
-                }
-                break;
-            }
-            case 'ArrowUp':
-            case 'ArrowDown': {
-                if (!this.open) {
-                    this.open = true;
-                    break;
-                }
-                break;
-            }
-            default: {
-                return true;
-            }
-        }
-    }
 }
 __decorate([
     attr
@@ -386,6 +353,9 @@ __decorate([
 __decorate([
     volatile
 ], Multiselect.prototype, "getPlaceholder", null);
+__decorate([
+    volatile
+], Multiselect.prototype, "isAllSelected", null);
 __decorate([
     volatile
 ], Multiselect.prototype, "isAllOptionsDisabled", null);

package/dist/esm/multiselect/multiselect.styles.js

@@ -23,7 +23,7 @@ export const multiselectStyles = css `
     min-height: 40px;
     padding: 0 calc(var(--design-unit) * 2.25px);
     border-width: 0;
-    background-color: var(--neutral-fill-input-rest);
+    background: var(--neutral-fill-input-rest);
     border-radius: calc(var(--control-corner-radius) * 1px);
   }
 
@@ -99,7 +99,6 @@ export const multiselectStyles = css `
     overflow-y: scroll;
     scrollbar-width: thin;
     scrollbar-color: var(--neutral-layer-2) var(--neutral-layer-4);
-    list-style: none;
   }
 
   .checkbox-container zero-checkbox {
@@ -111,6 +110,10 @@ export const multiselectStyles = css `
     cursor: not-allowed;
   }
 
+  #filter-search {
+    padding: 5px;
+  }
+
   ::-webkit-scrollbar {
     width: 12px;
   }
@@ -164,28 +167,4 @@ export const multiselectStyles = css `
   .label-hidden {
     display: none;
   }
-
-  ol,
-  li {
-    margin: 0;
-    padding: 0;
-  }
-
-  .checkbox {
-    width: 100%;
-  }
-
-  .select-all {
-    width: 100%;
-  }
-
-  .display-value {
-    position: absolute;
-    right: 40px;
-    line-height: var(--type-ramp-base-line-height);
-    color: var(--neutral-foreground-rest);
-    font-size: var(--type-ramp-base-font-size);
-    line-height: var(--type-ramp-base-line-height);
-    font-family: var(--body-font);
-  }
 `;

package/dist/esm/multiselect/multiselect.template.js

@@ -7,7 +7,7 @@ const ARROW_SVG_PATH = 'M11.85.65c.2.2.2.5 0 .7L6.4 6.84a.55.55 0 01-.78 0L.14 1
 export const getPrefixedMultiselect = (prefix = 'foundation') => html `
   <label
     part="label"
-    for="display-field"
+    for="control"
     class=${(x) => { var _a; return classNames('label', ['label-hidden', !((_a = x.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length)]); }}
   >
     <slot
@@ -18,23 +18,8 @@ export const getPrefixedMultiselect = (prefix = 'foundation') => html `
 })}
     ></slot>
   </label>
-  <div class="root" part="root" @keydown="${(x, c) => x.keydownHandler(c.event)}">
+  <div class="root" part="root">
     <div class="control" part="control">
-      <input
-        id="display-field"
-        part="filter-search"
-        role="combobox"
-        aria-haspopup="listbox"
-        aria-controls="checkbox-container"
-        aria-expanded=${(x) => (x.open ? 'true' : 'false')}
-        ?readonly=${(x) => !x.search}
-        @click=${(x) => x.toggle()}
-        ?disabled="${(x) => x.disabled}"
-        value=${sync((x) => x.filterSearchValue, 'string', 'input')}
-        placeholder="${(x) => x.getDisplayValue}"
-        @input=${(x, c) => x.inputHandler()}
-        @change=${(x, c) => x.changeHandler(c.event)}
-      />
       <div part="indicator" class="indicator" @click=${(x) => !x.disabled && x.toggle()}>
         <svg
           viewBox="0 0 12 7"
@@ -46,34 +31,47 @@ export const getPrefixedMultiselect = (prefix = 'foundation') => html `
           <path d="${ARROW_SVG_PATH}" />
         </svg>
       </div>
-      ${when((x) => x.filterSearchValue && x.selectedOptions.length, html `
-          <div class="display-value">${(x) => x.getDisplayValue}</div>
-        `)}
+
+      <input
+        part="input"
+        readonly
+        type="text"
+        id="display-field"
+        part="display-field"
+        :value="${(x) => x.getDisplayValue}"
+        :disabled="${(x) => x.disabled}"
+        @click=${(x) => x.toggle()}
+      />
     </div>
-    ${when((x) => x.loading, html `
-          <${prefix}-progress slot="indicator"></${prefix}-progress>
+    <div ${ref('optionsElement')} class="options">
+      ${when((x) => x.search, html `
+          <${prefix}-text-field
+            id="filter-search"
+            part="filter-search"
+            value=${sync((x) => x.filterSearchValue, 'string', 'input')}
+            placeholder="${(x) => x.getPlaceholder}"
+            @input=${(x, c) => x.inputHandler()}
+            @change=${(x, c) => x.changeHandler(c.event)}
+          ></${prefix}-text-field>
         `)}
-    <ol
-      ${ref('optionsElement')}
-      id="checkbox-container"
-      class="checkbox-container options"
-      aria-multiselectable="true"
-    >
-      ${when((x) => x.all, html `
-          <${prefix}-button
-            class="select-all"
-            @click=${(x) => x.selectCheckboxAll()}
-            ?disabled="${(x, c) => x.isAllOptionsDisabled}"
-          >
-            Select All ${(x) => x.name}
-          </${prefix}-button>
-        `)}
-      ${repeat((x) => x.filteredAvailableOptions, html `
-          <li role="option" value=${(x, ctx) => ctx.parent.getItemLabel(x)}>
+      <div class="checkbox-container">
+        ${when((x) => x.loading, html `
+            <${prefix}-progress slot="indicator"></${prefix}-progress>
+          `)}
+        ${when((x) => x.all, html `
+            <${prefix}-checkbox
+              part="checkbox"
+              @click=${(x) => x.selectCheckboxAll()}
+              @change=${(x, c) => x.changeHandler(c.event)}
+              ?current-checked="${(x) => x.isAllSelected}"
+              ?disabled="${(x, c) => x.isAllOptionsDisabled}"
+            >
+              All ${(x) => x.name}
+            </${prefix}-checkbox>
+          `)}
+        ${repeat((x) => x.filteredAvailableOptions, html `
             <${prefix}-checkbox
               part="checkbox"
-              class="checkbox"
-              @keydown=${(x, c) => c.parent.checkboxKeyDown(x, c.event)}
               @click=${(x, c) => c.parent.selectCheckboxOne(x)}
               @change=${(x, c) => c.parent.changeHandler(c.event)}
               ?current-checked="${(x, c) => c.parent.isOptionSelected(x)}"
@@ -81,12 +79,12 @@ export const getPrefixedMultiselect = (prefix = 'foundation') => html `
             >
               ${(x, ctx) => ctx.parent.getItemLabel(x)}
             </${prefix}-checkbox>
-          </li>
-        `)}
-      ${when((x) => x.showCreatable, html `
-          <${prefix}-button @click=${(x) => x.addOption()}>Create&nbsp;"${(x) => x.filterSearchValue}"</${prefix}-button>
-        `)}
-    </ol>
+          `)}
+        ${when((x) => x.showCreatable, html `
+            <${prefix}-button @click=${(x) => x.addOption()}>Create&nbsp;"${(x) => x.filterSearchValue}"</${prefix}-button>
+          `)}
+      </div>
+    </div>
   </div>
   <slot
     ${slotted({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.192.0-accessibility.2",
+  "version": "14.192.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -82,13 +82,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.192.0-accessibility.2",
-    "@genesislcap/genx": "14.192.0-accessibility.2",
-    "@genesislcap/rollup-builder": "14.192.0-accessibility.2",
-    "@genesislcap/ts-builder": "14.192.0-accessibility.2",
-    "@genesislcap/uvu-playwright-builder": "14.192.0-accessibility.2",
-    "@genesislcap/vite-builder": "14.192.0-accessibility.2",
-    "@genesislcap/webpack-builder": "14.192.0-accessibility.2",
+    "@genesislcap/foundation-testing": "14.192.1",
+    "@genesislcap/genx": "14.192.1",
+    "@genesislcap/rollup-builder": "14.192.1",
+    "@genesislcap/ts-builder": "14.192.1",
+    "@genesislcap/uvu-playwright-builder": "14.192.1",
+    "@genesislcap/vite-builder": "14.192.1",
+    "@genesislcap/webpack-builder": "14.192.1",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.0",
     "rxjs": "^7.5.4"
@@ -99,13 +99,13 @@
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/foundation-comms": "14.192.0-accessibility.2",
-    "@genesislcap/foundation-criteria": "14.192.0-accessibility.2",
-    "@genesislcap/foundation-errors": "14.192.0-accessibility.2",
-    "@genesislcap/foundation-logger": "14.192.0-accessibility.2",
-    "@genesislcap/foundation-notifications": "14.192.0-accessibility.2",
-    "@genesislcap/foundation-user": "14.192.0-accessibility.2",
-    "@genesislcap/foundation-utils": "14.192.0-accessibility.2",
+    "@genesislcap/foundation-comms": "14.192.1",
+    "@genesislcap/foundation-criteria": "14.192.1",
+    "@genesislcap/foundation-errors": "14.192.1",
+    "@genesislcap/foundation-logger": "14.192.1",
+    "@genesislcap/foundation-notifications": "14.192.1",
+    "@genesislcap/foundation-user": "14.192.1",
+    "@genesislcap/foundation-utils": "14.192.1",
     "@microsoft/fast-colors": "^5.3.1",
     "@microsoft/fast-components": "^2.30.6",
     "@microsoft/fast-element": "^1.12.0",
@@ -127,5 +127,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "b127a4e9702b04ebed2f1428ce86c4f740d5de10"
+  "gitHead": "a29aa171eb4bd0a83c1787bdcfb0351f77ff0cc5"
 }