@vonage/vivid 5.28.1 → 5.29.0

package/bundled/definition17.cjs

@@ -18,4 +18,4 @@ const e=require("./vivid-element.cjs"),t=require("./when.cjs"),n=require("./clas
 				${t.t(e=>e._displayCheckmark&&e.selected,e.p`<${u} class="checkmark" name="check-line"></${u}>`)}
 			</div>
 		</template>
-	`},[r.t],{styles:`:host([disabled]){cursor:not-allowed}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-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:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}`}),u=e.d(l);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});
+	`},[r.t],{styles:`:host([disabled]){cursor:not-allowed}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-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:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text-primary{-webkit-line-clamp:var(--option-text-line-clamp,initial)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--option-text-secondary-line-clamp,initial)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}`}),u=e.d(l);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});

package/bundled/definition17.js

@@ -40,6 +40,6 @@ var p = n("option", d, (e) => {
 			</div>
 		</template>
 	`;
-}, [a], { styles: ":host([disabled]){cursor:not-allowed}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-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:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" }), m = e(p);
+}, [a], { styles: ":host([disabled]){cursor:not-allowed}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-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:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.text-primary{-webkit-line-clamp:var(--option-text-line-clamp,initial)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--option-text-secondary-line-clamp,initial)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}" }), m = e(p);
 //#endregion
 export { m as n, p as t };

package/bundled/definition18.cjs

@@ -13,4 +13,4 @@ const e=require("./vivid-element.cjs"),t=require("./slotted.cjs"),n=require("./h
 				</div>
 			</div>
 		</template>
-	`,[],{styles:`:host{display:block}.base{flex-direction:column;display:flex}slot[name=label]{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed-bold);user-select:none;padding-block:8px 4px;padding-inline:8px;display:flex}.options{flex-direction:column;gap:2px;display:flex}`}),a=e.d(i);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});
+	`,[],{styles:`:host{display:block}.base{flex-direction:column;display:flex}slot[name=label]{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed-bold);user-select:none;padding-block:8px 4px;padding-inline:16px 8px;display:flex}.options{flex-direction:column;gap:2px;display:flex}`}),a=e.d(i);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});

package/bundled/definition18.js

@@ -22,6 +22,6 @@ var o = n("optgroup", a, () => t`
 				</div>
 			</div>
 		</template>
-	`, [], { styles: ":host{display:block}.base{flex-direction:column;display:flex}slot[name=label]{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed-bold);user-select:none;padding-block:8px 4px;padding-inline:8px;display:flex}.options{flex-direction:column;gap:2px;display:flex}" }), s = e(o);
+	`, [], { styles: ":host{display:block}.base{flex-direction:column;display:flex}slot[name=label]{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed-bold);user-select:none;padding-block:8px 4px;padding-inline:16px 8px;display:flex}.options{flex-direction:column;gap:2px;display:flex}" }), s = e(o);
 //#endregion
 export { s as n, o as t };

package/bundled/definition25.cjs

@@ -21,10 +21,10 @@ const e=require("./vivid-element.cjs"),t=require("./slotted.cjs"),n=require("./r
 						>`)}
 				</span>
 
-				<span class="meta">
-					<slot name="meta" ${t.t(`_metaSlottedContent`)}></slot>
-					${r.t(e=>e.meta&&!e._metaSlottedContent?.length,e.p`${e=>e.meta}`)}
-				</span>
+				${r.t(e=>e.meta||e._metaSlottedContent?.length,e.p`<span class="meta">
+						<slot name="meta" ${t.t(`_metaSlottedContent`)}></slot>
+						${r.t(e=>e.meta&&!e._metaSlottedContent?.length,e.p`${e=>e.meta}`)}
+					</span>`)}
 
 				${e=>e.icon&&e.iconTrailing?c(e.icon):null}
 				${e=>!(e.icon&&e.iconTrailing)&&!e.noIndicator?c(e.expanded?`chevron-up-line`:`chevron-down-line`):null}

package/bundled/definition25.js

@@ -60,10 +60,10 @@ var x = (e, t) => {
 						>`)}
 				</span>
 
-				<span class="meta">
-					<slot name="meta" ${c("_metaSlottedContent")}></slot>
-					${u((e) => e.meta && !e._metaSlottedContent?.length, a`${(e) => e.meta}`)}
-				</span>
+				${u((e) => e.meta || e._metaSlottedContent?.length, a`<span class="meta">
+						<slot name="meta" ${c("_metaSlottedContent")}></slot>
+						${u((e) => e.meta && !e._metaSlottedContent?.length, a`${(e) => e.meta}`)}
+					</span>`)}
 
 				${(e) => e.icon && e.iconTrailing ? n(e.icon) : null}
 				${(e) => !(e.icon && e.iconTrailing) && !e.noIndicator ? n(e.expanded ? "chevron-up-line" : "chevron-down-line") : null}

