@vonage/vivid 5.27.0 → 5.28.1

package/number-field/index.cjs

@@ -1,4 +1,4 @@
-const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/slotted.cjs"),r=require("../bundled/ref.cjs"),i=require("../bundled/when.cjs"),a=require("../bundled/definition.cjs"),o=require("../bundled/enums.cjs"),s=require("../bundled/decorate.cjs"),c=require("../bundled/class-names.cjs"),l=require("../bundled/key-codes.cjs"),u=require("../bundled/definition2.cjs"),d=require("../bundled/affix.cjs"),f=require("../bundled/delegates-aria.cjs"),p=require("../bundled/component-enum.cjs"),m=require("../bundled/form-associated.cjs"),h=require("../bundled/definition5.cjs"),g=require("../bundled/feedback-message.cjs"),_=require("../bundled/definition10.cjs"),v=require("../bundled/form-element.cjs"),y=require("../bundled/with-contextual-help.cjs"),b=require("../bundled/with-error-text.cjs"),x=require("../bundled/with-success-text.cjs"),S=require("../bundled/mixins.cjs"),C=require("../bundled/definition20.cjs"),w=require("../bundled/divider.cjs");var T=`.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}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill){-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within: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));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:"";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button{appearance:none}.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}`,E=p.t([`fieldset`,`ghost`],`fieldset`),D={up:1,down:-1};function O(e,t){let n=parseFloat(e.value),r=isNaN(n)?e.min>0?e.min:e.max<0?e.max:e.min?0:t*e.step:n+t*e.step;e.value=Number(r.toFixed(12)).toString(),e._updatedValueAnnouncement=e.locale.numberField.updatedValueAnnouncement(e._presentationValue)}var k=e=>{let t=e.source;return{invalidCharacters:RegExp(`[^0-9\\-+e${t}]`,`g`),additionalDecimalSeparators:RegExp(`(?<=${t}.*)${t}`,`g`),trailingDecimalSeparator:RegExp(`${t}$`),decimalSeparator:e}},A=k(/\./),j=k(/,/),M=/^-?((\d*\.\d+)|(\d+))$/,N=class extends y.t(S.t(b.t(x.t(v.t(d.t(e.t(f.t(m.n(t.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.readOnly=!1,this.autofocus=!1,this.step=1,this.isUserInput=!1,this._presentationValue=``,this._updatedValueAnnouncement=``,this.incrementButtonAriaLabel=null,this.decrementButtonAriaLabel=null}stepChanged(e,t){this.proxy.setAttribute(`step`,Number.isFinite(t)?t.toString():``)}maxChanged(e,t){this.max=Math.max(t,this.min??t),this.proxy.max=this.max.toString(),this.validate()}minChanged(e,t){this.min=Math.min(t,this.max??t),this.proxy.min=this.min.toString(),this.validate()}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(e){this.value=e.toString()}valueChanged(e,t){this.value=M.test(t)?t:``,t===this.value&&(this.control&&!this.isUserInput&&(this._presentationValue=this.#e(this.value)),super.valueChanged(e,this.value),e!==void 0&&!this.isUserInput&&(this.$emit(`input`),this.$emit(`change`)))}get _numberPatterns(){return this.locale.common.useCommaAsDecimalSeparator?j:A}#e(e){return e.replace(`.`,this.locale.common.useCommaAsDecimalSeparator?`,`:`.`)}#t(e){return e.replace(this._numberPatterns.invalidCharacters,``).replace(this._numberPatterns.additionalDecimalSeparators,``)}#n(e){let t=e.replace(this._numberPatterns.trailingDecimalSeparator,``).replace(this._numberPatterns.decimalSeparator,`.`);return M.test(t)?t:``}validate(){super.validate(this.control)}stepUp(){O(this,D.up)}stepDown(){O(this,D.down)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,`number`),this.validate(),this._presentationValue=this.#e(this.value),this.autofocus&&t.M.enqueue(()=>{this.focus()})}select(){this.control.select(),this.$emit(`select`)}handleTextInput(){this._presentationValue=this.#t(this.control.value),this.control.value!==this._presentationValue&&(this.control.value=this._presentationValue),this.isUserInput=!0,this.value=this.#n(this._presentationValue),this.isUserInput=!1}handleChange(){this.$emit(`change`)}handleKeyDown(e){switch(e.key){case l.i:return this.stepUp(),!1;case l.t:return this.stepDown(),!1}return!0}};s.t([t.m({attribute:`readonly`,mode:`boolean`})],N.prototype,`readOnly`,void 0),s.t([t.m({mode:`boolean`})],N.prototype,`autofocus`,void 0),s.t([t.m],N.prototype,`placeholder`,void 0),s.t([t.m],N.prototype,`list`,void 0),s.t([t.m({converter:t.h})],N.prototype,`maxlength`,void 0),s.t([t.m({converter:t.h})],N.prototype,`minlength`,void 0),s.t([t.m({converter:t.h})],N.prototype,`size`,void 0),s.t([t.m()],N.prototype,`scale`,void 0),s.t([t.m({converter:t.h})],N.prototype,`step`,void 0),s.t([t.m({converter:t.h})],N.prototype,`max`,void 0),s.t([t.m({converter:t.h})],N.prototype,`min`,void 0),s.t([t.A],N.prototype,`defaultSlottedNodes`,void 0),s.t([t.A],N.prototype,`_presentationValue`,void 0),s.t([t.A],N.prototype,`_updatedValueAnnouncement`,void 0),s.t([t.m({attribute:`increment-button-aria-label`})],N.prototype,`incrementButtonAriaLabel`,void 0),s.t([t.m({attribute:`decrement-button-aria-label`})],N.prototype,`decrementButtonAriaLabel`,void 0),s.t([t.m],N.prototype,`appearance`,void 0),s.t([t.m],N.prototype,`shape`,void 0),s.t([t.m],N.prototype,`autoComplete`,void 0);function P(){return t.p` <label for="control" class="label">
+const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/slotted.cjs"),r=require("../bundled/ref.cjs"),i=require("../bundled/when.cjs"),a=require("../bundled/definition.cjs"),o=require("../bundled/enums.cjs"),s=require("../bundled/decorate.cjs"),c=require("../bundled/class-names.cjs"),l=require("../bundled/key-codes.cjs"),u=require("../bundled/definition2.cjs"),d=require("../bundled/affix.cjs"),f=require("../bundled/delegates-aria.cjs"),p=require("../bundled/component-enum.cjs"),m=require("../bundled/form-associated.cjs"),h=require("../bundled/definition5.cjs"),g=require("../bundled/feedback-message.cjs"),_=require("../bundled/definition10.cjs"),v=require("../bundled/form-element.cjs"),y=require("../bundled/with-contextual-help.cjs"),b=require("../bundled/with-error-text.cjs"),x=require("../bundled/with-success-text.cjs"),S=require("../bundled/mixins.cjs"),C=require("../bundled/definition20.cjs"),w=require("../bundled/divider.cjs");var T=`.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}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control::slotted(input:autofill),.control:not(slot):autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within: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));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:"";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}`,E=p.t([`fieldset`,`ghost`],`fieldset`),D={up:1,down:-1};function O(e,t){let n=parseFloat(e.value),r=isNaN(n)?e.min>0?e.min:e.max<0?e.max:e.min?0:t*e.step:n+t*e.step;e.value=Number(r.toFixed(12)).toString(),e._updatedValueAnnouncement=e.locale.numberField.updatedValueAnnouncement(e._presentationValue)}var k=e=>{let t=e.source;return{invalidCharacters:RegExp(`[^0-9\\-+e${t}]`,`g`),additionalDecimalSeparators:RegExp(`(?<=${t}.*)${t}`,`g`),trailingDecimalSeparator:RegExp(`${t}$`),decimalSeparator:e}},A=k(/\./),j=k(/,/),M=/^-?((\d*\.\d+)|(\d+))$/,N=class extends y.t(S.t(b.t(x.t(v.t(d.t(e.t(f.t(m.n(t.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.readOnly=!1,this.autofocus=!1,this.step=1,this.isUserInput=!1,this._presentationValue=``,this._updatedValueAnnouncement=``,this.incrementButtonAriaLabel=null,this.decrementButtonAriaLabel=null}stepChanged(e,t){this.proxy.setAttribute(`step`,Number.isFinite(t)?t.toString():``)}maxChanged(e,t){this.max=Math.max(t,this.min??t),this.proxy.max=this.max.toString(),this.validate()}minChanged(e,t){this.min=Math.min(t,this.max??t),this.proxy.min=this.min.toString(),this.validate()}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(e){this.value=e.toString()}valueChanged(e,t){this.value=M.test(t)?t:``,t===this.value&&(this.control&&!this.isUserInput&&(this._presentationValue=this.#e(this.value)),super.valueChanged(e,this.value),e!==void 0&&!this.isUserInput&&(this.$emit(`input`),this.$emit(`change`)))}get _numberPatterns(){return this.locale.common.useCommaAsDecimalSeparator?j:A}#e(e){return e.replace(`.`,this.locale.common.useCommaAsDecimalSeparator?`,`:`.`)}#t(e){return e.replace(this._numberPatterns.invalidCharacters,``).replace(this._numberPatterns.additionalDecimalSeparators,``)}#n(e){let t=e.replace(this._numberPatterns.trailingDecimalSeparator,``).replace(this._numberPatterns.decimalSeparator,`.`);return M.test(t)?t:``}validate(){super.validate(this.control)}stepUp(){O(this,D.up)}stepDown(){O(this,D.down)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,`number`),this.validate(),this._presentationValue=this.#e(this.value),this.autofocus&&t.M.enqueue(()=>{this.focus()})}select(){this.control.select(),this.$emit(`select`)}handleTextInput(){this._presentationValue=this.#t(this.control.value),this.control.value!==this._presentationValue&&(this.control.value=this._presentationValue),this.isUserInput=!0,this.value=this.#n(this._presentationValue),this.isUserInput=!1}handleChange(){this.$emit(`change`)}handleKeyDown(e){switch(e.key){case l.i:return this.stepUp(),!1;case l.t:return this.stepDown(),!1}return!0}};s.t([t.m({attribute:`readonly`,mode:`boolean`})],N.prototype,`readOnly`,void 0),s.t([t.m({mode:`boolean`})],N.prototype,`autofocus`,void 0),s.t([t.m],N.prototype,`placeholder`,void 0),s.t([t.m],N.prototype,`list`,void 0),s.t([t.m({converter:t.h})],N.prototype,`maxlength`,void 0),s.t([t.m({converter:t.h})],N.prototype,`minlength`,void 0),s.t([t.m({converter:t.h})],N.prototype,`size`,void 0),s.t([t.m()],N.prototype,`scale`,void 0),s.t([t.m({converter:t.h})],N.prototype,`step`,void 0),s.t([t.m({converter:t.h})],N.prototype,`max`,void 0),s.t([t.m({converter:t.h})],N.prototype,`min`,void 0),s.t([t.A],N.prototype,`defaultSlottedNodes`,void 0),s.t([t.A],N.prototype,`_presentationValue`,void 0),s.t([t.A],N.prototype,`_updatedValueAnnouncement`,void 0),s.t([t.m({attribute:`increment-button-aria-label`})],N.prototype,`incrementButtonAriaLabel`,void 0),s.t([t.m({attribute:`decrement-button-aria-label`})],N.prototype,`decrementButtonAriaLabel`,void 0),s.t([t.m],N.prototype,`appearance`,void 0),s.t([t.m],N.prototype,`shape`,void 0),s.t([t.m],N.prototype,`autoComplete`,void 0);function P(){return t.p` <label for="control" class="label">
 		${e=>e.label}
 	</label>`}function F(e){return e.shape===o.i.Pill?o.i.Pill:null}function I(e){return e.disabled||e.readOnly?`-1`:null}function L(e){let n=e.tagFor(h.i),r=e.tagFor(w.t);return t.p`
 		<div class="control-buttons" ?inert="${e=>e.disabled||e.readOnly}">

