@genesislcap/foundation-ui 14.193.1 → 14.193.3

package/dist/dts/flyout/flyout.d.ts

@@ -3,6 +3,7 @@ import { FoundationElement } from '@microsoft/fast-foundation';
  * @tagname %%prefix%%-flyout
  */
 export declare class Flyout extends FoundationElement {
+    exit: HTMLDivElement;
     position: string;
     displayHeader: boolean;
     closed: boolean;
@@ -10,6 +11,7 @@ export declare class Flyout extends FoundationElement {
     visuallyhidden: boolean;
     closeFlyout(): void;
     closingFinished(): void;
+    focusExit(): void;
 }
 export declare const foundationFlyoutShadowOptions: ShadowRootInit;
 export declare const defaultFlyoutConfig: {};

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

@@ -1 +1 @@
-{"version":3,"file":"flyout.d.ts","sourceRoot":"","sources":["../../../src/flyout/flyout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAI/D;;GAEG;AACH,qBAAa,MAAO,SAAQ,iBAAiB;IACrC,QAAQ,EAAE,MAAM,CAAW;IACN,aAAa,EAAE,OAAO,CAAQ;IAC9B,MAAM,EAAE,OAAO,CAAQ;IAClD,aAAa;IAOc,cAAc,EAAE,OAAO,CAAQ;IAE1D,WAAW;IAIX,eAAe;CAMhB;AAGD,eAAO,MAAM,6BAA6B,EAAE,cAA0B,CAAC;AAEvE,eAAO,MAAM,mBAAmB,IAAK,CAAC;AAEtC;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;iBAM3B,CAAC"}
+{"version":3,"file":"flyout.d.ts","sourceRoot":"","sources":["../../../src/flyout/flyout.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAI/D;;GAEG;AACH,qBAAa,MAAO,SAAQ,iBAAiB;IACpC,IAAI,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAW;IACN,aAAa,EAAE,OAAO,CAAQ;IAC9B,MAAM,EAAE,OAAO,CAAQ;IAClD,aAAa;IASc,cAAc,EAAE,OAAO,CAAQ;IAE1D,WAAW;IAIX,eAAe;IAOf,SAAS;CAGV;AAGD,eAAO,MAAM,6BAA6B,EAAE,cAA0B,CAAC;AAEvE,eAAO,MAAM,mBAAmB,IAAK,CAAC;AAEtC;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;iBAM3B,CAAC"}

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/flyout/flyout.js

@@ -18,6 +18,7 @@ export class Flyout extends FoundationElement {
         if (!this.closed) {
             // TODO: timeout shouldn't be necessary here but without it opening transition doesn't work
             setTimeout(() => (this.visuallyhidden = false), 1);
+            this.focusExit();
         }
     }
     closeFlyout() {
@@ -29,6 +30,9 @@ export class Flyout extends FoundationElement {
             this.$emit('closed');
         }
     }
+    focusExit() {
+        this.exit.focus();
+    }
 }
 __decorate([
     attr

package/dist/esm/flyout/flyout.template.js

@@ -1,4 +1,4 @@
-import { html, when } from '@microsoft/fast-element';
+import { html, when, ref } from '@microsoft/fast-element';
 import { getPrefix } from '../utils/dom';
 export const getPrefixedFlyout = (prefix) => html `
   <div ?closed=${(x) => x.closed} ?visuallyhidden=${(x) => x.visuallyhidden}>
@@ -10,9 +10,9 @@ export const getPrefixedFlyout = (prefix) => html `
               <div class="title" part="title">
                 <slot name="title"></slot>
               </div>
-              <div class="exit" part="exit" @click=${(x) => x.closeFlyout()}>
+              <${prefix}-button class="exit" part="exit" aria-label="exit" ${ref('exit')} appearance="stealth" @click=${(x) => x.closeFlyout()}>
                 <${prefix}-icon name="times"></${prefix}-icon>
-              </div>
+              </${prefix}-button>
             </div>
           `)}
         <div class="content" part="content">

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.193.1",
+  "version": "14.193.3",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -82,13 +82,13 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.193.1",
-    "@genesislcap/genx": "14.193.1",
-    "@genesislcap/rollup-builder": "14.193.1",
-    "@genesislcap/ts-builder": "14.193.1",
-    "@genesislcap/uvu-playwright-builder": "14.193.1",
-    "@genesislcap/vite-builder": "14.193.1",
-    "@genesislcap/webpack-builder": "14.193.1",
+    "@genesislcap/foundation-testing": "14.193.3",
+    "@genesislcap/genx": "14.193.3",
+    "@genesislcap/rollup-builder": "14.193.3",
+    "@genesislcap/ts-builder": "14.193.3",
+    "@genesislcap/uvu-playwright-builder": "14.193.3",
+    "@genesislcap/vite-builder": "14.193.3",
+    "@genesislcap/webpack-builder": "14.193.3",
     "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.193.1",
-    "@genesislcap/foundation-criteria": "14.193.1",
-    "@genesislcap/foundation-errors": "14.193.1",
-    "@genesislcap/foundation-logger": "14.193.1",
-    "@genesislcap/foundation-notifications": "14.193.1",
-    "@genesislcap/foundation-user": "14.193.1",
-    "@genesislcap/foundation-utils": "14.193.1",
+    "@genesislcap/foundation-comms": "14.193.3",
+    "@genesislcap/foundation-criteria": "14.193.3",
+    "@genesislcap/foundation-errors": "14.193.3",
+    "@genesislcap/foundation-logger": "14.193.3",
+    "@genesislcap/foundation-notifications": "14.193.3",
+    "@genesislcap/foundation-user": "14.193.3",
+    "@genesislcap/foundation-utils": "14.193.3",
     "@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": "83048f45bf5634a5c7e93d461eceb393610aee37"
+  "gitHead": "38840a2d88af7100ff4b38c9b1440885c67a0799"
 }