@vonage/vivid 5.17.0 → 5.19.0

package/searchable-select/index.js

@@ -1,18 +1,18 @@
 import { t as e } from "../bundled/localized.js";
-import { O as t, T as n, d as r, l as i, o as a, s as o, t as s, u as c, w as l } from "../bundled/vivid-element.js";
+import { A as t, D as n, E as r, c as i, d as a, f as o, s, t as c, u as l } from "../bundled/vivid-element.js";
 import { n as u } from "../bundled/repeat.js";
 import { t as d } from "../bundled/ref.js";
 import { t as f } from "../bundled/when.js";
 import { t as p } from "../bundled/slotted.js";
-import { r as m, t as h } from "../bundled/definition2.js";
-import { t as g } from "../bundled/decorate.js";
-import { a as _, i as ee, n as v } from "../bundled/affix.js";
-import { t as y } from "../bundled/form-element.js";
-import { t as b } from "../bundled/with-success-text.js";
+import { t as m } from "../bundled/decorate.js";
+import { r as h, t as g } from "../bundled/definition2.js";
+import { a as _, i as v, n as y } from "../bundled/affix.js";
+import { t as b } from "../bundled/form-element.js";
+import { t as ee } from "../bundled/with-success-text.js";
 import { t as x } from "../bundled/with-error-text.js";
 import { t as S } from "../bundled/with-contextual-help.js";
-import { n as C, t as w } from "../bundled/delegates-aria.js";
-import { t as T } from "../bundled/class-names.js";
+import { t as C } from "../bundled/class-names.js";
+import { n as w, t as T } from "../bundled/delegates-aria.js";
 import { r as E, t as D } from "../bundled/definition5.js";
 import { n as O } from "../bundled/form-associated.js";
 import { i as k, r as A, t as j } from "../bundled/definition6.js";
@@ -23,11 +23,15 @@ import { i as L, r as R, t as te } from "../bundled/definition17.js";
 import { t as z } from "../bundled/definition19.js";
 import { t as B } from "../bundled/divider.js";
 //#region src/lib/searchable-select/searchable-select.scss?inline
-var V = ".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;transition:transform .2s;display:flex;transform:rotate(0)}: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-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{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:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s;display:flex}@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:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{flex-direction:column;flex:1;gap:8px;min-block-size:24px;display:flex;overflow:hidden}.tag-row{gap:8px;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:24px;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:20px}.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}", H = ".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{box-sizing:border-box;background-color:var(--fill-color);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;vertical-align:middle;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.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(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 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}", U = 8, W = 100, G = 10, K = (e) => typeof e == "string", q = class extends S(F(x(b(y(w(v(e(O(s))))))))) {
+var V = ".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;transition:transform .2s;display:flex;transform:rotate(0)}: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}", H = ":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}", U = 8, W = 100, G = 10, K = (e) => typeof e == "string", q = class extends S(F(x(ee(b(T(y(e(O(c))))))))) {
 	constructor(...e) {
-		super(...e), this.fixedDropdown = !1, this.open = !1, this.multiple = !1, this.externalTags = !1, this.maxLines = null, this.values = [], this.initialValues = [], this._currentSearchText = null, this._areOptionsInitialized = !1, 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.enableSelectAll = !1, this.proxy = document.createElement("input"), this.setFormValue = (e, t) => {
+		super(...e), this.fixedDropdown = !1, this.open = !1, this.multiple = !1, this.externalTags = !1, this.maxLines = null, this.values = [], this.initialValues = [], this._currentSearchText = null, this._areOptionsInitialized = !1, this.#r = { handleChange: (e, t) => {
+			e.selected && !this.values.includes(e.value) ? this.values = [...this.values, e.value] : !e.selected && this.values.includes(e.value) && (this.values = this.values.filter((t) => t !== e.value));
+		} }, this.#o = /* @__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.enableSelectAll = !1, this.proxy = document.createElement("input"), this.setFormValue = (e, t) => {
 			K(e) || super.setFormValue(e, t);
-		}, this._changeDescription = "";
+		}, this._changeDescription = "", this.#O = new ResizeObserver(() => {
+			this.#b();
+		});
 	}
 	openChanged() {
 		this.open || this.#u(null);
@@ -150,25 +154,25 @@ var V = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		if (!t.length && n) return;
 		if (this._areOptionsInitialized = !0, e) {
 			this._slottedDisabledOptions = [];
-			for (let t of e) l.getNotifier(t).unsubscribe(this.#r, "selected");
+			for (let t of e) r.getNotifier(t).unsubscribe(this.#r, "selected");
 		}
 		/* v8 ignore else -- @preserve */
-		if (t) for (let e of t) e._displayCheckmark = !0, l.getNotifier(e).subscribe(this.#r, "selected");
-		let r = [];
-		for (let e of this._slottedOptions) (e.selected || e.value === this.value || this.values.includes(e.value)) && r.push(e.value), e.disabled && this._slottedDisabledOptions.push(e);
-		this.#t(r), this.#l(), this.#T();
-	}
-	#r = { handleChange: (e, t) => {
-		e.selected && !this.values.includes(e.value) ? this.values = [...this.values, e.value] : !e.selected && this.values.includes(e.value) && (this.values = this.values.filter((t) => t !== e.value));
-	} };
+		if (t) for (let e of t) e._displayCheckmark = !0, r.getNotifier(e).subscribe(this.#r, "selected");
+		let i = [];
+		for (let e of this._slottedOptions) (e.selected || e.value === this.value || this.values.includes(e.value)) && i.push(e.value), e.disabled && this._slottedDisabledOptions.push(e);
+		this.#t(i), this.#l(), this.#T();
+	}
+	#r;
 	#i() {
 		for (let e of this._slottedOptions) e.selected = this.values.includes(e.value), this.#c(e);
 	}
 	#a(e) {
 		let t = e.value, n, r = !1, i = !this.values.includes(t);