package/number-field/index.js

@@ -24,7 +24,7 @@ import { t as N } from "../bundled/mixins.js";
 import { t as P } from "../bundled/definition20.js";
 import { t as F } from "../bundled/divider.js";
 //#region src/lib/number-field/number-field.scss?inline
-var I = ".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}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill){-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within: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));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button{appearance:none}.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}", L = C(["fieldset", "ghost"], "fieldset"), R = {
+var I = ".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}:host{display:inline-block}.base{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_text-field-border-radius:8px;--_text-field-pill-border-radius:24px;grid-template-columns:min-content 1fr max-content;align-items:center;gap:4px;width:100%;display:inline-grid}.base.size-condensed{--_text-field-gutter-start:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-gutter-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_text-field-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);--_text-field-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_text-field-border-radius:4px}.base{user-select:none}.base:not(.disabled){--_low-ink-color:var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color:var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){font:var(--vvd-typography-base);grid-area:1/1/auto/4;box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.label-wrapper{grid-area:1/1/auto/4}.char-count+.label-wrapper{grid-column:1/3}.fieldset{background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;align-items:center;padding-block:0;transition:color .2s,background-color .2s;display:flex;position:relative}.fieldset:after{border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;inline-size:100%;transition:box-shadow .2s;display:block;position:absolute}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){font:inherit;text-align:inherit;outline:#0000;box-sizing:border-box!important;border-radius:inherit!important;width:100%!important;margin:initial!important;appearance:none!important;block-size:100%!important;color:inherit!important;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;background-color:#0000!important;border:0!important}.control:not(slot,:focus),.control::slotted(input:not(:focus)){text-overflow:ellipsis!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control::slotted(input:autofill),.control:not(slot):autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);line-height:1;position:absolute;inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .wrapper:focus-within: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));--focus-stroke-gap-color:transparent;z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}}:host([internal-part]) .fieldset{font:var(--vvd-typography-heading-4);background-color:#0000;line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end:70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{z-index:1;display:flex;position:absolute;right:3px}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}", L = C(["fieldset", "ghost"], "fieldset"), R = {
 	up: 1,
 	down: -1
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.27.0",
+  "version": "5.28.1",
   "homepage": "https://apps.vivid.vonage.com",
   "bugs": {
     "url": "https://github.com/Vonage/vivid-3/issues"
@@ -43,7 +43,7 @@
     "@microsoft/fast-element": "^2.10.5",
     "@microsoft/fast-web-utilities": "^6.0.0",
     "date-fns": "^4.4.0",
-    "dompurify": "^3.4.13",
+    "dompurify": "^3.4.14",
     "prosemirror-commands": "^1.7.2",
     "prosemirror-dropcursor": "^1.8.3",
     "prosemirror-gapcursor": "^1.4.1",
@@ -56,18 +56,18 @@
     "prosemirror-transform": "^1.12.0",
     "prosemirror-view": "1.41.8",
     "scroll-into-view-if-needed": "^3.1.0",
-    "uuid": "^14.0.1",
+    "uuid": "^14.0.2",
     "vanilla-colorful": "^0.7.2",
     "video.js": "^8.24.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.5.7",
-    "@microsoft/api-extractor": "^7.58.12",
+    "@microsoft/api-extractor": "^7.59.0",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/user-event": "^14.6.3",
+    "@testing-library/user-event": "^14.6.6",
     "@types/node": "^20.19.43",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
     "cem-plugin-async-function": "^0.0.5",
     "cem-plugin-jsdoc-example": "^0.0.9",
     "cem-plugin-jsdoc-function": "^0.0.5",
@@ -81,15 +81,16 @@
     "glob": "^13.0.6",
     "sass": "^1.102.0",
     "stylelint": "^16.26.1",
-    "tsx": "^4.23.12",
+    "tsx": "^4.23.13",
     "typescript": "5.9.3",
-    "vite": "^8.2.1",
+    "vite": "^8.2.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-static-copy": "^3.4.0",
-    "vitest": "^4.1.10",
+    "vitest": "^4.1.11",
     "vitest-axe": "^0.1.0",
     "vitest-fetch-mock": "^0.4.5",
-    "wait-on": "^8.0.5",
+    "wait-on": "^9.1.0",
+    "@repo/browser-tests": "1.0.0",
     "@repo/cem-analyzer-plugins": "1.0.0",
     "@repo/eslint-config": "1.0.0",
     "@repo/eslint-plugin-repo": "1.0.0",
@@ -97,15 +98,14 @@
     "@repo/metadata-extractor": "1.0.0",
     "@repo/sass": "1.0.0",
     "@repo/stylelint-config": "1.0.0",
-    "@repo/browser-tests": "1.0.0",
+    "@repo/styles": "1.0.0",
+    "@repo/tokens": "1.0.0",
     "@repo/tools": "1.0.0",
     "@repo/typescript-config": "1.0.0",
-    "@repo/tokens": "1.0.0",
+    "@repo/vite-config": "1.0.0",
     "@repo/vitest-config": "1.0.0",
     "@repo/vvd-jsx": "1.0.0",
-    "@repo/styles": "1.0.0",
-    "@vonage/vivid-icons": "4.12.0",
-    "@repo/vite-config": "1.0.0"
+    "@vonage/vivid-icons": "4.12.0"
   },
   "customElements": "custom-elements.json",
   "scripts": {

package/popover/index.cjs

@@ -1,4 +1,4 @@
-const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/slotted.cjs"),r=require("../bundled/ref.cjs"),i=require("../bundled/when.cjs"),a=require("../bundled/decorate.cjs"),o=require("../bundled/class-names.cjs"),s=require("../bundled/definition2.cjs"),c=require("../bundled/icon.cjs"),l=require("../bundled/delegates-aria.cjs"),u=require("../bundled/definition5.cjs"),d=require("../bundled/definition6.cjs"),f=require("../bundled/floating-ui.dom.cjs"),p=require("../bundled/anchored.cjs");var m=`:host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}`,h=class extends e.t(l.t(t.t)){constructor(...e){super(...e),this.placement=`bottom`,this.manual=!1,this.layout=`default`,this.offset=8,this.alternate=!1,this.dismissButtonAriaLabel=null,this.arrow=!1,this.open=!1,this.#e=null,this.#a=()=>{this._popoverEl.togglePopover()},this.#u=()=>{this.#l=this.updatePosition()},this.#p=e=>{let t=e.newState?e.newState===`open`:this._popoverEl.matches(`:popover-open`);this.open!==t&&(this.open=t),this.$emit(t?`open`:`close`,void 0,{bubbles:!1})}}placementChanged(){this.#c()}arrowChanged(){this.#c()}openChanged(e,t){if(this.#i(),!this._popoverEl)return;let n=this._popoverEl.matches(`:popover-open`);t&&!n?this._popoverEl.showPopover():!t&&n&&this._popoverEl.hidePopover(),this.#c()}anchorChanged(){this.#t()}_slottedAnchorChanged(){this.#t()}#e;#t(){if(!this._popoverEl)return;let e=this.anchor||this._slottedAnchor?.[0]||null;this.#e!==e&&(this.#e&&this.#r(this.#e),this.#e=e,this.#e&&this._popoverEl&&(this.#n(this.#e),this.#c()))}#n(e){e.setAttribute(`aria-haspopup`,`dialog`),this.#i(),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=this._popoverEl:e.addEventListener(`click`,this.#a)}#r(e){e.removeAttribute(`aria-haspopup`),e.ariaExpanded=null,p.r(e),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=null:e.removeEventListener(`click`,this.#a)}#i(){this.#e&&(this.#e.ariaExpanded=this.open.toString(),p.i(this.#e,this.open))}#a;get#o(){let e=[f.s(),f.a(),f.l(),f.o()],t=this.offset??0;return this.arrow&&this._arrowEl&&(t=12,e=[...e,f.t({element:this._arrowEl,padding:10})]),t>0&&e.unshift(f.c(t)),e}#s;#c(){this.#s?.(),this.open&&this.#e&&this._popoverEl&&(this.#s=f.r(this.#e,this._popoverEl,this.#u))}#l;#u;async updatePosition(){if(!this.open||!this.#e||!this._popoverEl)return;let e=await f.i(this.#e,this._popoverEl,{placement:this.placement,strategy:`fixed`,middleware:this.#o});this.open&&(this.#d(e),this.arrow&&this._arrowEl&&this.#f(e))}#d(e){let{x:t,y:n}=e;Object.assign(this._popoverEl.style,{left:`${t}px`,top:`${n}px`,visibility:e.middlewareData.hide?.referenceHidden?`hidden`:`visible`})}#f(e){if(!this._arrowEl)return;let{x:t,y:n}=e.middlewareData.arrow,r={left:`calc(100% - 4px)`,right:`-4px`,top:`calc(100% - 4px)`,bottom:`-4px`},i=e.placement.split(`-`)[0];Object.assign(this._arrowEl.style,{left:t?`${t}px`:r[i],top:n?`${n}px`:r[i]})}#p;connectedCallback(){super.connectedCallback(),this.#t(),this._popoverEl&&(this._popoverEl.addEventListener(`toggle`,this.#p),this.open&&!this._popoverEl.matches(`:popover-open`)&&(this._popoverEl.showPopover(),this.#c()))}disconnectedCallback(){super.disconnectedCallback(),this.#s?.(),this.#e&&=(this.#r(this.#e),null),this._popoverEl&&this._popoverEl.removeEventListener(`toggle`,this.#p)}show(){return this.open=!0,this.#l??Promise.resolve()}hide(){this.open=!1}toggle(){this.open=!this.open}};a.t([t.m({mode:`fromView`})],h.prototype,`placement`,void 0),a.t([t.m({mode:`boolean`})],h.prototype,`manual`,void 0),a.t([t.m({mode:`fromView`})],h.prototype,`layout`,void 0),a.t([t.m({attribute:`offset`,mode:`fromView`,converter:t.h})],h.prototype,`offset`,void 0),a.t([t.m({mode:`boolean`})],h.prototype,`alternate`,void 0),a.t([t.m({attribute:`dismiss-button-aria-label`})],h.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.m({mode:`boolean`})],h.prototype,`arrow`,void 0),a.t([t.m({mode:`boolean`})],h.prototype,`open`,void 0),a.t([t.A],h.prototype,`anchor`,void 0),a.t([t.A],h.prototype,`_slottedAnchor`,void 0);var g=t.u(`popover`,h,e=>{let a=e.tagFor(d.r),s=e.tagFor(u.i),f=e.tagFor(c.t);return t.p`
+const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/slotted.cjs"),r=require("../bundled/ref.cjs"),i=require("../bundled/when.cjs"),a=require("../bundled/decorate.cjs"),o=require("../bundled/class-names.cjs"),s=require("../bundled/definition2.cjs"),c=require("../bundled/icon.cjs"),l=require("../bundled/delegates-aria.cjs"),u=require("../bundled/definition5.cjs"),d=require("../bundled/definition6.cjs"),f=require("../bundled/floating-ui.dom.cjs"),p=require("../bundled/anchored.cjs");var m=`:host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}`,h=new Set([`application`,`button`,`checkbox`,`columnheader`,`combobox`,`gridcell`,`link`,`listbox`,`menuitem`,`menuitemcheckbox`,`menuitemradio`,`row`,`rowheader`,`switch`,`tab`,`treeitem`]);function g(e){return e.toLowerCase().split(/\s+/).some(e=>h.has(e))}var _=new Set([`button`,`submit`,`reset`,`image`]);function v(e){if(e._vividAriaBehaviour===`delegate`||e.tagName.includes(`-`)&&!window.customElements.get(e.tagName.toLowerCase()))return!0;let t=e.getAttribute(`role`);return t===null?e instanceof HTMLButtonElement||e instanceof HTMLInputElement&&_.has(e.type)||(e instanceof HTMLAnchorElement||e instanceof HTMLAreaElement)&&e.hasAttribute(`href`)||e instanceof HTMLSelectElement||e.tagName===`SUMMARY`:g(t)}var y=class extends e.t(l.t(t.t)){constructor(...e){super(...e),this.placement=`bottom`,this.manual=!1,this.layout=`default`,this.offset=8,this.alternate=!1,this.dismissButtonAriaLabel=null,this.arrow=!1,this.open=!1,this.#e=null,this.#t=!1,this.#o=()=>{this._popoverEl.togglePopover()},this.#d=()=>{this.#u=this.updatePosition()},this.#m=e=>{let t=e.newState?e.newState===`open`:this._popoverEl.matches(`:popover-open`);this.open!==t&&(this.open=t),this.$emit(t?`open`:`close`,void 0,{bubbles:!1})}}placementChanged(){this.#l()}arrowChanged(){this.#l()}openChanged(e,t){if(this.#a(),!this._popoverEl)return;let n=this._popoverEl.matches(`:popover-open`);t&&!n?this._popoverEl.showPopover():!t&&n&&this._popoverEl.hidePopover(),this.#l()}anchorChanged(){this.#n()}_slottedAnchorChanged(){this.#n()}#e;#t;#n(){if(!this._popoverEl)return;let e=this.anchor||this._slottedAnchor?.[0]||null;this.#e!==e&&(this.#e&&this.#i(this.#e),this.#e=e,this.#e&&this._popoverEl&&(this.#r(this.#e),this.#l()))}#r(e){this.#t=v(e),this.#t?e.setAttribute(`aria-haspopup`,`dialog`):console.warn(`[popover] The anchor element <${e.tagName.toLowerCase()}> does not have button-like semantics, so the "aria-haspopup" and "aria-expanded" attributes will not be applied to it. To make the Popover trigger accessible, use a button element (e.g. <vwc-button> or <button>) or provide an appropriate role (e.g. role="button") on the anchor.`),this.#a(),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=this._popoverEl:e.addEventListener(`click`,this.#o)}#i(e){this.#t&&(e.removeAttribute(`aria-haspopup`),e.ariaExpanded=null),this.#t=!1,p.r(e),e instanceof HTMLButtonElement||e instanceof HTMLInputElement?e.popoverTargetElement=null:e.removeEventListener(`click`,this.#o)}#a(){this.#e&&(this.#t&&(this.#e.ariaExpanded=this.open.toString()),p.i(this.#e,this.open))}#o;get#s(){let e=[f.s(),f.a(),f.l(),f.o()],t=this.offset??0;return this.arrow&&this._arrowEl&&(t=12,e=[...e,f.t({element:this._arrowEl,padding:10})]),t>0&&e.unshift(f.c(t)),e}#c;#l(){this.#c?.(),this.open&&this.#e&&this._popoverEl&&(this.#c=f.r(this.#e,this._popoverEl,this.#d))}#u;#d;async updatePosition(){if(!this.open||!this.#e||!this._popoverEl)return;let e=await f.i(this.#e,this._popoverEl,{placement:this.placement,strategy:`fixed`,middleware:this.#s});this.open&&(this.#f(e),this.arrow&&this._arrowEl&&this.#p(e))}#f(e){let{x:t,y:n}=e;Object.assign(this._popoverEl.style,{left:`${t}px`,top:`${n}px`,visibility:e.middlewareData.hide?.referenceHidden?`hidden`:`visible`})}#p(e){if(!this._arrowEl)return;let{x:t,y:n}=e.middlewareData.arrow,r={left:`calc(100% - 4px)`,right:`-4px`,top:`calc(100% - 4px)`,bottom:`-4px`},i=e.placement.split(`-`)[0];Object.assign(this._arrowEl.style,{left:t?`${t}px`:r[i],top:n?`${n}px`:r[i]})}#m;connectedCallback(){super.connectedCallback(),this.#n(),this._popoverEl&&(this._popoverEl.addEventListener(`toggle`,this.#m),this.open&&!this._popoverEl.matches(`:popover-open`)&&(this._popoverEl.showPopover(),this.#l()))}disconnectedCallback(){super.disconnectedCallback(),this.#c?.(),this.#e&&=(this.#i(this.#e),null),this._popoverEl&&this._popoverEl.removeEventListener(`toggle`,this.#m)}show(){return this.open=!0,this.#u??Promise.resolve()}hide(){this.open=!1}toggle(){this.open=!this.open}};a.t([t.m({mode:`fromView`})],y.prototype,`placement`,void 0),a.t([t.m({mode:`boolean`})],y.prototype,`manual`,void 0),a.t([t.m({mode:`fromView`})],y.prototype,`layout`,void 0),a.t([t.m({attribute:`offset`,mode:`fromView`,converter:t.h})],y.prototype,`offset`,void 0),a.t([t.m({mode:`boolean`})],y.prototype,`alternate`,void 0),a.t([t.m({attribute:`dismiss-button-aria-label`})],y.prototype,`dismissButtonAriaLabel`,void 0),a.t([t.m({mode:`boolean`})],y.prototype,`arrow`,void 0),a.t([t.m({mode:`boolean`})],y.prototype,`open`,void 0),a.t([t.A],y.prototype,`anchor`,void 0),a.t([t.A],y.prototype,`_slottedAnchor`,void 0);var b=t.u(`popover`,y,e=>{let a=e.tagFor(d.r),s=e.tagFor(u.i),f=e.tagFor(c.t);return t.p`
 		<slot name="anchor" ${n.t(`_slottedAnchor`)}></slot>
 		<${a}>
 			<div class="base"
@@ -24,4 +24,4 @@ const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.
 				</div>
 			</div>
 		</${a}>
-	`},[u.t,s.t,d.t],{styles:m,shadowOptions:{delegatesFocus:!0}});t.d(g)();
+	`},[u.t,s.t,d.t],{styles:m,shadowOptions:{delegatesFocus:!0}});t.d(b)();

package/popover/index.js

@@ -13,51 +13,84 @@ import { r as y, t as b } from "../bundled/definition6.js";
 import { a as x, c as S, i as C, l as w, o as T, r as E, s as D, t as O } from "../bundled/floating-ui.dom.js";
 import { i as k, r as A } from "../bundled/anchored.js";
 //#region src/lib/popover/popover.scss?inline
-var j = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}", M = class extends e(g(o)) {
+var j = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base ::-webkit-scrollbar{width:4px}.base ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.base{border:none;border-radius:8px;inline-size:max-content;min-inline-size:fit-content;margin:0;padding:0;position:fixed;overflow:visible}.base:focus-visible{outline:none}.base::backdrop{background-color:var(--popover-backdrop-bg,transparent)}.control{padding:var(--popover-padding,24px);border-radius:inherit;background:var(--vvd-color-surface-4dp);color:var(--vvd-color-canvas-text);gap:var(--popover-gap,24px);flex-direction:column;display:flex}.control:not(.open){display:none}.control.condensed{--popover-padding:12px;--popover-gap:12px}.control.manual{padding-block-start:40px}.arrow{z-index:-1;background:var(--vvd-color-surface-4dp);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.dismiss-button{position:absolute;inset-block-start:4px;inset-inline-end:4px}", M = /* @__PURE__ */ new Set([
+	"application",
+	"button",
+	"checkbox",
+	"columnheader",
+	"combobox",
+	"gridcell",
+	"link",
+	"listbox",
+	"menuitem",
+	"menuitemcheckbox",
+	"menuitemradio",
+	"row",
+	"rowheader",
+	"switch",
+	"tab",
+	"treeitem"
+]);
+function N(e) {
+	return e.toLowerCase().split(/\s+/).some((e) => M.has(e));
+}
+var P = /* @__PURE__ */ new Set([
+	"button",
+	"submit",
+	"reset",
+	"image"
+]);
+function F(e) {
+	if (e._vividAriaBehaviour === "delegate" || e.tagName.includes("-") && !window.customElements.get(e.tagName.toLowerCase())) return !0;
+	let t = e.getAttribute("role");
+	return t === null ? e instanceof HTMLButtonElement || e instanceof HTMLInputElement && P.has(e.type) || (e instanceof HTMLAnchorElement || e instanceof HTMLAreaElement) && e.hasAttribute("href") || e instanceof HTMLSelectElement || e.tagName === "SUMMARY" : N(t);
+}
+var I = class extends e(g(o)) {
 	constructor(...e) {
-		super(...e), this.placement = "bottom", this.manual = !1, this.layout = "default", this.offset = 8, this.alternate = !1, this.dismissButtonAriaLabel = null, this.arrow = !1, this.open = !1, this.#e = null, this.#a = () => {
+		super(...e), this.placement = "bottom", this.manual = !1, this.layout = "default", this.offset = 8, this.alternate = !1, this.dismissButtonAriaLabel = null, this.arrow = !1, this.open = !1, this.#e = null, this.#t = !1, this.#o = () => {
 			this._popoverEl.togglePopover();
-		}, this.#u = () => {
-			this.#l = this.updatePosition();
-		}, this.#p = (e) => {
+		}, this.#d = () => {
+			this.#u = this.updatePosition();
+		}, this.#m = (e) => {
 			let t = e.newState ? e.newState === "open" : this._popoverEl.matches(":popover-open");
 			this.open !== t && (this.open = t), this.$emit(t ? "open" : "close", void 0, { bubbles: !1 });
 		};
 	}
 	placementChanged() {
-		this.#c();
+		this.#l();
 	}
 	arrowChanged() {
-		this.#c();
+		this.#l();
 	}
 	openChanged(e, t) {
-		if (this.#i(), !this._popoverEl) return;
+		if (this.#a(), !this._popoverEl) return;
 		let n = this._popoverEl.matches(":popover-open");
-		t && !n ? this._popoverEl.showPopover() : !t && n && this._popoverEl.hidePopover(), this.#c();
+		t && !n ? this._popoverEl.showPopover() : !t && n && this._popoverEl.hidePopover(), this.#l();
 	}
 	anchorChanged() {
-		this.#t();
+		this.#n();
 	}
 	_slottedAnchorChanged() {
-		this.#t();
+		this.#n();
 	}
 	#e;
-	#t() {
+	#t;
+	#n() {
 		if (!this._popoverEl) return;
 		let e = this.anchor || this._slottedAnchor?.[0] || null;
-		this.#e !== e && (this.#e && this.#r(this.#e), this.#e = e, this.#e && this._popoverEl && (this.#n(this.#e), this.#c()));
-	}
-	#n(e) {
-		e.setAttribute("aria-haspopup", "dialog"), this.#i(), e instanceof HTMLButtonElement || e instanceof HTMLInputElement ? e.popoverTargetElement = this._popoverEl : e.addEventListener("click", this.#a);
+		this.#e !== e && (this.#e && this.#i(this.#e), this.#e = e, this.#e && this._popoverEl && (this.#r(this.#e), this.#l()));
 	}
 	#r(e) {
