@vonage/vivid 5.23.0 → 5.23.1

package/unbundled/definition63.js

@@ -5,25 +5,25 @@ import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrai
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { r as ProgressRing, t as progressRingDefinition } from "./definition5.js";
 import { n as FormAssociated } from "./form-associated.js";
-import { t as FormElement } from "./form-element.js";
-import { t as WithSuccessText } from "./with-success-text.js";
-import { t as WithErrorText } from "./with-error-text.js";
-import { t as WithContextualHelp } from "./with-contextual-help.js";
 import { t as Localized } from "./localized.js";
-import { i as Button, r as chevronTemplateFactory, t as buttonDefinition } from "./definition7.js";
-import { i as Popup, t as popupDefinition } from "./definition10.js";
+import { i as Button, r as chevronTemplateFactory, t as buttonDefinition } from "./definition6.js";
+import { i as Popup, t as popupDefinition } from "./definition9.js";
 import { t as Divider } from "./divider.js";
 import { r as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { t as FormElement } from "./form-element.js";
+import { t as WithErrorText } from "./with-error-text.js";
+import { t as WithSuccessText } from "./with-success-text.js";
+import { t as WithContextualHelp } from "./with-contextual-help.js";
 import { i as isListboxOption, r as ListboxOption, t as listboxOptionDefinition } from "./definition29.js";
 import { t as dividerDefinition } from "./definition35.js";
 import { t as scrollIntoView } from "./scrollIntoView.js";
 import { Observable, Updates, attr, html, nullableNumberConverter, observable, ref, repeat, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/searchable-select/searchable-select.scss?inline
-var searchable_select_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{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{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.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));--_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-600);--_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-600);--_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{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;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);justify-content:space-between;align-items:center;gap:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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(--focus-stroke-color,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:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:var(--_searchable-select-block-size);font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}";
+var searchable_select_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;display:flex;transform:rotate(0)}@media (prefers-reduced-motion:no-preference){.chevron{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{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.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));--_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-600);--_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-600);--_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{--_searchable-select-block-size:24px;--_searchable-select-padding-block:8px;--_searchable-select-padding-inline:16px;--_searchable-select-icon-size:20px;--_searchable-select-border-radius:8px;--_searchable-select-gap:8px;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);justify-content:space-between;align-items:center;gap:var(--_searchable-select-gap);padding-block:var(--_searchable-select-padding-block);padding-inline:var(--_searchable-select-padding-inline);transition:box-shadow .2s,background-color .2s;display:flex}.fieldset.size-condensed{--_searchable-select-block-size:20px;--_searchable-select-padding-block:6px;--_searchable-select-padding-inline:12px;--_searchable-select-gap:6px}.fieldset.size-condensed:not(.shape-pill){--_searchable-select-border-radius:4px}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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(--focus-stroke-color,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:var(--_searchable-select-border-radius)}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{gap:var(--_searchable-select-gap);min-block-size:var(--_searchable-select-block-size);flex-direction:column;flex:1;display:flex;overflow:hidden}.tag-row{gap:var(--_searchable-select-gap);inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:var(--_searchable-select-block-size);font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:var(--_searchable-select-icon-size)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}";
 //#endregion
 //#region src/lib/searchable-select/option-tag.scss?inline
-var option_tag_default = ":host{display:block}.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{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--fill-color);block-size:var(--_option-tag-block-size);box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:flex;position:relative}.base.size-condensed{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));padding-inline:4px}.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{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_option-tag-block-size) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(var(--_option-tag-block-size) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.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(--focus-stroke-color,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));z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}";
+var option_tag_default = ":host{display:block}.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{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-sizing:border-box;background-color:var(--fill-color);block-size:var(--_option-tag-block-size);box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:flex;position:relative}.base.size-condensed{--_option-tag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));padding-inline:4px}.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{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_option-tag-block-size) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(var(--_option-tag-block-size) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.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(--focus-stroke-color,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));z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}";
 //#endregion
 //#region src/lib/searchable-select/searchable-select.ts
 var TagGapPx = 8;