-		this.multiple ? (n = i ? [...this.values, t] : this.values.filter((e) => e !== t), r = !0) : (i ? (n = [t], r = !0) : n = [], this.open = !1), this.#e(n), this._changeDescription = `${i ? this.locale.searchableSelect.optionSelectedMessage(e._getAccessibleName()) : this.locale.searchableSelect.optionDeselectedMessage(e._getAccessibleName())} ${this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(this.values.length, this.maxSelected) : ""}`, r && (this._currentSearchText = null);
+		this.multiple ? (n = i ? [...this.values, t] : this.values.filter((e) => e !== t), r = !0) : (i ? (n = [t], r = !0) : n = [], this.open = !1), this.#e(n);
+		let a = i ? this.locale.searchableSelect.optionSelectedMessage(e._getAccessibleName()) : this.locale.searchableSelect.optionDeselectedMessage(e._getAccessibleName()), o = this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(this.values.length, this.maxSelected) : "";
+		this._changeDescription = `${a} ${o}`, r && (this._currentSearchText = null);
 	}
-	#o = /* @__PURE__ */ new Map();
+	#o;
 	#s(e) {
 		return e.querySelector("[slot=\"tag-icon\"]");
 	}
@@ -402,9 +406,7 @@ var V = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 	formResetCallback() {
 		super.formResetCallback(), this.#e(this.#E());
 	}
-	#O = new ResizeObserver(() => {
-		this.#b();
-	});
+	#O;
 	_onFieldsetClick(e) {
 		this.disabled || e.defaultPrevented || (this._input.focus(), this.open = !0);
 	}
@@ -428,25 +430,25 @@ var V = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		return !e.defaultPrevented && t !== this._input && !this._isFromContextualHelp(e) ? (this._input.focus(), !1) : !0;
 	}
 };