-		e.removeAttribute("aria-haspopup"), e.ariaExpanded = null, A(e), e instanceof HTMLButtonElement || e instanceof HTMLInputElement ? e.popoverTargetElement = null : e.removeEventListener("click", this.#a);
+		this.#t = F(e), this.#t ? e.setAttribute("aria-haspopup", "dialog") : console.warn(`[popover] The anchor element <${e.tagName.toLowerCase()}> does not have button-like semantics, so the "aria-haspopup" and "aria-expanded" attributes will not be applied to it. To make the Popover trigger accessible, use a button element (e.g. <vwc-button> or <button>) or provide an appropriate role (e.g. role="button") on the anchor.`), this.#a(), e instanceof HTMLButtonElement || e instanceof HTMLInputElement ? e.popoverTargetElement = this._popoverEl : e.addEventListener("click", this.#o);
+	}
+	#i(e) {
+		this.#t && (e.removeAttribute("aria-haspopup"), e.ariaExpanded = null), this.#t = !1, A(e), e instanceof HTMLButtonElement || e instanceof HTMLInputElement ? e.popoverTargetElement = null : e.removeEventListener("click", this.#o);
 	}
-	#i() {
-		this.#e && (this.#e.ariaExpanded = this.open.toString(), k(this.#e, this.open));
+	#a() {
+		this.#e && (this.#t && (this.#e.ariaExpanded = this.open.toString()), k(this.#e, this.open));
 	}
