@vonage/vivid 5.1.0 → 5.2.0

package/searchable-select/index.js

@@ -1,36 +1,39 @@
-import { B as V, c as z, b as E } from "../bundled/definition3.js";
-import { P, p as L } from "../bundled/definition9.js";
-import { I as M, i as I } from "../bundled/definition2.js";
-import { P as B, p as A } from "../bundled/definition15.js";
-import { V as C, O as T, D as W, a as f, n as F, o as p, h as d, c as N, d as D } from "../bundled/vivid-element.js";
-import { W as K, f as q } from "../bundled/mixins.js";
-import { s as H } from "../bundled/scrollIntoView.js";
-import { D as j, d as U } from "../bundled/delegates-aria.js";
-import { F as G } from "../bundled/form-associated.js";
-import { W as J } from "../bundled/with-error-text.js";
-import { W as Q } from "../bundled/with-success-text.js";
-import { F as X } from "../bundled/form-element.js";
-import { A as Y, a as Z, I as ee } from "../bundled/affix.js";
-import { L as R } from "../bundled/localized.js";
-import { i as te } from "../bundled/option.js";
+import { B as z, c as E, b as P } from "../bundled/definition3.js";
+import { P as L, p as M } from "../bundled/definition9.js";
+import { I as B, i as I } from "../bundled/definition2.js";
+import { P as A, p as W } from "../bundled/definition15.js";
+import { V as F, O as T, D as N, a as f, n as D, o as d, h as p, c as H, d as R } from "../bundled/vivid-element.js";
+import { W as K, f as j } from "../bundled/mixins.js";
+import { s as q } from "../bundled/scrollIntoView.js";
+import { D as U, d as G } from "../bundled/delegates-aria.js";
+import { F as J } from "../bundled/form-associated.js";
+import { W as Q } from "../bundled/with-contextual-help.js";
+import { W as X } from "../bundled/with-error-text.js";
+import { W as Y } from "../bundled/with-success-text.js";
+import { F as Z } from "../bundled/form-element.js";
+import { A as ee, a as te, I as oe } from "../bundled/affix.js";
+import { L as V } from "../bundled/localized.js";
+import { i as ae } from "../bundled/option.js";
 import { w as v } from "../bundled/when.js";
+import { s as O } from "../bundled/slotted.js";
 import { r as x } from "../bundled/ref.js";
-import { s as oe } from "../bundled/slotted.js";
-import { c as w } from "../bundled/class-names.js";
-import { r as y } from "../bundled/repeat.js";
-const ae = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}", ie = '.base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}';
-var se = Object.defineProperty, r = (s, t, e, a) => {
+import { c as y } from "../bundled/class-names.js";
+import { r as w } from "../bundled/repeat.js";
+const ie = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}", se = '.base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}';
+var le = Object.defineProperty, r = (s, t, e, a) => {
   for (var i = void 0, l = s.length - 1, g; l >= 0; l--)
     (g = s[l]) && (i = g(t, e, i) || i);
-  return i && se(t, e, i), i;
+  return i && le(t, e, i), i;
 };