-g([i], q.prototype, "appearance", void 0), g([i], q.prototype, "shape", void 0), g([i({
+m([l], q.prototype, "appearance", void 0), m([l], q.prototype, "shape", void 0), m([l()], q.prototype, "scale", void 0), m([l({
 	mode: "boolean",
 	attribute: "fixed-dropdown"
-})], q.prototype, "fixedDropdown", void 0), g([i], q.prototype, "placeholder", void 0), g([i({ mode: "boolean" })], q.prototype, "open", void 0), g([i({ mode: "boolean" })], q.prototype, "multiple", void 0), g([i({
+})], q.prototype, "fixedDropdown", void 0), m([l], q.prototype, "placeholder", void 0), m([l({ mode: "boolean" })], q.prototype, "open", void 0), m([l({ mode: "boolean" })], q.prototype, "multiple", void 0), m([l({
 	attribute: "external-tags",
 	mode: "boolean"
-})], q.prototype, "externalTags", void 0), g([i({
+})], q.prototype, "externalTags", void 0), m([l({
 	attribute: "max-lines",
-	converter: c
-})], q.prototype, "maxLines", void 0), g([n], q.prototype, "values", void 0), g([n], q.prototype, "initialValues", void 0), g([n], q.prototype, "_input", void 0), g([n], q.prototype, "_currentSearchText", void 0), g([n], q.prototype, "_slottedOptions", void 0), g([n], q.prototype, "optionFilter", void 0), g([n], q.prototype, "_filteredOptions", void 0), g([n], q.prototype, "_filteredEnabledOptions", void 0), g([i({ mode: "boolean" })], q.prototype, "loading", void 0), g([n], q.prototype, "_highlightedOptionIndex", void 0), g([n], q.prototype, "_contentArea", void 0), g([n], q.prototype, "_numElidedTags", void 0), g([n], q.prototype, "_tagRows", void 0), g([n], q.prototype, "_lastTagRow", void 0), g([n], q.prototype, "_listbox", void 0), g([i({ mode: "boolean" })], q.prototype, "clearable", void 0), g([i({
+	converter: a
+})], q.prototype, "maxLines", void 0), m([n], q.prototype, "values", void 0), m([n], q.prototype, "initialValues", void 0), m([n], q.prototype, "_input", void 0), m([n], q.prototype, "_currentSearchText", void 0), m([n], q.prototype, "_slottedOptions", void 0), m([n], q.prototype, "optionFilter", void 0), m([n], q.prototype, "_filteredOptions", void 0), m([n], q.prototype, "_filteredEnabledOptions", void 0), m([l({ mode: "boolean" })], q.prototype, "loading", void 0), m([n], q.prototype, "_highlightedOptionIndex", void 0), m([n], q.prototype, "_contentArea", void 0), m([n], q.prototype, "_numElidedTags", void 0), m([n], q.prototype, "_tagRows", void 0), m([n], q.prototype, "_lastTagRow", void 0), m([n], q.prototype, "_listbox", void 0), m([l({ mode: "boolean" })], q.prototype, "clearable", void 0), m([l({
 	attribute: "max-selected",
-	converter: c
-})], q.prototype, "maxSelected", void 0), g([n], q.prototype, "_slottedDisabledOptions", void 0), g([i({
+	converter: a
+})], q.prototype, "maxSelected", void 0), m([n], q.prototype, "_slottedDisabledOptions", void 0), m([l({
 	attribute: "enable-select-all",
 	mode: "boolean"
-})], q.prototype, "enableSelectAll", void 0), g([i({ attribute: "select-all-text" })], q.prototype, "selectAllText", void 0), g([i({ attribute: "deselect-all-text" })], q.prototype, "deselectAllText", void 0), g([n], q.prototype, "_selectAllOption", void 0), g([n], q.prototype, "_changeDescription", void 0), g([n], q.prototype, "_anchor", void 0);
+})], q.prototype, "enableSelectAll", void 0), m([l({ attribute: "select-all-text" })], q.prototype, "selectAllText", void 0), m([l({ attribute: "deselect-all-text" })], q.prototype, "deselectAllText", void 0), m([n], q.prototype, "_selectAllOption", void 0), m([n], q.prototype, "_changeDescription", void 0), m([n], q.prototype, "_anchor", void 0);
 //#endregion
 //#region src/lib/searchable-select/option-tag.ts