-	#a;
-	get #o() {
+	#o;
+	get #s() {
 		let e = [
 			D(),
 			x(),
@@ -69,23 +102,23 @@ var j = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-
 			padding: 10
 		})]), t > 0 && e.unshift(S(t)), e;
 	}
-	#s;
-	#c() {
-		this.#s?.(), this.open && this.#e && this._popoverEl && (this.#s = E(this.#e, this._popoverEl, this.#u));
+	#c;
+	#l() {
+		this.#c?.(), this.open && this.#e && this._popoverEl && (this.#c = E(this.#e, this._popoverEl, this.#d));
 	}
-	#l;
 	#u;
+	#d;
 	async updatePosition() {
 		/* v8 ignore if -- @preserve */
 		if (!this.open || !this.#e || !this._popoverEl) return;
 		let e = await C(this.#e, this._popoverEl, {
 			placement: this.placement,
 			strategy: "fixed",
-			middleware: this.#o
+			middleware: this.#s
 		});
-		this.open && (this.#d(e), this.arrow && this._arrowEl && this.#f(e));
+		this.open && (this.#f(e), this.arrow && this._arrowEl && this.#p(e));
 	}
-	#d(e) {
+	#f(e) {
 		let { x: t, y: n } = e;
 		Object.assign(this._popoverEl.style, {
 			left: `${t}px`,
@@ -93,7 +126,7 @@ var j = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-
 			visibility: e.middlewareData.hide?.referenceHidden ? "hidden" : "visible"
 		});
 	}
-	#f(e) {
+	#p(e) {
 		/* v8 ignore if -- @preserve */
 		if (!this._arrowEl) return;
 		let { x: t, y: n } = e.middlewareData.arrow, r = {
@@ -107,17 +140,17 @@ var j = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-
 			top: n ? `${n}px` : r[i]
 		});
 	}
