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

package/dist/custom-elements.json

@@ -1287,188 +1287,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/actions-menu/actions-menu.styles.ts",
@@ -2548,6 +2366,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/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: 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`"
+          "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`"
         }
       ],
       "exports": [
@@ -24132,11 +24132,6 @@
               "name": "getPlaceholder",
               "readonly": true
             },
-            {
-              "kind": "field",
-              "name": "isAllSelected",
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "isAllOptionsDisabled",
@@ -24176,6 +24171,24 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "checkboxKeyDown",
+              "parameters": [
+                {
+                  "name": "normalizedOption",
+                  "type": {
+                    "text": "MultiselectOption"
+                  }
+                },
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "getEnabledOptionsCount"
@@ -24229,6 +24242,23 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "keydownHandler",
+              "return": {
+                "type": {
+                  "text": "boolean | void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event & KeyboardEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "_presentation",
@@ -43780,6 +43810,55 @@
         }
       ]
     },
+    {
+      "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",
@@ -43929,55 +44008,6 @@
       "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,6 +80,7 @@ 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,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"}
+{"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"}

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,iDAuK7B,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,iDA4L7B,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,uFAuGlC,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,uFAyGlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,kEAE/B,CAAC"}

package/dist/esm/multiselect/multiselect.js

@@ -177,9 +177,6 @@ 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;
     }
@@ -203,6 +200,13 @@ 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;
     }
@@ -219,6 +223,9 @@ 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 = [];
@@ -280,6 +287,32 @@ 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
@@ -353,9 +386,6 @@ __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: var(--neutral-fill-input-rest);
+    background-color: var(--neutral-fill-input-rest);
     border-radius: calc(var(--control-corner-radius) * 1px);
   }
 
@@ -99,6 +99,7 @@ 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 {
@@ -110,10 +111,6 @@ export const multiselectStyles = css `
     cursor: not-allowed;
   }
 
-  #filter-search {
-    padding: 5px;
-  }
-
   ::-webkit-scrollbar {
     width: 12px;
   }
@@ -167,4 +164,28 @@ 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="control"
+    for="display-field"
     class=${(x) => { var _a; return classNames('label', ['label-hidden', !((_a = x.defaultSlottedNodes) === null || _a === void 0 ? void 0 : _a.length)]); }}
   >
     <slot
@@ -18,8 +18,23 @@ export const getPrefixedMultiselect = (prefix = 'foundation') => html `
 })}
     ></slot>
   </label>
-  <div class="root" part="root">
+  <div class="root" part="root" @keydown="${(x, c) => x.keydownHandler(c.event)}">
     <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"
@@ -31,47 +46,34 @@ export const getPrefixedMultiselect = (prefix = 'foundation') => html `
           <path d="${ARROW_SVG_PATH}" />
         </svg>
       </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()}
-      />
+      ${when((x) => x.filterSearchValue && x.selectedOptions.length, html `
+          <div class="display-value">${(x) => x.getDisplayValue}</div>
+        `)}
     </div>
-    <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>
+    ${when((x) => x.loading, html `
+          <${prefix}-progress slot="indicator"></${prefix}-progress>
         `)}
-      <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 `
+    <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)}>
             <${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)}"
@@ -79,12 +81,12 @@ export const getPrefixedMultiselect = (prefix = 'foundation') => html `
             >
               ${(x, ctx) => ctx.parent.getItemLabel(x)}
             </${prefix}-checkbox>
-          `)}
-        ${when((x) => x.showCreatable, html `
-            <${prefix}-button @click=${(x) => x.addOption()}>Create&nbsp;"${(x) => x.filterSearchValue}"</${prefix}-button>
-          `)}
-      </div>
-    </div>
+          </li>
+        `)}
+      ${when((x) => x.showCreatable, html `
+          <${prefix}-button @click=${(x) => x.addOption()}>Create&nbsp;"${(x) => x.filterSearchValue}"</${prefix}-button>
+        `)}
+    </ol>
   </div>
   <slot
     ${slotted({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-ui",
   "description": "Genesis Foundation UI",
-  "version": "14.191.0",
+  "version": "14.192.0-accessibility.2",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -82,13 +82,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.191.0",
-    "@genesislcap/genx": "14.191.0",
-    "@genesislcap/rollup-builder": "14.191.0",
-    "@genesislcap/ts-builder": "14.191.0",
-    "@genesislcap/uvu-playwright-builder": "14.191.0",
-    "@genesislcap/vite-builder": "14.191.0",
-    "@genesislcap/webpack-builder": "14.191.0",
+    "@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",
     "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.191.0",
-    "@genesislcap/foundation-criteria": "14.191.0",
-    "@genesislcap/foundation-errors": "14.191.0",
-    "@genesislcap/foundation-logger": "14.191.0",
-    "@genesislcap/foundation-notifications": "14.191.0",
-    "@genesislcap/foundation-user": "14.191.0",
-    "@genesislcap/foundation-utils": "14.191.0",
+    "@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",
     "@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": "6cd41bf74649398b357228b168d779a5f86a55c8"
+  "gitHead": "b127a4e9702b04ebed2f1428ce86c4f740d5de10"
 }