package/bundled/definition5.cjs

@@ -1,4 +1,4 @@
-const e=require("./localized.cjs"),t=require("./vivid-element.cjs"),n=require("./ref.cjs"),r=require("./when.cjs"),i=require("./enums.cjs"),a=require("./decorate.cjs"),o=require("./class-names.cjs"),s=require("./definition2.cjs"),c=require("./icon.cjs"),l=require("./affix.cjs"),u=require("./definition4.cjs"),d=require("./delegates-aria.cjs"),f=require("./component-enum.cjs"),p=require("./button.cjs"),m=require("./linkable.cjs");var h=f.t([`accent`,`announcement`,`cta`,`success`,`alert`],`accent`),g=f.t([`filled`,`outlined`,`ghost`,`ghost-light`,`outlined-light`],`ghost`),_=class extends l.n(e.t(m.t(p.t))){constructor(){super(),this.stacked=!1,this.pending=!1,this.dropdownIndicator=!1,this.active=!1,this.pressed=!1,this.title=``}clickHandler(e){if(this.disabled||this.pending){e.preventDefault(),e.stopImmediatePropagation();return}return!0}};a.t([t.m({converter:{fromView:e=>e||null,toView:e=>e||null}})],_.prototype,`title`,void 0),a.t([t.m],_.prototype,`connotation`,void 0),a.t([t.m],_.prototype,`shape`,void 0),a.t([t.m],_.prototype,`appearance`,void 0),a.t([t.m],_.prototype,`size`,void 0),a.t([t.m({mode:`boolean`,attribute:`stacked`})],_.prototype,`stacked`,void 0),a.t([t.m({mode:`boolean`,attribute:`pending`})],_.prototype,`pending`,void 0),a.t([t.m({mode:`boolean`,attribute:`dropdown-indicator`})],_.prototype,`dropdownIndicator`,void 0),a.t([t.m({mode:`boolean`,attribute:`active`})],_.prototype,`active`,void 0),a.t([t.m({mode:`boolean`,attribute:`pressed`})],_.prototype,`pressed`,void 0),a.t([t.m],_.prototype,`label`,void 0);var v=`.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)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}.control{user-select:none}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{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))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}`,y=e=>{let n=e.tagFor(c.t);return t.p`<${n} class="chevron" aria-hidden="true" name="chevron-down-line"></${n}>`};function b(e){let t=g.parse(e.appearance);if(e.pressed){if(t===`ghost`)return`subtle`;if(t===`ghost-light`)return`subtle-light`;if(t===`outlined`)return`filled`}return t}var x=e=>o.t(`control`,`connotation-${h.parse(e.connotation)}`,`appearance-${b(e)}`,`with-idle`,`with-hover`,`with-active`,`with-disabled`,[`disabled`,e.disabled||e.pending],[`shape-${e.shape}`,!!e.shape],[`size-${e.size}`,!!e.size],[`icon-only`,!e.label&&!!(e.icon||e.iconSlottedContent?.length)&&!e.dropdownIndicator],[`icon-trailing`,e.iconTrailing],[`stacked`,e.stacked],[`active`,e.ariaExpanded===`true`||e.active]);function S(e,n,r,a=i.a.Normal){if(r){let r=e.tagFor(u.r),s={[i.a.SuperCondensed]:`-7`,[i.a.Condensed]:`-6`,[i.a.Normal]:`-5`,[i.a.Expanded]:`-4`};return t.p`<span class="${e=>{let t=e.querySelector(`[slot="icon"]`);return o.t(`icon`,`pending`,[`pending-no-icon`,!(n||t)])}}" aria-hidden="true"><${r} size="${s[a]}"></${r}></span>`}return l.a(e)(n,l.i.Slot)}var C=e=>[`submit`,`button`,`reset`].indexOf(e)>-1?e:`submit`,w=e=>{let n=y(e);return t.p`<span class="content">
+const e=require("./localized.cjs"),t=require("./vivid-element.cjs"),n=require("./ref.cjs"),r=require("./when.cjs"),i=require("./enums.cjs"),a=require("./decorate.cjs"),o=require("./class-names.cjs"),s=require("./definition2.cjs"),c=require("./icon.cjs"),l=require("./affix.cjs"),u=require("./definition4.cjs"),d=require("./delegates-aria.cjs"),f=require("./component-enum.cjs"),p=require("./button.cjs"),m=require("./linkable.cjs");var h=f.t([`accent`,`announcement`,`cta`,`success`,`alert`],`accent`),g=f.t([`filled`,`outlined`,`ghost`,`ghost-light`,`outlined-light`],`ghost`),_=class extends l.n(e.t(m.t(p.t))){constructor(){super(),this.stacked=!1,this.pending=!1,this.dropdownIndicator=!1,this.active=!1,this.pressed=!1,this.title=``}clickHandler(e){if(this.disabled||this.pending){e.preventDefault(),e.stopImmediatePropagation();return}return!0}};a.t([t.m({converter:{fromView:e=>e||null,toView:e=>e||null}})],_.prototype,`title`,void 0),a.t([t.m],_.prototype,`connotation`,void 0),a.t([t.m],_.prototype,`shape`,void 0),a.t([t.m],_.prototype,`appearance`,void 0),a.t([t.m],_.prototype,`size`,void 0),a.t([t.m({mode:`boolean`,attribute:`stacked`})],_.prototype,`stacked`,void 0),a.t([t.m({mode:`boolean`,attribute:`pending`})],_.prototype,`pending`,void 0),a.t([t.m({mode:`boolean`,attribute:`dropdown-indicator`})],_.prototype,`dropdownIndicator`,void 0),a.t([t.m({mode:`boolean`,attribute:`active`})],_.prototype,`active`,void 0),a.t([t.m({mode:`boolean`,attribute:`pressed`})],_.prototype,`pressed`,void 0),a.t([t.m],_.prototype,`label`,void 0);var v=`.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)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}.control.disabled.appearance-ghost{color:var(--_picker-field-disabled-icon-color,var(--_appearance-color-text))}.control{user-select:none}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{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))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}`,y=e=>{let n=e.tagFor(c.t);return t.p`<${n} class="chevron" aria-hidden="true" name="chevron-down-line"></${n}>`};function b(e){let t=g.parse(e.appearance);if(e.pressed){if(t===`ghost`)return`subtle`;if(t===`ghost-light`)return`subtle-light`;if(t===`outlined`)return`filled`}return t}var x=e=>o.t(`control`,`connotation-${h.parse(e.connotation)}`,`appearance-${b(e)}`,`with-idle`,`with-hover`,`with-active`,`with-disabled`,[`disabled`,e.disabled||e.pending],[`shape-${e.shape}`,!!e.shape],[`size-${e.size}`,!!e.size],[`icon-only`,!e.label&&!!(e.icon||e.iconSlottedContent?.length)&&!e.dropdownIndicator],[`icon-trailing`,e.iconTrailing],[`stacked`,e.stacked],[`active`,e.ariaExpanded===`true`||e.active]);function S(e,n,r,a=i.a.Normal){if(r){let r=e.tagFor(u.r),s={[i.a.SuperCondensed]:`-7`,[i.a.Condensed]:`-6`,[i.a.Normal]:`-5`,[i.a.Expanded]:`-4`};return t.p`<span class="${e=>{let t=e.querySelector(`[slot="icon"]`);return o.t(`icon`,`pending`,[`pending-no-icon`,!(n||t)])}}" aria-hidden="true"><${r} size="${s[a]}"></${r}></span>`}return l.a(e)(n,l.i.Slot)}var C=e=>[`submit`,`button`,`reset`].indexOf(e)>-1?e:`submit`,w=e=>{let n=y(e);return t.p`<span class="content">
 			${t=>S(e,t.icon,t.pending,t.size)}
 			${r.t(e=>e.label,t.p`<span class="text" aria-hidden="true">${e=>e.label}</span>`)}
 			<span class="sr-only"