-var J = class extends e(s) {
+var J = class extends e(c) {
 	constructor(...e) {
 		super(...e), this.removable = !1, this.disabled = !1, this.hasIconPlaceholder = !1;
 	}
@@ -454,17 +456,17 @@ var J = class extends e(s) {
 		this.$emit("remove", void 0, { bubbles: !1 });
 	}
 };
-g([i], J.prototype, "shape", void 0), g([n], J.prototype, "connotation", void 0), g([i], J.prototype, "label", void 0), g([i({ mode: "boolean" })], J.prototype, "removable", void 0), g([i({ mode: "boolean" })], J.prototype, "disabled", void 0), g([n], J.prototype, "hasIconPlaceholder", void 0);
+m([l], J.prototype, "shape", void 0), m([n], J.prototype, "connotation", void 0), m([l], J.prototype, "label", void 0), m([l({ mode: "boolean" })], J.prototype, "removable", void 0), m([l({ mode: "boolean" })], J.prototype, "disabled", void 0), m([n], J.prototype, "hasIconPlaceholder", void 0), m([l()], J.prototype, "scale", void 0);
 //#endregion
 //#region src/lib/searchable-select/searchable-select.template.ts
-var Y = (e) => T(["disabled", e.disabled], [`appearance-${e.appearance}`, !!e.appearance], [`shape-${e.shape}`, !!e.shape], ["error", !!e.errorValidationMessage], ["success", !!e.successText], ["has-highlighted-option", e._highlightedOptionIndex !== null]);
+var Y = (e) => C(["disabled", e.disabled], [`appearance-${e.appearance}`, !!e.appearance], [`shape-${e.shape}`, !!e.shape], [`size-${e.scale}`, !!e.scale], ["error", !!e.errorValidationMessage], ["success", !!e.successText], ["has-highlighted-option", e._highlightedOptionIndex !== null]);
 function X() {
-	return r`
+	return o`
 		<label for="control" class="label" id="label"> ${(e) => e.label} </label>
 	`;
 }
 function Z() {
-	return r`
+	return o`
 		<span
 			id="selection-count"
 			class="selection-count"
@@ -475,7 +477,7 @@ function Z() {
 }
 var Q = (e, t) => {
 	let n = e.tagFor(J);
-	return r`
+	return o`
 		<div class="tag-wrapper">
 			<${n}
 				class="tag"
@@ -485,6 +487,7 @@ var Q = (e, t) => {
 				:label="${(e, n) => t(n)._tagLabelForValue(e)}"
 				:shape="${(e, n) => t(n).shape}"
 				:connotation="${(e, n) => t(n)._tagConnotationForValue(e)}"
+				:scale="${(e, n) => t(n).scale}"
 				?disabled="${(e, n) => t(n)._isTagDisabled(e)}"
 				@remove="${(e, n) => t(n)._onTagRemoved(e)}"
 				@keydown="${(e, n) => t(n)._onTagKeydown(n.event)}"
@@ -495,45 +498,46 @@ var Q = (e, t) => {
 	`;
 }, $ = (e, t) => {
 	let n = e.tagFor(J);
-	return r`
+	return o`
 		<${n}
 			class="tag"
 			tabindex="-1"
 			:label="${(e, n) => t(e, n)._numElidedTags.toString()}"
 			:shape="${(e, n) => t(e, n).shape}"
+			:scale="${(e, n) => t(e, n).scale}"
 			?disabled="${(e, n) => t(e, n).disabled}"
 			@mousedown="${() => !1}">
 		</${n}>
 	`;
 };
 function ne(e) {
-	let t = e.tagFor(k), n = e.tagFor(E), i = _(e), a = A(e), o = Q(e, (e) => e.parent), s = Q(e, (e) => e.parentContext.parent), c = $(e, (e, t) => e), l = $(e, (e, t) => t.parent);
-	return r`
+	let t = e.tagFor(k), n = e.tagFor(E), r = _(e), i = A(e), a = Q(e, (e) => e.parent), s = Q(e, (e) => e.parentContext.parent), c = $(e, (e, t) => e), l = $(e, (e, t) => t.parent);
+	return o`
 		<div
 			class="fieldset ${Y}"
 			@click="${(e, t) => e._onFieldsetClick(t.event)}"
 			${d("_anchor")}
 		>
-			${(e) => i(e.icon, ee.Slot)}
+			${(e) => r(e.icon, v.Slot)}
 			<div class="content-area" ${d("_contentArea")}>
-				${u((e) => e._tagRows, r`
+				${u((e) => e._tagRows, o`
 						<div class="tag-row">
 							${f((e, t) => t.isFirst && t.parent._numElidedTags, l)}
 							${u((e) => e, s)}
 						</div>
 					`, { positioning: !0 })}
 				<div
-					class="tag-row ${(e) => T(["contains-only-input", e._tagRows.length > 0 && e._lastTagRow.length === 0])}"
+					class="tag-row ${(e) => C(["contains-only-input", e._tagRows.length > 0 && e._lastTagRow.length === 0])}"
 				>
 					${f((e) => e._tagRows.length === 0 && e._numElidedTags, c)}
-					${u((e) => e._lastTagRow, o)}
+					${u((e) => e._lastTagRow, a)}
 					<input
 						id="control"
 						class="control"
 						autocomplete="off"
 						aria-controls="listbox"
 						aria-describedby="${(e) => e._feedbackDescribedBy} ${(e) => e.multiple && e.maxSelected && e.maxSelected >= 1 ? "selection-count" : null}"
-						${C({
+						${w({
 		role: "combobox",
 		ariaAutoComplete: "list",
 		ariaHasPopup: "listbox",
@@ -557,7 +561,7 @@ function ne(e) {
 				</div>
 			</div>
 			<slot name="meta"></slot>
-			${f((e) => e._shouldShowClearButton, r`<${t}
+			${f((e) => e._shouldShowClearButton, o`<${t}
 					aria-label="${(e) => e.locale.searchableSelect.clearButtonLabel}"
 					@click="${(e) => e._onClearButtonClick()}"
 					@mousedown="${() => !1}"
@@ -569,8 +573,8 @@ function ne(e) {
 					tabindex="0"
 				></${t}>`)}
 			<div @mousedown="${() => !1}" @click="${(e) => e._onChevronClick()}">
-				${f((e) => e.loading, r`<${n} indeterminate size="-6" aria-hidden="true"></${n}>`)}
-				${f((e) => !e.loading, a)}
+				${f((e) => e.loading, o`<${n} indeterminate size="-6" aria-hidden="true"></${n}>`)}
+				${f((e) => !e.loading, i)}
 			</div>
 		</div>
 	`;
@@ -580,7 +584,7 @@ function re(e) {
 }
 function ie(e) {
 	let t = e.tagFor(R), n = e.tagFor(B);
-	return r`
+	return o`
     <${t}
       data-select-all
       tabindex="-1"
@@ -595,9 +599,9 @@ function ie(e) {
 }
 function ae(e) {
 	let t = e.tagFor(M);
-	return r`
+	return o`
 		<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp && !e._hasSelectionCount}>
-			${f((e) => e.label || e._hasSelectionCount, r`
+			${f((e) => e.label || e._hasSelectionCount, o`
 					<div>
 						${f((e) => e.label, X())}
 						${f((e) => e._hasSelectionCount, Z())}
@@ -635,14 +639,14 @@ function ae(e) {
 		property: "_slottedOptions"
 	})}>
 						</slot>
-						${f((e) => e._filteredOptions.length === 0, r`<div class="empty-message">
-								${f((e) => e.loading, r`<slot name="loading-options">
+						${f((e) => e._filteredOptions.length === 0, o`<div class="empty-message">
+								${f((e) => e.loading, o`<slot name="loading-options">
 										${(e) => e.locale.searchableSelect.loadingOptionsMessage}
 									</slot>`)}
-								${f((e) => !e.loading && e.searchText === "", r`<slot name="no-options">
+								${f((e) => !e.loading && e.searchText === "", o`<slot name="no-options">
 										${(e) => e.locale.searchableSelect.noOptionsMessage}
 									</slot>`)}
-								${f((e) => !e.loading && e.searchText !== "", r`<slot name="no-matches">
+								${f((e) => !e.loading && e.searchText !== "", o`<slot name="no-matches">
 										${(e) => e.locale.searchableSelect.noMatchesMessage}
 									</slot>`)}
 							</div>`)}
@@ -654,7 +658,7 @@ function ae(e) {
 }
 var oe = (e) => {
 	let t = e.tagFor(J, !0);
-	return r`
+	return o`
 		<template
 			:_optionTagTagName="${() => t}"
 			@mousedown="${(e, t) => e._onMouseDown(t.event)}"
@@ -664,9 +668,9 @@ var oe = (e) => {
 			</div>
 		</template>
 	`;
-}, se = ({ shape: e, connotation: t, disabled: n, removable: r }) => T("base", ["disabled", n], ["removable", r], [`shape-${e}`, !!e], [`connotation-${t}`, !!t]);
+}, se = ({ shape: e, connotation: t, disabled: n, removable: r, scale: i }) => C("base", ["disabled", n], ["removable", r], [`shape-${e}`, !!e], [`connotation-${t}`, !!t], [`size-${i}`, !!i]);
 function ce(e) {
-	return r`
+	return o`
 		<span
 			class="remove-button"
 			aria-label="${(e) => e.locale.searchableSelect.removeTagButtonLabel(e.label)}"
@@ -680,20 +684,20 @@ function ce(e) {
 }
 //#endregion
 //#region src/lib/searchable-select/index.ts
-o(a("searchable-select", q, oe, [
+i(s("searchable-select", q, oe, [
 	j,
 	N,
-	h,
-	a("option-tag", J, (e) => {
-		let t = e.tagFor(m);
-		return r`<span class="${se}" aria-disabled="${(e) => e.disabled}">
+	g,
+	s("option-tag", J, (e) => {
+		let t = e.tagFor(h);
+		return o`<span class="${se}" aria-disabled="${(e) => e.disabled}">
 		<slot name="icon" aria-hidden="true">
-			${f((e) => e.hasIconPlaceholder, r`<div class="icon-placeholder"></div>`)}
+			${f((e) => e.hasIconPlaceholder, o`<div class="icon-placeholder"></div>`)}
 		</slot>
-		${f((e) => e.label, (e) => r`<span class="label">${e.label}</span>`)}
+		${f((e) => e.label, (e) => o`<span class="label">${e.label}</span>`)}
 		${f((e) => e.removable, ce(t))}
 	</span>`;
-	}, [h], {
+	}, [g], {
 		styles: [H],
 		shadowOptions: { delegatesFocus: !0 }
 	}),

package/select/definition.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/definition2.cjs");
-const require_definition$1 = require("../unbundled/definition57.cjs");
-exports.VwcSelectElement = require_definition$1.Select;
-exports.registerSelect = require_definition$1.registerSelect;
-exports.selectDefinition = require_definition$1.selectDefinition;
+const require_definition = require("../unbundled/definition59.cjs");
+exports.VwcSelectElement = require_definition.Select;
+exports.registerSelect = require_definition.registerSelect;
+exports.selectDefinition = require_definition.selectDefinition;

package/select/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/definition2.js";
-import { n as selectDefinition, r as Select, t as registerSelect } from "../unbundled/definition57.js";
+import { n as selectDefinition, r as Select, t as registerSelect } from "../unbundled/definition59.js";
 export { Select as VwcSelectElement, registerSelect, selectDefinition };

package/select/index.cjs

@@ -1 +1 @@
-require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition18.cjs`).t();
+require(`../bundled/definition18.cjs`).t();

package/select/index.js

@@ -1,5 +1,3 @@
-import "../bundled/vivid-element.js";
-import "../bundled/definition2.js";
 import { t as e } from "../bundled/definition18.js";
 //#region src/lib/select/index.ts
 e();

package/selectable-box/definition.cjs

@@ -1,6 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../unbundled/definition2.cjs");
-const require_definition$1 = require("../unbundled/definition60.cjs");
-exports.VwcSelectableBoxElement = require_definition$1.SelectableBox;
-exports.registerSelectableBox = require_definition$1.registerSelectableBox;
-exports.selectableBoxDefinition = require_definition$1.selectableBoxDefinition;
+const require_definition = require("../unbundled/definition62.cjs");
+exports.VwcSelectableBoxElement = require_definition.SelectableBox;
+exports.registerSelectableBox = require_definition.registerSelectableBox;
+exports.selectableBoxDefinition = require_definition.selectableBoxDefinition;

package/selectable-box/definition.js

@@ -1,3 +1,2 @@
-import "../unbundled/definition2.js";
-import { n as selectableBoxDefinition, r as SelectableBox, t as registerSelectableBox } from "../unbundled/definition60.js";
+import { n as selectableBoxDefinition, r as SelectableBox, t as registerSelectableBox } from "../unbundled/definition62.js";
 export { SelectableBox as VwcSelectableBoxElement, registerSelectableBox, selectableBoxDefinition };

package/selectable-box/index.cjs

@@ -1,30 +1,30 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/enums.cjs`);require(`../bundled/definition2.cjs`);const r=require(`../bundled/decorate.cjs`),i=require(`../bundled/delegates-aria.cjs`),a=require(`../bundled/class-names.cjs`),o=require(`../bundled/definition15.cjs`),s=require(`../bundled/definition16.cjs`);var c=`: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)}`,l=class extends i.t(e.t){constructor(...e){super(...e),this.checked=!1,this.clickableBox=!1,this.controlPlacement=`end-stacked`,this.tight=!1,this.disabled=!1}_handleCheckedChange(){this.disabled||this.controlType===`radio`&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit(`change`))}_handleKeydown(e){return this.disabled?!0:(e.code===`Space`||e.code===`Enter`)&&this.clickableBox?this._handleCheckedChange():!0}};r.t([e.l({mode:`boolean`})],l.prototype,`checked`,void 0),r.t([e.l({attribute:`clickable-box`,mode:`boolean`})],l.prototype,`clickableBox`,void 0),r.t([e.l],l.prototype,`connotation`,void 0),r.t([e.l({attribute:`control-type`})],l.prototype,`controlType`,void 0),r.t([e.l({attribute:`control-placement`,mode:`fromView`})],l.prototype,`controlPlacement`,void 0),r.t([e.l({mode:`boolean`})],l.prototype,`tight`,void 0),r.t([e.l({mode:`boolean`})],l.prototype,`disabled`,void 0);var u=({connotation:e,tight:t,checked:n,clickableBox:r,controlPlacement:i,disabled:o})=>a.t(`base`,[`connotation-${e}`,!!e],[`tight`,t],[`selected`,n],[`clickable`,r],[`readonly`,!r],[`control-placement-${i}`,!!i],[`disabled`,o]);function d(e){e.clickableBox||e._handleCheckedChange()}function f(r){let a=r.tagFor(o.r);return e.d`${t.t(e=>e.controlType!==`radio`,e.d`
-		<${a}
-			${i.n({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/enums.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/definition15.cjs`),s=require(`../bundled/definition16.cjs`);var c=`: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)}`,l=class extends a.t(e.t){constructor(...e){super(...e),this.checked=!1,this.clickableBox=!1,this.controlPlacement=`end-stacked`,this.tight=!1,this.disabled=!1}_handleCheckedChange(){this.disabled||this.controlType===`radio`&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit(`change`))}_handleKeydown(e){return this.disabled?!0:(e.code===`Space`||e.code===`Enter`)&&this.clickableBox?this._handleCheckedChange():!0}};r.t([e.u({mode:`boolean`})],l.prototype,`checked`,void 0),r.t([e.u({attribute:`clickable-box`,mode:`boolean`})],l.prototype,`clickableBox`,void 0),r.t([e.u],l.prototype,`connotation`,void 0),r.t([e.u({attribute:`control-type`})],l.prototype,`controlType`,void 0),r.t([e.u({attribute:`control-placement`,mode:`fromView`})],l.prototype,`controlPlacement`,void 0),r.t([e.u({mode:`boolean`})],l.prototype,`tight`,void 0),r.t([e.u({mode:`boolean`})],l.prototype,`disabled`,void 0);var u=({connotation:e,tight:t,checked:n,clickableBox:r,controlPlacement:a,disabled:o})=>i.t(`base`,[`connotation-${e}`,!!e],[`tight`,t],[`selected`,n],[`clickable`,r],[`readonly`,!r],[`control-placement-${a}`,!!a],[`disabled`,o]);function d(e){e.clickableBox||e._handleCheckedChange()}function f(r){let i=r.tagFor(o.r);return e.f`${t.t(e=>e.controlType!==`radio`,e.f`
+		<${i}
+			${a.n({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
 			@change="${e=>d(e)}"
 			class="control checkbox ${e=>e.controlPlacement}"
 			connotation="${e=>e.connotation===`cta`?n.n.CTA:n.n.Accent}"
 			:checked="${e=>e.checked}"
 			?disabled="${e=>e.disabled}"
 			inert="${e=>e.clickableBox?!0:null}"
-		></${a}>`)} `}function p(r){let a=r.tagFor(s.r);return e.d`${t.t(e=>e.controlType===`radio`,e.d`
-		<${a}
-			${i.n({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
+		></${i}>`)} `}function p(r){let i=r.tagFor(s.r);return e.f`${t.t(e=>e.controlType===`radio`,e.f`
+		<${i}
+			${a.n({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
 			@change="${e=>d(e)}"
 			class="control radio ${e=>e.controlPlacement}"
 			connotation="${e=>e.connotation===`cta`?n.n.CTA:n.n.Accent}"
 			:checked="${e=>e.checked}"
 			?disabled="${e=>e.disabled}"
 			inert="${e=>e.clickableBox?!0:null}"
-		></${a}>`)} `}var m=e.o(`selectable-box`,l,t=>e.d`<template>
+		></${i}>`)} `}var m=e.s(`selectable-box`,l,t=>e.f`<template>
 		<div
 			class="${u}"
 			tabindex="${e=>e.clickableBox&&!e.disabled?`0`:null}"
-			${i.n({role:e=>e.clickableBox?`button`:null,ariaPressed:e=>e.clickableBox?e.checked?`true`:`false`:null,ariaLabel:e=>e.clickableBox?e.ariaLabel:null,ariaDisabled:e=>e.clickableBox&&e.disabled?`true`:null})}
+			${a.n({role:e=>e.clickableBox?`button`:null,ariaPressed:e=>e.clickableBox?e.checked?`true`:`false`:null,ariaLabel:e=>e.clickableBox?e.ariaLabel:null,ariaDisabled:e=>e.clickableBox&&e.disabled?`true`:null})}
 			@keydown="${(e,t)=>e._handleKeydown(t.event)}"
 			@click="${e=>e.clickableBox?e._handleCheckedChange():null}"
 		>
 			${f(t)} ${p(t)}
 			<slot></slot>
 		</div>
-	</template>`,[o.t,s.t],{styles:c,shadowOptions:{delegatesFocus:!0}});e.s(m)();
+	</template>`,[o.t,s.t],{styles:c,shadowOptions:{delegatesFocus:!0}});e.c(m)();

package/selectable-box/index.js

@@ -1,14 +1,13 @@
-import { d as e, l as t, o as n, s as r, t as i } from "../bundled/vivid-element.js";
+import { c as e, f as t, s as n, t as r, u as i } from "../bundled/vivid-element.js";
 import { t as a } from "../bundled/when.js";
 import { n as o } from "../bundled/enums.js";
-import "../bundled/definition2.js";
 import { t as s } from "../bundled/decorate.js";
-import { n as c, t as l } from "../bundled/delegates-aria.js";
-import { t as u } from "../bundled/class-names.js";
+import { t as c } from "../bundled/class-names.js";
+import { n as l, t as u } from "../bundled/delegates-aria.js";
 import { r as d, t as f } from "../bundled/definition15.js";
 import { r as p, t as m } from "../bundled/definition16.js";
 //#region src/lib/selectable-box/selectable-box.scss?inline
-var h = ":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)}", g = class extends l(i) {
+var h = ":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)}", g = class extends u(r) {
 	constructor(...e) {
 		super(...e), this.checked = !1, this.clickableBox = !1, this.controlPlacement = "end-stacked", this.tight = !1, this.disabled = !1;
 	}
@@ -19,24 +18,24 @@ var h = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:
 		return this.disabled ? !0 : (e.code === "Space" || e.code === "Enter") && this.clickableBox ? this._handleCheckedChange() : !0;
 	}
 };
-s([t({ mode: "boolean" })], g.prototype, "checked", void 0), s([t({
+s([i({ mode: "boolean" })], g.prototype, "checked", void 0), s([i({
 	attribute: "clickable-box",
 	mode: "boolean"
-})], g.prototype, "clickableBox", void 0), s([t], g.prototype, "connotation", void 0), s([t({ attribute: "control-type" })], g.prototype, "controlType", void 0), s([t({
+})], g.prototype, "clickableBox", void 0), s([i], g.prototype, "connotation", void 0), s([i({ attribute: "control-type" })], g.prototype, "controlType", void 0), s([i({
 	attribute: "control-placement",
 	mode: "fromView"
-})], g.prototype, "controlPlacement", void 0), s([t({ mode: "boolean" })], g.prototype, "tight", void 0), s([t({ mode: "boolean" })], g.prototype, "disabled", void 0);
+})], g.prototype, "controlPlacement", void 0), s([i({ mode: "boolean" })], g.prototype, "tight", void 0), s([i({ mode: "boolean" })], g.prototype, "disabled", void 0);
 //#endregion
 //#region src/lib/selectable-box/selectable-box.template.ts
-var _ = ({ connotation: e, tight: t, checked: n, clickableBox: r, controlPlacement: i, disabled: a }) => u("base", [`connotation-${e}`, !!e], ["tight", t], ["selected", n], ["clickable", r], ["readonly", !r], [`control-placement-${i}`, !!i], ["disabled", a]);
+var _ = ({ connotation: e, tight: t, checked: n, clickableBox: r, controlPlacement: i, disabled: a }) => c("base", [`connotation-${e}`, !!e], ["tight", t], ["selected", n], ["clickable", r], ["readonly", !r], [`control-placement-${i}`, !!i], ["disabled", a]);
 function v(e) {
 	e.clickableBox || e._handleCheckedChange();
 }
-function y(t) {
-	let n = t.tagFor(d);
-	return e`${a((e) => e.controlType !== "radio", e`
+function y(e) {
+	let n = e.tagFor(d);
+	return t`${a((e) => e.controlType !== "radio", t`
 		<${n}
-			${c({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
+			${l({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
 			@change="${(e) => v(e)}"
 			class="control checkbox ${(e) => e.controlPlacement}"
 			connotation="${(e) => e.connotation === "cta" ? o.CTA : o.Accent}"
@@ -45,11 +44,11 @@ function y(t) {
 			inert="${(e) => e.clickableBox ? !0 : null}"
 		></${n}>`)} `;
 }
-function b(t) {
-	let n = t.tagFor(p);
-	return e`${a((e) => e.controlType === "radio", e`
+function b(e) {
+	let n = e.tagFor(p);
+	return t`${a((e) => e.controlType === "radio", t`
 		<${n}
-			${c({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
+			${l({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
 			@change="${(e) => v(e)}"
 			class="control radio ${(e) => e.controlPlacement}"
 			connotation="${(e) => e.connotation === "cta" ? o.CTA : o.Accent}"
@@ -60,11 +59,11 @@ function b(t) {
 }
 //#endregion
 //#region src/lib/selectable-box/index.ts
-r(n("selectable-box", g, (t) => e`<template>
+e(n("selectable-box", g, (e) => t`<template>
 		<div
 			class="${_}"
 			tabindex="${(e) => e.clickableBox && !e.disabled ? "0" : null}"
-			${c({
+			${l({
 	role: (e) => e.clickableBox ? "button" : null,
 	ariaPressed: (e) => e.clickableBox ? e.checked ? "true" : "false" : null,
 	ariaLabel: (e) => e.clickableBox ? e.ariaLabel : null,
@@ -73,7 +72,7 @@ r(n("selectable-box", g, (t) => e`<template>
 			@keydown="${(e, t) => e._handleKeydown(t.event)}"
 			@click="${(e) => e.clickableBox ? e._handleCheckedChange() : null}"
 		>
-			${y(t)} ${b(t)}
+			${y(e)} ${b(e)}
 			<slot></slot>
 		</div>
 	</template>`, [f, m], {