@@ -88,15 +88,11 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 			this.#updateTagLayout();
 		});
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	openChanged() {
 		if (!this.open) this.#transitionHighlightedOptionTo(null);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	valuesChanged() {
 		if (!this._areOptionsInitialized) return;
 		if (!this.multiple && this.values.length > 1) {
@@ -123,9 +119,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 		const newSet = new Set(newValues);
 		this.values = [...this.values].filter((v) => newSet.has(v)).concat([...newValues].filter((v) => !oldSet.has(v)));
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	initialValuesChanged() {
 		if (!this.dirtyValue) {
 			this.values = this.initialValues;
@@ -135,9 +129,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 	#isValidValue(value) {
 		return this._slottedOptions.some((option) => option.value === value);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	valueChanged(prev, next) {
 		super.valueChanged(prev, next);
 		if (!this._areOptionsInitialized) return;
@@ -157,9 +149,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 	get selectedOptions() {
 		return this._slottedOptions.filter((option) => this.values.includes(option.value));
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_currentSearchTextChanged() {
 		this.#updateFilteredOptions();
 		this.$emit("search-text-change", void 0, {
@@ -167,41 +157,29 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 			composed: false
 		});
 	}
-	/**
-	* Read-only property containing the current search text.
-	*/
+	/** Read-only property containing the current search text. */
 	get searchText() {
 		return this._currentSearchText ?? "";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _inputValue() {
 		return this._currentSearchText ?? (!this.multiple && this.value !== "" ? this.#textForValue(this.value) ?? "" : "");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onInputInput(event) {
 		this._currentSearchText = event.target.value;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onInputFocus(_) {
 		this.#updateFilteredOptions();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onInputBlur(_) {
 		this.open = false;
 		this._currentSearchText = null;
 		this._changeDescription = "";
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onInputKeydown(e) {
 		if (e.ctrlKey || e.shiftKey) return true;
 		switch (e.key) {
@@ -273,9 +251,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 		}
 		return true;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_slottedOptionsChanged(oldValue, newValue) {
 		const hasSlottedOptions = Boolean(this.querySelectorAll(`:not([slot])`).length);
 		if (!newValue.length && hasSlottedOptions) return;
@@ -331,9 +307,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 	#tagIconOfOption(option) {
 		return option.querySelector("[slot=\"tag-icon\"]");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_tagIconSlotName(value) {
 		return `_tag-icon-${this.values.indexOf(value)}`;
 	}
@@ -355,15 +329,11 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 			}
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	optionFilterChanged() {
 		this.#updateFilteredOptions();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	loadingChanged(_oldValue, newValue) {
 		this._changeDescription = this.locale.searchableSelect.loadingOptionsMessage;
 		if (_oldValue && !newValue) this._changeDescription = "";
@@ -427,21 +397,15 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 	#highlightNextOption() {
 		this.#transitionHighlightedOptionTo((this._highlightedOptionIndex ?? -1) + 1);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_tagLabelForValue(value) {
 		return this._slottedOptions.find((option) => option.value === value).label;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_tagConnotationForValue(value) {
 		return this._slottedOptions.find((option) => option.value === value).tagConnotation;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_isTagDisabled(value) {
 		const option = this._slottedOptions.find((option) => option.value === value);
 		return this.disabled || option.disabled;
@@ -449,9 +413,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 	#textForValue(value) {
 		return (this._slottedOptions?.find((option) => option.value === value))?.label;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	#measureTagWidth(label, removable, hasIcon) {
 		const tag = document.createElement(this._optionTagTagName);
 		tag.label = label;
@@ -524,16 +486,12 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 		this._tagRows = rowValues.slice(0, -1);
 		this._lastTagRow = rowValues.slice(-1)[0];
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onTagRemoved(value) {
 		this.#updateValuesThroughUserInteraction(this.values.filter((option) => option !== value));
 		this.#updateFilteredOptions();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onTagKeydown(event) {
 		const tagIndex = parseInt(event.target.dataset.index);
 		switch (event.key) {
@@ -571,9 +529,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 	#nextTagIndexForRemoved(index) {
 		return this.#nextTagIndexRight(index - 1) ?? this.#nextTagIndexLeft(index);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onListboxClick(e) {
 		if (this.disabled) return;
 		const capturedOption = e.target.closest(`option,[role=option],[data-vvd-component=option]`);
@@ -583,21 +539,15 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 		}
 		if (capturedOption && !capturedOption.disabled) this.#handleOptionInteraction(capturedOption);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _shouldShowClearButton() {
 		return this.clearable && this.values.length > 0;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onClearButtonClick() {
 		this.#updateValuesThroughUserInteraction(this.selectedOptions.filter((option) => option.disabled).map((option) => option.value));
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	maxSelectedChanged() {
 		this.#updateSelectionLimit();
 	}
@@ -609,27 +559,19 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 			for (const option of unselectedOptions) option.disabled = true;
 		} else for (const option of options) option.disabled = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _hasSelectionCount() {
 		return this.multiple && this.maxSelected && this.maxSelected >= 1;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _selectableOptions() {
 		return this._slottedOptions?.filter((o) => !this._slottedDisabledOptions.includes(o) && !o.disabled) ?? [];
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _selectAllLabel() {
 		return this._isAllSelected ? this.deselectAllText ?? this.locale.searchableSelect.deselectAllLabel : this.selectAllText ?? this.locale.searchableSelect.selectAllLabel;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	get _isAllSelected() {
 		const selectedValues = this.values;
 		if (!this.multiple || !this._slottedOptions) return false;
@@ -638,9 +580,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 		const selected = new Set(selectedValues);
 		return selectable.every((o) => selected.has(o.value));
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_toggleSelectAll() {
 		const selectableValues = this._selectableOptions.map((o) => o.value);
 		if (this._isAllSelected) {
@@ -657,9 +597,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 	#determineInitialValues() {
 		return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	nameChanged(previous, next) {
 		super.nameChanged(previous, next);
 		this.#updateFormValue();
@@ -672,17 +610,13 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 			this.setFormValue(formData);
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	formResetCallback() {
 		super.formResetCallback();
 		this.#updateValuesThroughUserInteraction(this.#determineInitialValues());
 	}
 	#resizeObserver;
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onFieldsetClick(e) {
 		if (this.disabled) return;
 		if (!e.defaultPrevented) {
@@ -690,9 +624,7 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 			this.open = true;
 		}
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onChevronClick() {
 		if (this.open) {
 			this.open = false;
@@ -709,21 +641,15 @@ var SearchableSelect = class extends WithContextualHelp(WithFeedback(WithErrorTe
 		super.disconnectedCallback();
 		this.#resizeObserver.disconnect();
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	validate() {
 		super.validate(this._input ?? void 0);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	focus(options) {
 		this._input?.focus(options);
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_onMouseDown(event) {
 		const originalTarget = event.composedPath()[0];
 		if (!event.defaultPrevented && originalTarget !== this._input && !this._isFromContextualHelp(event)) {
@@ -804,7 +730,6 @@ __decorate([observable], OptionTag.prototype, "hasIconPlaceholder", void 0);
 __decorate([attr()], OptionTag.prototype, "scale", void 0);
 //#endregion
 //#region src/lib/searchable-select/searchable-select.template.ts
-var getStateClasses = (x) => classNames(["disabled", x.disabled], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.scale}`, Boolean(x.scale)], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText], ["has-highlighted-option", x._highlightedOptionIndex !== null]);
 function renderLabel() {
 	return html`
 		<label for="control" class="label" id="label"> ${(x) => x.label} </label>
@@ -867,7 +792,7 @@ function renderFieldset(context) {
 	const nestedElidedTagTemplate = elidedTagTemplateFactory(context, (_, c) => c.parent);
 	return html`
 		<div
-			class="fieldset ${getStateClasses}"
+			class="fieldset ${(x) => classNames(["disabled", x.disabled], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.scale}`, Boolean(x.scale)], ["error", Boolean(x.errorValidationMessage)], ["success", !!x.successText], ["has-highlighted-option", x._highlightedOptionIndex !== null])}"
 			@click="${(x, c) => x._onFieldsetClick(c.event)}"
 			${ref("_anchor")}
 		>
@@ -1026,7 +951,6 @@ var SearchableSelectTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/searchable-select/option-tag.template.ts
-var getClasses = ({ shape, connotation, disabled, removable, scale }) => classNames("base", ["disabled", disabled], ["removable", removable], [`shape-${shape}`, Boolean(shape)], [`connotation-${connotation}`, Boolean(connotation)], [`size-${scale}`, Boolean(scale)]);
 function renderRemoveButton(iconTag) {
 	return html`
 		<span
@@ -1042,7 +966,10 @@ function renderRemoveButton(iconTag) {
 }
 var optionTagTemplate = (context) => {
 	const iconTag = context.tagFor(Icon);
-	return html`<span class="${getClasses}" aria-disabled="${(x) => x.disabled}">
+	return html`<span
+		class="${(x) => classNames("base", ["disabled", x.disabled], ["removable", x.removable], [`shape-${x.shape}`, Boolean(x.shape)], [`connotation-${x.connotation}`, Boolean(x.connotation)], [`size-${x.scale}`, Boolean(x.scale)])}"
+		aria-disabled="${(x) => x.disabled}"
+	>
 		<slot name="icon" aria-hidden="true">
 			${when((x) => x.hasIconPlaceholder, html`<div class="icon-placeholder"></div>`)}
 		</slot>
@@ -1050,12 +977,8 @@ var optionTagTemplate = (context) => {
 		${when((x) => x.removable, renderRemoveButton(iconTag))}
 	</span>`;
 };
-/**
-* Registers the searchable-select element with the design system.
-*
-* @param prefix - the prefix to use for the component name
-*/
-var registerSearchableSelect = createRegisterFunction(defineVividComponent("searchable-select", SearchableSelect, SearchableSelectTemplate, [
+/** @internal */
+var searchableSelectDefinition = defineVividComponent("searchable-select", SearchableSelect, SearchableSelectTemplate, [
 	buttonDefinition,
 	popupDefinition,
 	iconDefinition,
@@ -1067,6 +990,12 @@ var registerSearchableSelect = createRegisterFunction(defineVividComponent("sear
 	feedbackMessageDefinition,
 	listboxOptionDefinition,
 	dividerDefinition
-], { styles: searchable_select_default }));
+], { styles: searchable_select_default });
+/**
+* Registers the searchable-select element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerSearchableSelect = createRegisterFunction(searchableSelectDefinition);
 //#endregion
-export { SearchableSelect as n, registerSearchableSelect as t };
+export { searchableSelectDefinition as n, SearchableSelect as r, registerSearchableSelect as t };

package/unbundled/definition64.cjs

@@ -8,7 +8,7 @@ const require_definition$1 = require("./definition57.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/selectable-box/selectable-box.scss?inline
-var selectable_box_default = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}";
+var selectable_box_default = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}";
 //#endregion
 //#region src/lib/selectable-box/selectable-box.ts
 /**
@@ -31,18 +31,14 @@ var SelectableBox = class extends require_delegates_aria.DelegatesAria(require_v
 		this.tight = false;
 		this.disabled = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleCheckedChange() {
 		if (this.disabled) return;
 		if (this.controlType === "radio" && this.checked) return;
 		this.checked = !this.checked;
 		if (this.clickableBox) this.$emit("change");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleKeydown(event) {
 		if (this.disabled) return true;
 		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) {
@@ -67,7 +63,6 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean"
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SelectableBox.prototype, "disabled", void 0);
 //#endregion
 //#region src/lib/selectable-box/selectable-box.template.ts
-var getClasses = ({ connotation, tight, checked, clickableBox, controlPlacement, disabled }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["tight", tight], ["selected", checked], ["clickable", clickableBox], ["readonly", !clickableBox], [`control-placement-${controlPlacement}`, Boolean(controlPlacement)], ["disabled", disabled]);
 function handleControlChange(x) {
 	if (!x.clickableBox) x._handleCheckedChange();
 }
@@ -100,7 +95,7 @@ function radio(context) {
 var SelectableBoxTemplate = (context) => {
 	return _microsoft_fast_element.html`<template>
 		<div
-			class="${getClasses}"
+			class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["tight", x.tight], ["selected", x.checked], ["clickable", x.clickableBox], ["readonly", !x.clickableBox], [`control-placement-${x.controlPlacement}`, Boolean(x.controlPlacement)], ["disabled", x.disabled])}"
 			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
 			${require_delegates_aria.delegateAria({
 		role: (x) => x.clickableBox ? "button" : null,
@@ -118,9 +113,7 @@ var SelectableBoxTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/selectable-box/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var selectableBoxDefinition = require_vivid_element.defineVividComponent("selectable-box", SelectableBox, SelectableBoxTemplate, [require_definition.checkboxDefinition, require_definition$1.radioDefinition], {
 	styles: selectable_box_default,
 	shadowOptions: { delegatesFocus: true }

package/unbundled/definition64.js

@@ -7,7 +7,7 @@ import { r as Radio, t as radioDefinition } from "./definition57.js";
 import { attr, html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/selectable-box/selectable-box.scss?inline
-var selectable_box_default = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}";
+var selectable_box_default = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}";
 //#endregion
 //#region src/lib/selectable-box/selectable-box.ts
 /**
@@ -30,18 +30,14 @@ var SelectableBox = class extends DelegatesAria(VividElement) {
 		this.tight = false;
 		this.disabled = false;
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleCheckedChange() {
 		if (this.disabled) return;
 		if (this.controlType === "radio" && this.checked) return;
 		this.checked = !this.checked;
 		if (this.clickableBox) this.$emit("change");
 	}
-	/**
-	* @internal
-	*/
+	/** @internal */
 	_handleKeydown(event) {
 		if (this.disabled) return true;
 		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) {
@@ -66,7 +62,6 @@ __decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "tight", void 0
 __decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "disabled", void 0);
 //#endregion
 //#region src/lib/selectable-box/selectable-box.template.ts
-var getClasses = ({ connotation, tight, checked, clickableBox, controlPlacement, disabled }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["tight", tight], ["selected", checked], ["clickable", clickableBox], ["readonly", !clickableBox], [`control-placement-${controlPlacement}`, Boolean(controlPlacement)], ["disabled", disabled]);
 function handleControlChange(x) {
 	if (!x.clickableBox) x._handleCheckedChange();
 }
@@ -99,7 +94,7 @@ function radio(context) {
 var SelectableBoxTemplate = (context) => {
 	return html`<template>
 		<div
-			class="${getClasses}"
+			class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], ["tight", x.tight], ["selected", x.checked], ["clickable", x.clickableBox], ["readonly", !x.clickableBox], [`control-placement-${x.controlPlacement}`, Boolean(x.controlPlacement)], ["disabled", x.disabled])}"
 			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
 			${delegateAria({
 		role: (x) => x.clickableBox ? "button" : null,
@@ -117,9 +112,7 @@ var SelectableBoxTemplate = (context) => {
 };
 //#endregion
 //#region src/lib/selectable-box/definition.ts
-/**
-* @internal
-*/
+/** @internal */
 var selectableBoxDefinition = defineVividComponent("selectable-box", SelectableBox, SelectableBoxTemplate, [checkboxDefinition, radioDefinition], {
 	styles: selectable_box_default,
 	shadowOptions: { delegatesFocus: true }