-	#p;
+	#m;
 	connectedCallback() {
 		/* v8 ignore else -- @preserve */
-		super.connectedCallback(), this.#t(), this._popoverEl && (this._popoverEl.addEventListener("toggle", this.#p), this.open && !this._popoverEl.matches(":popover-open") && (this._popoverEl.showPopover(), this.#c()));
+		super.connectedCallback(), this.#n(), this._popoverEl && (this._popoverEl.addEventListener("toggle", this.#m), this.open && !this._popoverEl.matches(":popover-open") && (this._popoverEl.showPopover(), this.#l()));
 	}
 	disconnectedCallback() {
 		/* v8 ignore else -- @preserve */
-		super.disconnectedCallback(), this.#s?.(), this.#e &&= (this.#r(this.#e), null), this._popoverEl && this._popoverEl.removeEventListener("toggle", this.#p);
+		super.disconnectedCallback(), this.#c?.(), this.#e &&= (this.#i(this.#e), null), this._popoverEl && this._popoverEl.removeEventListener("toggle", this.#m);
 	}
 	show() {
-		return this.open = !0, this.#l ?? Promise.resolve();
+		return this.open = !0, this.#u ?? Promise.resolve();
 	}
 	hide() {
 		this.open = !1;
@@ -126,14 +159,14 @@ var j = ":host{display:inline-block}.base{white-space:initial;--scrollbar-track-
 		this.open = !this.open;
 	}
 };