-const m = 8, le = 100, O = 10, ne = (s) => typeof s == "string";
-class n extends K(
-  J(
-    Q(
-      X(
-        j(
-          Y(R(G(C)))
+const m = 8, ne = 100, S = 10, re = (s) => typeof s == "string";
+class n extends Q(
+  K(
+    X(
+      Y(
+        Z(
+          U(
+            ee(V(J(F)))
+          )
         )
       )
     )
@@ -42,8 +45,8 @@ class n extends K(
         t.selected && !this.values.includes(t.value) ? this.values = [...this.values, t.value] : !t.selected && this.values.includes(t.value) && (this.values = this.values.filter((a) => a !== t.value));
       }
     }, this.#t = /* @__PURE__ */ new Map(), this._filteredOptions = [], this._filteredEnabledOptions = [], this.loading = !1, this._highlightedOptionIndex = null, this._numElidedTags = 0, this._tagRows = [], this._lastTagRow = [], this.clearable = !1, this.maxSelected = null, this._slottedDisabledOptions = [], this.proxy = document.createElement("input"), this.setFormValue = (t, e) => {
-      ne(t) || super.setFormValue(t, e);
-    }, this._changeDescription = "", this.#d = new ResizeObserver(() => {
+      re(t) || super.setFormValue(t, e);
+    }, this._changeDescription = "", this.#p = new ResizeObserver(() => {
       this.#u();
     });
   }
@@ -62,8 +65,8 @@ class n extends K(
         this.values = [this.values[0]];
         return;
       }
-      if (this.values.some((t) => !this.#p(t))) {
-        this.values = this.values.filter((t) => this.#p(t));
+      if (this.values.some((t) => !this.#d(t))) {
+        this.values = this.values.filter((t) => this.#d(t));
         return;
       }
       this.value = this.values.length ? this.values[0] : "", this.#c(), this.#m(), this.$fastController.isConnected && this.#u(), this.#g();
@@ -86,7 +89,7 @@ class n extends K(
   initialValuesChanged() {
     this.dirtyValue || (this.values = this.initialValues, this.dirtyValue = !1);
   }
-  #p(t) {
+  #d(t) {
     return this._slottedOptions.some((e) => e.value === t);
   }
   /**
@@ -172,13 +175,13 @@ class n extends K(
           this.open = !0;
           break;
         }
-        return this.#y(), !1;
+        return this.#w(), !1;
       case "End":
         if (!this.open) {
           this.open = !0;
           break;
         }
-        return this.#w(), !1;
+        return this.#y(), !1;
       case "PageUp":
         if (!this.open) {
           this.open = !0;
@@ -304,7 +307,7 @@ class n extends K(
       Math.min(this._filteredEnabledOptions.length - 1, t)
     ) : t = null), this._highlightedOptionIndex = t, typeof this._highlightedOptionIndex == "number") {
       const e = this._filteredEnabledOptions[this._highlightedOptionIndex];
-      e._highlighted = !0, e.setAttribute("data-highlighted", ""), H(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
+      e._highlighted = !0, e.setAttribute("data-highlighted", ""), q(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
         e._getAccessibleName(),
         this._highlightedOptionIndex + 1,
         this._filteredEnabledOptions.length,
@@ -317,22 +320,22 @@ class n extends K(
       this._filteredEnabledOptions[this._highlightedOptionIndex]
     );
   }
-  #y() {
+  #w() {
     this.#e(0);
   }
-  #w() {
+  #y() {
     this.#e(
       this._filteredEnabledOptions.length - 1
     );
   }
   #$() {
     this.#e(
-      (this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - O
+      (this._highlightedOptionIndex ?? this._filteredEnabledOptions.length) - S
     );
   }
   #T() {
     this.#e(
-      (this._highlightedOptionIndex ?? -1) + O
+      (this._highlightedOptionIndex ?? -1) + S
     );
   }
   #O() {
@@ -395,7 +398,7 @@ class n extends K(
       return;
     }
     const t = this._contentArea.getBoundingClientRect().width, e = [[]];
-    let a = 0, i = le, l;
+    let a = 0, i = ne, l;
     for (l = this.values.length - 1; l >= 0; l--) {
       const h = this.maxLines && a === this.maxLines - 1, u = this.#n(
         this._tagLabelForValue(this.values[l]),
@@ -451,7 +454,7 @@ class n extends K(
       case "Delete":
       case "Enter":
       case " ": {
-        this._onTagRemoved(this.values[e]), W.processUpdates(), this.#i(this.#I(e));
+        this._onTagRemoved(this.values[e]), N.processUpdates(), this.#i(this.#C(e));
         break;
       }
       case "ArrowLeft":
@@ -482,7 +485,7 @@ class n extends K(
         return e;
     return null;
   }
-  #I(t) {
+  #C(t) {
     return this.#v(t - 1) ?? this.#r(t);
   }
   /**
@@ -532,6 +535,12 @@ class n extends K(
       for (const e of t)
         e.disabled = !1;
   }
+  /**
+   * @internal
+   */
+  get _hasSelectionCount() {
+    return this.multiple && this.maxSelected && this.maxSelected >= 1;
+  }
   #f() {
     return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
   }
@@ -557,7 +566,7 @@ class n extends K(
   formResetCallback() {
     super.formResetCallback(), this.#a(this.#f());
   }
-  #d;
+  #p;
   /**
    * @internal
    */
@@ -571,10 +580,10 @@ class n extends K(
     return this.open ? (this.open = !1, !1) : !0;
   }
   connectedCallback() {
-    super.connectedCallback(), this.values.length || (this.values = this.#f()), this.#d.observe(this._contentArea);
+    super.connectedCallback(), this.values.length || (this.values = this.#f()), this.#p.observe(this._contentArea);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.#d.disconnect();
+    super.disconnectedCallback(), this.#p.disconnect();
   }
   /**
    * @internal
@@ -593,7 +602,7 @@ class n extends K(
    */
   _onMouseDown(t) {
     const e = t.composedPath()[0];
-    return !t.defaultPrevented && e !== this._input ? (this._input.focus(), !1) : !0;
+    return !t.defaultPrevented && e !== this._input && !this._isFromContextualHelp(t) ? (this._input.focus(), !1) : !0;
   }
 }
 r([
@@ -618,31 +627,31 @@ r([
   f({ attribute: "external-tags", mode: "boolean" })
 ], n.prototype, "externalTags");
 r([
-  f({ attribute: "max-lines", converter: F })
+  f({ attribute: "max-lines", converter: D })
 ], n.prototype, "maxLines");
 r([
-  p
+  d
 ], n.prototype, "values");
 r([
-  p
+  d
 ], n.prototype, "initialValues");
 r([
-  p
+  d
 ], n.prototype, "_input");
 r([
-  p
+  d
 ], n.prototype, "_currentSearchText");
 r([
-  p
+  d
 ], n.prototype, "_slottedOptions");
 r([
-  p
+  d
 ], n.prototype, "optionFilter");
 r([
-  p
+  d
 ], n.prototype, "_filteredOptions");
 r([
-  p
+  d
 ], n.prototype, "_filteredEnabledOptions");
 r([
   f({
@@ -650,44 +659,44 @@ r([
   })
 ], n.prototype, "loading");
 r([
-  p
+  d
 ], n.prototype, "_highlightedOptionIndex");
 r([
-  p
+  d
 ], n.prototype, "_contentArea");
 r([
-  p
+  d
 ], n.prototype, "_numElidedTags");
 r([
-  p
+  d
 ], n.prototype, "_tagRows");
 r([
-  p
+  d
 ], n.prototype, "_lastTagRow");
 r([
-  p
+  d
 ], n.prototype, "_listbox");
 r([
   f({ mode: "boolean" })
 ], n.prototype, "clearable");
 r([
-  f({ attribute: "max-selected", converter: F })
+  f({ attribute: "max-selected", converter: D })
 ], n.prototype, "maxSelected");
 r([
-  p
+  d
 ], n.prototype, "_slottedDisabledOptions");
 r([
-  p
+  d
 ], n.prototype, "_changeDescription");
 r([
-  p
+  d
 ], n.prototype, "_anchor");
-var re = Object.defineProperty, _ = (s, t, e, a) => {
+var ce = Object.defineProperty, _ = (s, t, e, a) => {
   for (var i = void 0, l = s.length - 1, g; l >= 0; l--)
     (g = s[l]) && (i = g(t, e, i) || i);
-  return i && re(t, e, i), i;
+  return i && ce(t, e, i), i;
 };
-class b extends R(C) {
+class b extends V(F) {
   constructor() {
     super(...arguments), this.removable = !1, this.disabled = !1, this.hasIconPlaceholder = !1;
   }
@@ -701,7 +710,7 @@ _([
   f
 ], b.prototype, "shape");
 _([
-  p
+  d
 ], b.prototype, "connotation");
 _([
   f
@@ -713,9 +722,9 @@ _([
   f({ mode: "boolean" })
 ], b.prototype, "disabled");
 _([
-  p
+  d
 ], b.prototype, "hasIconPlaceholder");
-const ce = (s) => w(
+const pe = (s) => y(
   ["disabled", s.disabled],
   [`appearance-${s.appearance}`, !!s.appearance],
   [`shape-${s.shape}`, !!s.shape],
@@ -724,12 +733,12 @@ const ce = (s) => w(
   ["has-highlighted-option", s._highlightedOptionIndex !== null]
 );
 function de() {
-  return d`
+  return p`
 		<label for="control" class="label" id="label"> ${(s) => s.label} </label>
 	`;
 }
-function pe() {
-  return d`
+function he() {
+  return p`
 		<span
 			id="selection-count"
 			class="selection-count"
@@ -741,9 +750,9 @@ function pe() {
 		>
 	`;
 }
-const S = (s, t) => {
+const k = (s, t) => {
   const e = s.tagFor(b);
-  return d`
+  return p`
 		<div class="tag-wrapper">
 			<${e}
 				class="tag"
@@ -761,9 +770,9 @@ const S = (s, t) => {
 			</${e}>
 		</div>
 	`;
-}, k = (s, t) => {
+}, C = (s, t) => {
   const e = s.tagFor(b);
-  return d`
+  return p`
 		<${e}
 			class="tag"
 			tabindex="-1"
@@ -774,37 +783,37 @@ const S = (s, t) => {
 		</${e}>
 	`;
 };
-function he(s) {
-  const t = s.tagFor(V), e = s.tagFor(B), a = Z(s), i = z(s), l = S(s, (o) => o.parent), g = S(
+function ue(s) {
+  const t = s.tagFor(z), e = s.tagFor(A), a = te(s), i = E(s), l = k(s, (o) => o.parent), g = k(
     s,
     (o) => o.parentContext.parent
-  ), h = k(s, (o, c) => o), u = k(
+  ), h = C(s, (o, c) => o), u = C(
     s,
     (o, c) => c.parent
   );
-  return d`
+  return p`
 		<div
-			class="fieldset ${ce}"
+			class="fieldset ${pe}"
 			@click="${(o, c) => o._onFieldsetClick(c.event)}"
 			${x("_anchor")}
 		>
-			${(o) => a(o.icon, ee.Slot)}
+			${(o) => a(o.icon, oe.Slot)}
 			<div class="content-area" ${x("_contentArea")}>
-				${y(
+				${w(
     (o) => o._tagRows,
-    d`
+    p`
 						<div class="tag-row">
 							${v(
       (o, c) => c.isFirst && c.parent._numElidedTags,
       u
     )}
-							${y((o) => o, g)}
+							${w((o) => o, g)}
 						</div>
 					`,
     { positioning: !0 }
   )}
 				<div
-					class="tag-row ${(o) => w([
+					class="tag-row ${(o) => y([
     "contains-only-input",
     o._tagRows.length > 0 && o._lastTagRow.length === 0
   ])}"
@@ -813,14 +822,14 @@ function he(s) {
     (o) => o._tagRows.length === 0 && o._numElidedTags,
     h
   )}
-					${y((o) => o._lastTagRow, l)}
+					${w((o) => o._lastTagRow, l)}
 					<input
 						id="control"
 						class="control"
 						autocomplete="off"
 						aria-controls="listbox"
 						aria-describedby="${(o) => o._feedbackDescribedBy} ${(o) => o.multiple && o.maxSelected && o.maxSelected >= 1 ? "selection-count" : null}"
-						${U({
+						${G({
     role: "combobox",
     ariaAutoComplete: "list",
     ariaHasPopup: "listbox",
@@ -846,7 +855,7 @@ function he(s) {
 			<slot name="meta"></slot>
 			${v(
     (o) => o._shouldShowClearButton,
-    d`<${t}
+    p`<${t}
 					aria-label="${(o) => o.locale.searchableSelect.clearButtonLabel}"
 					@click="${(o) => o._onClearButtonClick()}"
 					@mousedown="${() => !1}"
@@ -861,45 +870,45 @@ function he(s) {
 			<div @mousedown="${() => !1}" @click="${(o) => o._onChevronClick()}">
 				${v(
     (o) => o.loading,
-    d`<${e} indeterminate size="-6" aria-hidden="true"></${e}>`
+    p`<${e} indeterminate size="-6" aria-hidden="true"></${e}>`
   )}
 				${v((o) => !o.loading, i)}
 			</div>
 		</div>
 	`;
 }
-function ue(s) {
+function ve(s) {
   return s.open && s.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(
     s.getBoundingClientRect().width
   )}px` : null;
 }
-function ve(s) {
-  const t = s.tagFor(P);
-  return d`
-		${v(
-    (e) => e.label || e.multiple && e.maxSelected && e.maxSelected >= 1,
-    d`
-				<div>
-					${v((e) => e.label, de())}
-					${v(
-      (e) => e.multiple && e.maxSelected && e.maxSelected >= 1,
-      pe()
-    )}
-				</div>
-			`
+function fe(s) {
+  const t = s.tagFor(L);
+  return p`
+		<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp && !e._hasSelectionCount}>
+			${v(
+    (e) => e.label || e._hasSelectionCount,
+    p`
+					<div>
+						${v((e) => e.label, de())}
+						${v((e) => e._hasSelectionCount, he())}
+					</div>
+				`
   )}
+			<slot name="contextual-help" ${O("_contextualHelpSlottedContent")}></slot>
+		</div>
 		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 			${(e) => e._changeDescription}
 		</span>
 		<div>
-			${he(s)}
+			${ue(s)}
 			<div class="popup-wrapper">
 				<${t}
 					:anchor="${(e) => e._anchor}"
 					:open="${(e) => e.open}"
 					class="popup"
 					placement="bottom-start"
-					style="${ue}"
+					style="${ve}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}">
 					<div
 						class="listbox"
@@ -911,30 +920,30 @@ function ve(s) {
 						@mousedown="${() => !1}"
 					>
 						<slot
-							${oe({
-    filter: te,
+							${O({
+    filter: ae,
     flatten: !0,
     property: "_slottedOptions"
   })}>
 						</slot>
 						${v(
     (e) => e._filteredOptions.length === 0,
-    d`<div class="empty-message">
+    p`<div class="empty-message">
 								${v(
       (e) => e.loading,
-      d`<slot name="loading-options">
+      p`<slot name="loading-options">
 										${(e) => e.locale.searchableSelect.loadingOptionsMessage}
 									</slot>`
     )}
 								${v(
       (e) => !e.loading && e.searchText === "",
-      d`<slot name="no-options">
+      p`<slot name="no-options">
 										${(e) => e.locale.searchableSelect.noOptionsMessage}
 									</slot>`
     )}
 								${v(
       (e) => !e.loading && e.searchText !== "",
-      d`<slot name="no-matches">
+      p`<slot name="no-matches">
 										${(e) => e.locale.searchableSelect.noMatchesMessage}
 									</slot>`
     )}
@@ -946,27 +955,27 @@ function ve(s) {
 		</div>
 	`;
 }
-const fe = (s) => {
+const ge = (s) => {
   const t = s.tagFor(b);
-  return d`
+  return p`
 		<template
 			:_optionTagTagName="${() => t}"
 			@mousedown="${(e, a) => e._onMouseDown(a.event)}"
 		>
 			<div class="control-wrapper">
-				${ve(s)} ${(e) => e._getFeedbackTemplate(s)}
+				${fe(s)} ${(e) => e._getFeedbackTemplate(s)}
 			</div>
 		</template>
 	`;
-}, ge = ({ shape: s, connotation: t, disabled: e, removable: a }) => w(
+}, be = ({ shape: s, connotation: t, disabled: e, removable: a }) => y(
   "base",
   ["disabled", e],
   ["removable", a],
   [`shape-${s}`, !!s],
   [`connotation-${t}`, !!t]
 );
-function be(s) {
-  return d`
+function me(s) {
+  return p`
 		<span
 			class="remove-button"
 			aria-label="${(t) => t.locale.searchableSelect.removeTagButtonLabel(t.label)}"
@@ -978,48 +987,48 @@ function be(s) {
 		</span>
 	`;
 }
-const me = (s) => {
-  const t = s.tagFor(M);
-  return d`<span class="${ge}" aria-disabled="${(e) => e.disabled}">
+const _e = (s) => {
+  const t = s.tagFor(B);
+  return p`<span class="${be}" aria-disabled="${(e) => e.disabled}">
 		<slot name="icon" aria-hidden="true">
 			${v(
     (e) => e.hasIconPlaceholder,
-    d`<div class="icon-placeholder"></div>`
+    p`<div class="icon-placeholder"></div>`
   )}
 		</slot>
 		${v(
     (e) => e.label,
-    (e) => d`<span class="label">${e.label}</span>`
+    (e) => p`<span class="label">${e.label}</span>`
   )}
-		${v((e) => e.removable, be(t))}
+		${v((e) => e.removable, me(t))}
 	</span>`;
-}, _e = D(
+}, xe = R(
   "option-tag",
   b,
-  me,
+  _e,
   [I],
   {
-    styles: [ie],
+    styles: [se],
     shadowOptions: {
       delegatesFocus: !0
     }
   }
-), xe = D(
+), we = R(
   "searchable-select",
   n,
-  fe,
+  ge,
   [
-    E,
-    L,
+    P,
+    M,
     I,
-    _e,
-    A,
-    q
+    xe,
+    W,
+    j
   ],
   {
-    styles: ae
+    styles: ie
   }
-), ye = N(
-  xe
+), ye = H(
+  we
 );
 ye();