package/bundled/definition5.js

@@ -60,7 +60,7 @@ c([n({ converter: {
 })], C.prototype, "pressed", void 0), c([n], C.prototype, "label", void 0);
 //#endregion
 //#region src/lib/button/button.scss?inline
-var w = ".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)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}.control{user-select:none}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{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))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}", T = (e) => {
+var w = ".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)}:host{--_vvd-button-accent-firm-wrapper:var(--vvd-button-accent-firm);--_vvd-button-cta-firm-wrapper:var(--vvd-button-cta-firm);--_vvd-button-success-firm-wrapper:var(--vvd-button-success-firm);--_vvd-button-alert-firm-wrapper:var(--vvd-button-alert-firm);--_vvd-button-announcement-firm-wrapper:var(--vvd-button-announcement-firm)}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm:var(--_vvd-button-accent-firm-wrapper,var(--vvd-button-accent-primary));--vvd-button-cta-firm:var(--_vvd-button-cta-firm-wrapper,var(--vvd-button-cta-primary));--vvd-button-success-firm:var(--_vvd-button-success-firm-wrapper,var(--vvd-button-success-primary));--vvd-button-alert-firm:var(--_vvd-button-alert-firm-wrapper,var(--vvd-button-alert-primary));--vvd-button-announcement-firm:var(--_vvd-button-announcement-firm-wrapper,var(--vvd-button-announcement-primary))}:host{display:inline-block}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;border-radius:var(--_button-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);justify-content:space-between;align-items:center;gap:var(--_button-icon-gap);vertical-align:middle;border:0;margin:0;text-decoration:none;display:inline-flex}.control .text{-webkit-line-clamp:var(--button-line-clamp,1);text-align:start;-webkit-box-orient:vertical;max-inline-size:100%;display:-webkit-box;overflow:hidden}.control:not(.icon-only){inline-size:100%}.control:not(.disabled){cursor:var(--button-cursor,pointer)}.control.disabled{cursor:not-allowed}.control.disabled.appearance-ghost{color:var(--_picker-field-disabled-icon-color,var(--_appearance-color-text))}.control{user-select:none}.control:not(.stacked).size-super-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control:not(.stacked).size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-super-condensed:not(.icon-only){padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:8px;--_button-chevron-size:12px}.control:not(.stacked).size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-condensed:not(.icon-only){padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control:not(.stacked).size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked).size-expanded:not(.icon-only){padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control:not(.shape-pill){--_button-border-radius:8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius:4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius:24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius:16px}.control.shape-pill.stacked.size-normal{--_button-border-radius:20px}.control.shape-pill.icon-only{--_button-border-radius:50%}.control.stacked.size-super-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_button-block-size:calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:4px;--_button-chevron-size:10px}.control.stacked.size-super-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-super-condensed:not(.icon-only){padding-inline:16px}.control.stacked.size-condensed{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_button-block-size:calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold);--_button-icon-gap:6px;--_button-chevron-size:12px}.control.stacked.size-condensed.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-condensed:not(.icon-only){padding-inline:12px}.control.stacked.size-expanded{--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_button-block-size:calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold);--_button-icon-gap:10px;--_button-chevron-size:16px}.control.stacked.size-expanded.icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked.size-expanded:not(.icon-only){padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_button-block-size:calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold);--_button-icon-gap:8px;--_button-chevron-size:16px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed).icon-only{padding-inline:calc(var(--_button-block-size) / 4)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){padding-inline:16px}.control.appearance-filled{--focus-stroke-gap-color:transparent}.control.appearance-filled:focus-visible{outline:none;position:relative}.control.appearance-filled:focus-visible:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:not(.appearance-filled):focus-visible{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))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}.control.stacked slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked) slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}.chevron{font-size:var(--_button-chevron-size)}.content{justify-content:center;align-items:center;gap:var(--_button-icon-gap);flex:1;display:flex;overflow:hidden}.control.stacked .content{flex-direction:column}:host([dropdown-indicator]) .content{justify-content:var(--button-content-alignment,flex-start);text-align:start}:host([dropdown-indicator][stacked]) .content{align-items:var(--button-content-alignment,flex-start);justify-content:center}.pending-no-icon{position:absolute}.pending-no-icon+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}", T = (e) => {
 	let t = e.tagFor(d);
 	return r`<${t} class="chevron" aria-hidden="true" name="chevron-down-line"></${t}>`;
 };

package/bundled/numberConverter.cjs

@@ -1,4 +1,4 @@
-var e={name:`@vonage/vivid-icons`,version:`4.12.0`,type:`module`,exports:{".":{types:`./dist/index.d.ts`,default:`./dist/index.mjs`},"./package.json":`./package.json`},files:[`dist`],scripts:{build:`vite build`,fetch:`tsx scripts/fetch-icons.ts`,lint:`eslint . --max-warnings=0`,"lint:fix":`eslint . --max-warnings=0 --fix`,typecheck:`tsc --noEmit`},dependencies:{"@microsoft/fast-element":`catalog:`},devDependencies:{"@figma/rest-api-spec":`catalog:`,"@repo/eslint-config":`workspace:*`,"@repo/fetch-icons":`workspace:*`,"@repo/typescript-config":`workspace:*`,"@repo/utils":`workspace:*`,"@repo/vite-config":`workspace:*`,"@types/node":`catalog:`,dotenv:`catalog:`,eslint:`catalog:`,tsx:`catalog:`,typescript:`catalog:`,vite:`catalog:`,"vite-plugin-dts":`catalog:`}},t=`https://icon.resources.vonage.com`,n=e.version;`${t}${n}`;var r=(e,n)=>[t,`v${n}`,e].join(`/`),i=({ok:e,headers:t})=>{if(!e||t.get(`content-type`)!==`image/svg+xml`)throw Error(`Something went wrong`)},a=e=>(i(e),e.text()),o=(e,t)=>fetch(r(`${e}.svg`,n),{signal:t}).then(a),s=e=>(e??``).trim(),c=new Map,l=(e,t)=>{let n=s(e);if(!n)return Promise.resolve(``);let r=c.get(n);if(r&&!r.signal?.aborted)return r.promise;let i=o(n,t).then(e=>{let r=c.get(n);if(r&&r.promise===i&&t.aborted)throw c.delete(n),t.reason??new DOMException(`Aborted`,`AbortError`);return e}).catch(e=>{let t=c.get(n);throw t&&t.promise===i&&c.delete(n),e});return c.set(n,{promise:i,signal:t}),i},u={toView(e){return e===void 0?null:e.toString()},fromView(e){if(typeof e==`string`&&(e=parseFloat(e)),typeof e==`number`)return isNaN(e)||!isFinite(e)?void 0:e}};Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return`<svg width="80%" height="80%" viewBox="0 0 64 64">
+var e={name:`@vonage/vivid-icons`,version:`4.13.0`,type:`module`,exports:{".":{types:`./dist/index.d.ts`,default:`./dist/index.mjs`},"./package.json":`./package.json`},files:[`dist`],scripts:{build:`vite build`,fetch:`tsx scripts/fetch-icons.ts`,lint:`eslint . --max-warnings=0`,"lint:fix":`eslint . --max-warnings=0 --fix`,typecheck:`tsc --noEmit`},dependencies:{"@microsoft/fast-element":`catalog:`},devDependencies:{"@figma/rest-api-spec":`catalog:`,"@repo/eslint-config":`workspace:*`,"@repo/fetch-icons":`workspace:*`,"@repo/typescript-config":`workspace:*`,"@repo/utils":`workspace:*`,"@repo/vite-config":`workspace:*`,"@types/node":`catalog:`,dotenv:`catalog:`,eslint:`catalog:`,tsx:`catalog:`,typescript:`catalog:`,vite:`catalog:`,"vite-plugin-dts":`catalog:`}},t=`https://icon.resources.vonage.com`,n=e.version;`${t}${n}`;var r=(e,n)=>[t,`v${n}`,e].join(`/`),i=({ok:e,headers:t})=>{if(!e||t.get(`content-type`)!==`image/svg+xml`)throw Error(`Something went wrong`)},a=e=>(i(e),e.text()),o=(e,t)=>fetch(r(`${e}.svg`,n),{signal:t}).then(a),s=e=>(e??``).trim(),c=new Map,l=(e,t)=>{let n=s(e);if(!n)return Promise.resolve(``);let r=c.get(n);if(r&&!r.signal?.aborted)return r.promise;let i=o(n,t).then(e=>{let r=c.get(n);if(r&&r.promise===i&&t.aborted)throw c.delete(n),t.reason??new DOMException(`Aborted`,`AbortError`);return e}).catch(e=>{let t=c.get(n);throw t&&t.promise===i&&c.delete(n),e});return c.set(n,{promise:i,signal:t}),i},u={toView(e){return e===void 0?null:e.toString()},fromView(e){if(typeof e==`string`&&(e=parseFloat(e)),typeof e==`number`)return isNaN(e)||!isFinite(e)?void 0:e}};Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return`<svg width="80%" height="80%" viewBox="0 0 64 64">
     <g>
         <g stroke-width="6" stroke-linecap="round" fill="none">
             <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">

package/bundled/numberConverter.js

@@ -1,7 +1,7 @@
 //#region src/shared/icon/icon-placeholder.ts
 var e = "<svg width=\"80%\" height=\"80%\" viewBox=\"0 0 64 64\">\n    <g>\n        <g stroke-width=\"6\" stroke-linecap=\"round\" fill=\"none\">\n            <path stroke=\"currentColor\" d=\"M4,32 c0,15,12,28,28,28c8,0,16-4,21-9\">\n            </path>\n            <path d=\"M60,32 C60,16,47.464,4,32,4S4,16,4,32\">\n            </path>\n            <animateTransform values=\"0,32,32;360,32,32\" attributeName=\"transform\" type=\"rotate\" repeatCount=\"indefinite\" dur=\"750ms\">\n            </animateTransform>\n        </g>\n    </g>\n</svg>", t = {
 	name: "@vonage/vivid-icons",
-	version: "4.12.0",
+	version: "4.13.0",
 	type: "module",
 	exports: {
 		".": {

package/bundled/picker-field.template.cjs

@@ -1,8 +1,9 @@
-const e=require("./localized.cjs"),t=require("./vivid-element.cjs"),n=require("./slotted.cjs"),r=require("./ref.cjs"),i=require("./decorate.cjs"),a=require("./class-names.cjs"),o=require("./form-associated.cjs"),s=require("./definition5.cjs"),c=require("./definition7.cjs"),l=require("./dialog.cjs"),u=require("./form-element.cjs"),d=require("./with-contextual-help.cjs"),f=require("./with-error-text.cjs"),p=require("./mixins.cjs"),m=require("./definition11.cjs"),h=require("./trapped-focus.cjs");var g=`:host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}`,_=class extends d.t(p.t(f.t(u.t(h.t(e.t(o.n(t.t))))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}constructor(){super(),this.readOnly=!1,this.#e=()=>{this.$emit(`focus`,void 0,{bubbles:!1})},this.#t=()=>{this.$emit(`blur`,void 0,{bubbles:!1})},this.proxy=document.createElement(`input`),this.#n={handleChange:()=>{this._updatePresentationValue()}},this._popupOpen=!1,this.#o=e=>{if(!this._popupOpen)return;let t=e.composedPath();[this._dialogEl,this._pickerButtonEl].some(e=>t.includes(e))||this._closePopup(!1)},this._presentationValue=``,this.value=``}connectedCallback(){super.connectedCallback(),document.addEventListener(`click`,this.#o),this.addEventListener(`focusin`,this.#e),this.addEventListener(`focusout`,this.#t),this.#i()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this.#o),this.removeEventListener(`focusin`,this.#e),this.removeEventListener(`focusout`,this.#t),this.#a()}#e;#t;validate(){this.proxy&&this.proxy.setCustomValidity(this._getCustomValidationError()??``),super.validate(this._textFieldEl?.querySelector(`input`)??void 0)}#n;#r;#i(){this.#r=t.k.binding(()=>this.locale,this.#n),this.#r.observe(this,t.O.default)}#a(){this.#r.dispose()}#o;#s(){this.readOnly||(this._popupOpen=!0)}_closePopup(e=!0){this._popupOpen=!1,e&&this._textFieldEl.focus()}_onBaseKeyDown(e){return this._popupOpen&&l.t(e)?(this._closePopup(),!1):!this._trappedFocus(e,()=>this._focusableElsWithinDialog())}_presentationValueChanged(){this.dirtyValue=!0,this.validate()}_onTextFieldInput(e){let t=e.currentTarget;this._presentationValue=t.value}_onPickerButtonClick(){this._popupOpen?this._closePopup():this.#s()}_onOkClick(){this._closePopup()}_onClearClick(){this.$emit(`clear-click`)}};i.t([t.m()],_.prototype,`scale`,void 0),i.t([t.m({attribute:`readonly`,mode:`boolean`})],_.prototype,`readOnly`,void 0),i.t([t.A],_.prototype,`_popupOpen`,void 0),i.t([t.A],_.prototype,`_presentationValue`,void 0);var v=(e,i,{withSeparator:o,padded:l})=>{let u=e.tagFor(c.i),d=e.tagFor(m.r),f=e.tagFor(s.i);return t.p`
+const e=require("./localized.cjs"),t=require("./vivid-element.cjs"),n=require("./slotted.cjs"),r=require("./ref.cjs"),i=require("./decorate.cjs"),a=require("./class-names.cjs"),o=require("./component-enum.cjs"),s=require("./form-associated.cjs"),c=require("./definition5.cjs"),l=require("./definition7.cjs"),u=require("./dialog.cjs"),d=require("./form-element.cjs"),f=require("./with-contextual-help.cjs"),p=require("./with-error-text.cjs"),m=require("./mixins.cjs"),h=require("./definition11.cjs"),g=require("./trapped-focus.cjs");var _=`:host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.picker-button-icon[disabled],.picker-button-icon[readonly]{--_picker-field-disabled-icon-color:var(--vvd-color-neutral-600)}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}`,v=o.t([`fieldset`,`ghost`],`fieldset`),y=class extends f.t(m.t(p.t(d.t(g.t(e.t(s.n(t.t))))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}constructor(){super(),this.readOnly=!1,this.#e=()=>{this.$emit(`focus`,void 0,{bubbles:!1})},this.#t=()=>{this.$emit(`blur`,void 0,{bubbles:!1})},this.proxy=document.createElement(`input`),this.#n={handleChange:()=>{this._updatePresentationValue()}},this._popupOpen=!1,this.#o=e=>{if(!this._popupOpen)return;let t=e.composedPath();[this._dialogEl,this._pickerButtonEl].some(e=>t.includes(e))||this._closePopup(!1)},this._presentationValue=``,this.value=``}connectedCallback(){super.connectedCallback(),document.addEventListener(`click`,this.#o),this.addEventListener(`focusin`,this.#e),this.addEventListener(`focusout`,this.#t),this.#i()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this.#o),this.removeEventListener(`focusin`,this.#e),this.removeEventListener(`focusout`,this.#t),this.#a()}#e;#t;validate(){this.proxy&&this.proxy.setCustomValidity(this._getCustomValidationError()??``),super.validate(this._textFieldEl?.querySelector(`input`)??void 0)}#n;#r;#i(){this.#r=t.k.binding(()=>this.locale,this.#n),this.#r.observe(this,t.O.default)}#a(){this.#r.dispose()}#o;#s(){this.readOnly||(this._popupOpen=!0)}_closePopup(e=!0){this._popupOpen=!1,e&&this._textFieldEl.focus()}_onBaseKeyDown(e){return this._popupOpen&&u.t(e)?(this._closePopup(),!1):!this._trappedFocus(e,()=>this._focusableElsWithinDialog())}_presentationValueChanged(){this.dirtyValue=!0,this.validate()}_onTextFieldInput(e){let t=e.currentTarget;this._presentationValue=t.value}_onPickerButtonClick(){this._popupOpen?this._closePopup():this.#s()}_onOkClick(){this._closePopup()}_onClearClick(){this.$emit(`clear-click`)}};i.t([t.m()],y.prototype,`scale`,void 0),i.t([t.m({attribute:`readonly`,mode:`boolean`})],y.prototype,`readOnly`,void 0),i.t([t.m],y.prototype,`appearance`,void 0),i.t([t.A],y.prototype,`_popupOpen`,void 0),i.t([t.A],y.prototype,`_presentationValue`,void 0);var b=(e,i,{withSeparator:o,padded:s})=>{let u=e.tagFor(l.i),d=e.tagFor(h.r),f=e.tagFor(c.i);return t.p`
 		<div class='base' @keydown='${(e,{event:t})=>e._onBaseKeyDown(t)}'>
 			<${d} id='text-field'
 				${r.t(`_textFieldEl`)}
 				class='control'
+				appearance='${e=>v.parse(e.appearance)}'
 				label='${e=>e.label}'
 				helper-text='${e=>e.helperText}'
 				error-text='${e=>e.errorValidationMessage}'
@@ -27,6 +28,7 @@ const e=require("./localized.cjs"),t=require("./vivid-element.cjs"),n=require(".
 				></slot>
 				<${f}
 					id='picker-button'
+					class="picker-button-icon"
 					${r.t(`_pickerButtonEl`)}
 					slot='action-items'
 					size='condensed'
@@ -43,7 +45,7 @@ const e=require("./localized.cjs"),t=require("./vivid-element.cjs"),n=require(".
 				offset='${e=>e._helperTextSlottedContent?.length||e.helperText||e.errorValidationMessage?8:null}'
 				placement='bottom-start'
 				class='popup'>
-				<div class="${()=>a.t(`dialog`,[`dialog--padded`,l])}" role='dialog' ${r.t(`_dialogEl`)} aria-modal='true' aria-label='${e=>e._dialogLabel}'>
+				<div class="${()=>a.t(`dialog`,[`dialog--padded`,s])}" role='dialog' ${r.t(`_dialogEl`)} aria-modal='true' aria-label='${e=>e._dialogLabel}'>
 					${()=>i}
 					<div class="${()=>a.t(`footer`,[`footer--with-separator`,o])}">
 						<${f}
@@ -65,4 +67,4 @@ const e=require("./localized.cjs"),t=require("./vivid-element.cjs"),n=require(".
 					</div>
 				</div>
 			</${u}>
-		</div>`};Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return v}});
+		</div>`};Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return b}});

package/bundled/picker-field.template.js

@@ -4,18 +4,19 @@ import { t as s } from "./slotted.js";
 import { t as c } from "./ref.js";
 import { t as l } from "./decorate.js";
 import { t as u } from "./class-names.js";
-import { n as d } from "./form-associated.js";
-import { i as f } from "./definition5.js";
-import { i as p } from "./definition7.js";
-import { t as m } from "./dialog.js";
-import { t as h } from "./form-element.js";
-import { t as g } from "./with-contextual-help.js";
-import { t as _ } from "./with-error-text.js";
-import { t as v } from "./mixins.js";
-import { r as y } from "./definition11.js";
-import { t as b } from "./trapped-focus.js";
+import { t as d } from "./component-enum.js";
+import { n as f } from "./form-associated.js";
+import { i as p } from "./definition5.js";
+import { i as m } from "./definition7.js";
+import { t as h } from "./dialog.js";
+import { t as g } from "./form-element.js";
+import { t as _ } from "./with-contextual-help.js";
+import { t as v } from "./with-error-text.js";
+import { t as y } from "./mixins.js";
+import { r as b } from "./definition11.js";
+import { t as x } from "./trapped-focus.js";
 //#region src/shared/picker-field/picker-field.scss?inline
-var x = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}", S = class extends g(v(_(h(b(e(d(o))))))) {
+var S = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}.control{inline-size:100%}.picker-button-icon[disabled],.picker-button-icon[readonly]{--_picker-field-disabled-icon-color:var(--vvd-color-neutral-600)}.dialog{flex-direction:column;display:inline-flex}.dialog--padded{gap:12px;padding:12px}.dialog .footer{justify-content:flex-end;align-items:center;gap:8px;padding:8px;display:flex}.dialog .footer--with-separator{border-top:1px solid var(--vvd-color-neutral-200)}", C = d(["fieldset", "ghost"], "fieldset"), w = class extends _(y(v(g(x(e(f(o))))))) {
 	readOnlyChanged() {
 		this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly, this.validate());
 	}
@@ -60,7 +61,7 @@ var x = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}
 		this._popupOpen = !1, e && this._textFieldEl.focus();
 	}
 	_onBaseKeyDown(e) {
-		return this._popupOpen && m(e) ? (this._closePopup(), !1) : !this._trappedFocus(e, () => this._focusableElsWithinDialog());
+		return this._popupOpen && h(e) ? (this._closePopup(), !1) : !this._trappedFocus(e, () => this._focusableElsWithinDialog());
 	}
 	_presentationValueChanged() {
 		this.dirtyValue = !0, this.validate();
@@ -79,19 +80,20 @@ var x = ":host{display:inline-block}.base{inline-size:100%;display:inline-block}
 		this.$emit("clear-click");
 	}
 };
-l([i()], S.prototype, "scale", void 0), l([i({
+l([i()], w.prototype, "scale", void 0), l([i({
 	attribute: "readonly",
 	mode: "boolean"
-})], S.prototype, "readOnly", void 0), l([t], S.prototype, "_popupOpen", void 0), l([t], S.prototype, "_presentationValue", void 0);
+})], w.prototype, "readOnly", void 0), l([i], w.prototype, "appearance", void 0), l([t], w.prototype, "_popupOpen", void 0), l([t], w.prototype, "_presentationValue", void 0);
 //#endregion
 //#region src/shared/picker-field/picker-field.template.ts
-var C = (e, t, { withSeparator: n, padded: r }) => {
-	let i = e.tagFor(p), o = e.tagFor(y), l = e.tagFor(f);
+var T = (e, t, { withSeparator: n, padded: r }) => {
+	let i = e.tagFor(m), o = e.tagFor(b), l = e.tagFor(p);
 	return a`
 		<div class='base' @keydown='${(e, { event: t }) => e._onBaseKeyDown(t)}'>
 			<${o} id='text-field'
 				${c("_textFieldEl")}
 				class='control'
+				appearance='${(e) => C.parse(e.appearance)}'
 				label='${(e) => e.label}'
 				helper-text='${(e) => e.helperText}'
 				error-text='${(e) => e.errorValidationMessage}'
@@ -116,6 +118,7 @@ var C = (e, t, { withSeparator: n, padded: r }) => {
 				></slot>
 				<${l}
 					id='picker-button'
+					class="picker-button-icon"
 					${c("_pickerButtonEl")}
 					slot='action-items'
 					size='condensed'
@@ -157,4 +160,4 @@ var C = (e, t, { withSeparator: n, padded: r }) => {
 		</div>`;
 };
 //#endregion
-export { S as n, x as r, C as t };
+export { w as n, S as r, T as t };