-d([i({ mode: "fromView" })], M.prototype, "placement", void 0), d([i({ mode: "boolean" })], M.prototype, "manual", void 0), d([i({ mode: "fromView" })], M.prototype, "layout", void 0), d([i({
+d([i({ mode: "fromView" })], I.prototype, "placement", void 0), d([i({ mode: "boolean" })], I.prototype, "manual", void 0), d([i({ mode: "fromView" })], I.prototype, "layout", void 0), d([i({
 	attribute: "offset",
 	mode: "fromView",
 	converter: r
-})], M.prototype, "offset", void 0), d([i({ mode: "boolean" })], M.prototype, "alternate", void 0), d([i({ attribute: "dismiss-button-aria-label" })], M.prototype, "dismissButtonAriaLabel", void 0), d([i({ mode: "boolean" })], M.prototype, "arrow", void 0), d([i({ mode: "boolean" })], M.prototype, "open", void 0), d([t], M.prototype, "anchor", void 0), d([t], M.prototype, "_slottedAnchor", void 0);
+})], I.prototype, "offset", void 0), d([i({ mode: "boolean" })], I.prototype, "alternate", void 0), d([i({ attribute: "dismiss-button-aria-label" })], I.prototype, "dismissButtonAriaLabel", void 0), d([i({ mode: "boolean" })], I.prototype, "arrow", void 0), d([i({ mode: "boolean" })], I.prototype, "open", void 0), d([t], I.prototype, "anchor", void 0), d([t], I.prototype, "_slottedAnchor", void 0);
 //#endregion
 //#region src/lib/popover/definition.ts
-var N = s("popover", M, (e) => {
+var L = s("popover", I, (e) => {
 	let t = e.tagFor(y), n = e.tagFor(_), r = e.tagFor(m);
 	return a`
 		<slot name="anchor" ${c("_slottedAnchor")}></slot>
@@ -175,5 +208,5 @@ var N = s("popover", M, (e) => {
 });
 //#endregion
 //#region src/lib/popover/index.ts
-n(N)();
+n(L)();
 //#endregion