@vonage/vivid 5.4.0 → 5.5.0

package/combobox/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const k=require("../bundled/definition2.cjs"),v=require("../bundled/definition9.cjs"),$=require("../bundled/definition11.cjs"),I=require("../bundled/text-field.cjs"),n=require("../bundled/vivid-element.cjs"),b=require("../bundled/mixins.cjs"),x=require("../bundled/listbox.cjs"),C=require("../bundled/form-associated.cjs"),S=require("../bundled/with-contextual-help.cjs"),O=require("../bundled/with-error-text.cjs"),q=require("../bundled/with-success-text.cjs"),A=require("../bundled/form-element.cjs"),u=require("../bundled/affix.cjs"),T=require("../bundled/strings.cjs"),V=require("../bundled/numbers.cjs"),H=require("../bundled/index.cjs"),D=require("../bundled/definition3.cjs"),d=require("../bundled/ref.cjs"),h=require("../bundled/slotted.cjs"),E=require("../bundled/when.cjs"),F=require("../bundled/class-names.cjs"),B='.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}',p={inline:"inline",list:"list",both:"both",none:"none"};var L=Object.defineProperty,s=(a,t,e,o)=>{for(var r=void 0,l=a.length-1,c;l>=0;l--)(c=a[l])&&(r=c(t,e,r)||r);return r&&L(t,e,r),r};class i extends S.WithContextualHelp(b.WithFeedback(O.WithErrorText(q.WithSuccessText(A.FormElement(u.AffixIcon(C.FormAssociated(x.Listbox))))))){constructor(){super(...arguments),this.filteredOptions=[],this.filter="",this.fixedDropdown=!1,this.listboxId=T.uniqueId("listbox-"),this.maxHeight=0,this.open=!1,this.proxy=document.createElement("input")}formResetCallback(){super.formResetCallback(),this.selectedIndex=this._newDefaultSelectedIndex([],this.options,-1)??-1,this.value=this.firstSelectedOption?.text||""}validate(){super.validate(this.control)}get isAutocompleteInline(){return this.autocomplete===p.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===p.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===p.both}openChanged(){if(this.open){this.focusAndScrollOptionIntoView(),n.Updates.enqueue(()=>this.control.focus());return}}get options(){return n.Observable.track(this,"options"),this.filteredOptions.length?this.filteredOptions:this._options}set options(t){super.options=t}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(t,e){if(this.$fastController.isConnected&&this.options){const o=this.options.findIndex(c=>c.text.toLowerCase()===e.toLowerCase()),r=this.options[this.selectedIndex]?.text,l=this.options[o]?.text;this.selectedIndex=r!==l?o:this.selectedIndex}super.valueChanged(t,e)}clickHandler(t){if(!(this.disabled||this._isFromContextualHelp(t))){if(this.open){const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(!e||e.disabled)return;this.selectedOptions=[e],this.control.value=e.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(t){this.open&&(t.stopPropagation(),this.open=!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){(!this.autocomplete||this.autocomplete===p.none)&&(this.filter=""),this.filteredOptions=this._options.filter(t=>t.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList&&this._options.forEach(t=>{t.hidden=!this.filteredOptions.includes(t)})}focusAndScrollOptionIntoView(){if(this.contains(document.activeElement)){this.control.focus();const t=this.firstSelectedOption;t&&requestAnimationFrame(()=>{t.scrollIntoView({block:"nearest"})})}}focusoutHandler(t){if(this.syncValue(),!this.open)return!0;const e=t.relatedTarget;if(this.isSameNode(e)){this.focus();return}this.open=!1}inputHandler(t){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),t.inputType.includes("deleteContent")||!this.filter.length)return!0;this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)}keydownHandler(t){const e=t.key;if(t.ctrlKey||t.shiftKey)return!0;switch(e){case"Enter":{this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break}case"Escape":{if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;break}this.value="",this.control.value="",this.filter="",this.filterOptions();break}case"Tab":{if(this.setInputToSelection(),!this.open)return!0;t.preventDefault(),this.open=!1;break}case"ArrowUp":case"ArrowDown":{if(this.filterOptions(),!this.open){this.open=!0;break}this.filteredOptions.length>0&&super.keydownHandler(t),this.isAutocompleteInline&&this.setInlineSelection();break}default:return!0}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){if(e=V.limit(-1,this.options.length-1,e),e!==this.selectedIndex){this.selectedIndex=e;return}super.selectedIndexChanged(t,e)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&(this.selectedIndex=this.selectedIndex-1)}_isDefaultSelected(t){return super._isDefaultSelected(t)||t.text!==""&&t.text===this.initialValue}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}syncValue(){const t=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==t)}selectedOptionsChanged(t,e){this.$fastController.isConnected&&this._options.forEach(o=>{o.selected=e.includes(o)})}slottedOptionsChanged(t,e){super.slottedOptionsChanged(t,e),this.updateValue();const o=this.getAttribute("scale")||this.scale;e.forEach(r=>{o&&(r.setAttribute("scale",o),r.scale=o)})}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value),t&&this.$emit("change")}clearSelectionRange(){const t=this.control.value.length;this.control.setSelectionRange(t,t)}}s([n.attr({attribute:"autocomplete",mode:"fromView"})],i.prototype,"autocomplete");s([n.attr],i.prototype,"appearance");s([n.attr],i.prototype,"shape");s([n.attr()],i.prototype,"scale");s([n.attr],i.prototype,"placement");s([n.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown");s([n.observable],i.prototype,"metaSlottedContent");s([n.observable],i.prototype,"maxHeight");s([n.attr({attribute:"open",mode:"boolean"})],i.prototype,"open");s([n.attr],i.prototype,"placeholder");const R=({icon:a,iconSlottedContent:t,metaSlottedContent:e,errorValidationMessage:o,successText:r,shape:l,scale:c,disabled:m,placeholder:g,label:_,appearance:f,open:w,_activeDescendant:y})=>F.classNames("base",["disabled",m],[`shape-${l}`,!!l],[`size-${c}`,!!c],["placeholder",!!g],[`appearance-${f}`,!!f],["no-label",!_],["has-icon",!!a||!!t?.length],["has-meta",!!e?.length],["has-activedescendant",!!y&&w],["error",!!o],["success",!!r]);function z(){return n.html` <label for="control" class="label">
+"use strict";const k=require("../bundled/definition2.cjs"),v=require("../bundled/definition9.cjs"),$=require("../bundled/definition12.cjs"),I=require("../bundled/text-field.cjs"),n=require("../bundled/vivid-element.cjs"),b=require("../bundled/mixins.cjs"),x=require("../bundled/listbox.cjs"),C=require("../bundled/form-associated.cjs"),S=require("../bundled/with-contextual-help.cjs"),O=require("../bundled/with-error-text.cjs"),q=require("../bundled/with-success-text.cjs"),A=require("../bundled/form-element.cjs"),u=require("../bundled/affix.cjs"),T=require("../bundled/strings.cjs"),V=require("../bundled/numbers.cjs"),H=require("../bundled/index.cjs"),D=require("../bundled/definition3.cjs"),d=require("../bundled/ref.cjs"),h=require("../bundled/slotted.cjs"),E=require("../bundled/when.cjs"),F=require("../bundled/class-names.cjs"),B='.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}',p={inline:"inline",list:"list",both:"both",none:"none"};var L=Object.defineProperty,s=(a,t,e,o)=>{for(var r=void 0,l=a.length-1,c;l>=0;l--)(c=a[l])&&(r=c(t,e,r)||r);return r&&L(t,e,r),r};class i extends S.WithContextualHelp(b.WithFeedback(O.WithErrorText(q.WithSuccessText(A.FormElement(u.AffixIcon(C.FormAssociated(x.Listbox))))))){constructor(){super(...arguments),this.filteredOptions=[],this.filter="",this.fixedDropdown=!1,this.listboxId=T.uniqueId("listbox-"),this.maxHeight=0,this.open=!1,this.proxy=document.createElement("input")}formResetCallback(){super.formResetCallback(),this.selectedIndex=this._newDefaultSelectedIndex([],this.options,-1)??-1,this.value=this.firstSelectedOption?.text||""}validate(){super.validate(this.control)}get isAutocompleteInline(){return this.autocomplete===p.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===p.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===p.both}openChanged(){if(this.open){this.focusAndScrollOptionIntoView(),n.Updates.enqueue(()=>this.control.focus());return}}get options(){return n.Observable.track(this,"options"),this.filteredOptions.length?this.filteredOptions:this._options}set options(t){super.options=t}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(t,e){if(this.$fastController.isConnected&&this.options){const o=this.options.findIndex(c=>c.text.toLowerCase()===e.toLowerCase()),r=this.options[this.selectedIndex]?.text,l=this.options[o]?.text;this.selectedIndex=r!==l?o:this.selectedIndex}super.valueChanged(t,e)}clickHandler(t){if(!(this.disabled||this._isFromContextualHelp(t))){if(this.open){const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(!e||e.disabled)return;this.selectedOptions=[e],this.control.value=e.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(t){this.open&&(t.stopPropagation(),this.open=!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){(!this.autocomplete||this.autocomplete===p.none)&&(this.filter=""),this.filteredOptions=this._options.filter(t=>t.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList&&this._options.forEach(t=>{t.hidden=!this.filteredOptions.includes(t)})}focusAndScrollOptionIntoView(){if(this.contains(document.activeElement)){this.control.focus();const t=this.firstSelectedOption;t&&requestAnimationFrame(()=>{t.scrollIntoView({block:"nearest"})})}}focusoutHandler(t){if(this.syncValue(),!this.open)return!0;const e=t.relatedTarget;if(this.isSameNode(e)){this.focus();return}this.open=!1}inputHandler(t){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),t.inputType.includes("deleteContent")||!this.filter.length)return!0;this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)}keydownHandler(t){const e=t.key;if(t.ctrlKey||t.shiftKey)return!0;switch(e){case"Enter":{this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break}case"Escape":{if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;break}this.value="",this.control.value="",this.filter="",this.filterOptions();break}case"Tab":{if(this.setInputToSelection(),!this.open)return!0;t.preventDefault(),this.open=!1;break}case"ArrowUp":case"ArrowDown":{if(this.filterOptions(),!this.open){this.open=!0;break}this.filteredOptions.length>0&&super.keydownHandler(t),this.isAutocompleteInline&&this.setInlineSelection();break}default:return!0}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){if(e=V.limit(-1,this.options.length-1,e),e!==this.selectedIndex){this.selectedIndex=e;return}super.selectedIndexChanged(t,e)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&(this.selectedIndex=this.selectedIndex-1)}_isDefaultSelected(t){return super._isDefaultSelected(t)||t.text!==""&&t.text===this.initialValue}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}syncValue(){const t=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==t)}selectedOptionsChanged(t,e){this.$fastController.isConnected&&this._options.forEach(o=>{o.selected=e.includes(o)})}slottedOptionsChanged(t,e){super.slottedOptionsChanged(t,e),this.updateValue();const o=this.getAttribute("scale")||this.scale;e.forEach(r=>{o&&(r.setAttribute("scale",o),r.scale=o)})}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value),t&&this.$emit("change")}clearSelectionRange(){const t=this.control.value.length;this.control.setSelectionRange(t,t)}}s([n.attr({attribute:"autocomplete",mode:"fromView"})],i.prototype,"autocomplete");s([n.attr],i.prototype,"appearance");s([n.attr],i.prototype,"shape");s([n.attr()],i.prototype,"scale");s([n.attr],i.prototype,"placement");s([n.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown");s([n.observable],i.prototype,"metaSlottedContent");s([n.observable],i.prototype,"maxHeight");s([n.attr({attribute:"open",mode:"boolean"})],i.prototype,"open");s([n.attr],i.prototype,"placeholder");const R=({icon:a,iconSlottedContent:t,metaSlottedContent:e,errorValidationMessage:o,successText:r,shape:l,scale:c,disabled:m,placeholder:g,label:_,appearance:f,open:w,_activeDescendant:y})=>F.classNames("base",["disabled",m],[`shape-${l}`,!!l],[`size-${c}`,!!c],["placeholder",!!g],[`appearance-${f}`,!!f],["no-label",!_],["has-icon",!!a||!!t?.length],["has-meta",!!e?.length],["has-activedescendant",!!y&&w],["error",!!o],["success",!!r]);function z(){return n.html` <label for="control" class="label">
 		${a=>a.label}
 	</label>`}function P(a){return a.open&&a.fixedDropdown?`--_combobox-fixed-width: ${Math.round(a.getBoundingClientRect().width)}px`:null}function W(a){const t=u.affixIconTemplateFactory(a),e=D.chevronTemplateFactory(a);return n.html` <div class="${R}" ${d.ref("_anchor")}>
 		${E.when(o=>o.label,z())}

package/combobox/index.js

@@ -1,6 +1,6 @@
 import { i as y } from "../bundled/definition2.js";
 import { P as k, p as $ } from "../bundled/definition9.js";
-import { l as I } from "../bundled/definition11.js";
+import { l as I } from "../bundled/definition12.js";
 import { s as C } from "../bundled/text-field.js";
 import { U as O, O as S, a as l, o as v, h as u, c as A, d as V } from "../bundled/vivid-element.js";
 import { W as D, f as H } from "../bundled/mixins.js";

package/contextual-help/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition12.cjs");e.registerContextualHelp();
+"use strict";const e=require("../bundled/definition13.cjs");e.registerContextualHelp();

package/contextual-help/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition12.js";
+import { r } from "../bundled/definition13.js";
 r();

package/custom-elements.json

@@ -7964,6 +7964,10 @@
               "name": "DelegatesAria",
               "module": "/src/shared/aria/delegates-aria"
             },
+            {
+              "name": "TrappedFocus",
+              "module": "/src/shared/patterns"
+            },
             {
               "name": "BaseColorPicker",
               "module": "/src/shared/color-picker"
@@ -13409,6 +13413,11 @@
               "description": "The aria-label for the delete button",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "_clearLongPressTimer",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "autofocus",
@@ -16804,6 +16813,29 @@
       "kind": "javascript-module",
       "path": "src/lib/icon/icon.ts",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "resolveIcon",
+          "return": {
+            "type": {
+              "text": "Promise<string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "iconId",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "name": "signal",
+              "type": {
+                "text": "AbortSignal"
+              }
+            }
+          ]
+        },
         {
           "kind": "class",
           "description": "",
@@ -16869,6 +16901,15 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "#currentRequestId",
+              "privacy": "private",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
             {
               "kind": "field",
               "name": "label",
@@ -16991,6 +17032,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "resolveIcon",
+          "declaration": {
+            "name": "resolveIcon",
+            "module": "src/lib/icon/icon.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "Icon",

package/data-grid/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const S=require("../bundled/definition2.cjs"),n=require("../bundled/vivid-element.cjs"),H=require("../bundled/definition13.cjs"),O=require("../bundled/repeat.cjs"),_=require("../bundled/normalize.cjs"),u=require("../bundled/key-codes.cjs"),T=require("../bundled/host-semantics.cjs"),z=require("../bundled/children.cjs"),x=require("../bundled/slotted.cjs"),q=require("../bundled/localized.cjs"),G=require("../bundled/class-names.cjs"),A=require("../bundled/when.cjs"),$="focus",F="focusin",C="focusout",w="keydown",P=":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{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{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}",L=".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}",M=':host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:"";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}',D={none:"none",ascending:"ascending",descending:"descending",other:"other"},g={none:"none",default:"default",sticky:"sticky"},v={default:"default",columnHeader:"columnheader",rowHeader:"rowheader"},p={default:"default",header:"header",stickyHeader:"sticky-header"},R={columnheader:"columnheader",rowheader:"rowheader",default:"gridcell"};var U=Object.defineProperty,b=(i,e,t,l)=>{for(var o=void 0,r=i.length-1,a;r>=0;r--)(a=i[r])&&(o=a(e,t,o)||o);return o&&U(e,t,o),o};const V=n.html`
+"use strict";const S=require("../bundled/definition2.cjs"),n=require("../bundled/vivid-element.cjs"),H=require("../bundled/definition14.cjs"),O=require("../bundled/repeat.cjs"),_=require("../bundled/normalize.cjs"),u=require("../bundled/key-codes.cjs"),T=require("../bundled/host-semantics.cjs"),z=require("../bundled/children.cjs"),x=require("../bundled/slotted.cjs"),q=require("../bundled/localized.cjs"),G=require("../bundled/class-names.cjs"),A=require("../bundled/when.cjs"),$="focus",F="focusin",C="focusout",w="keydown",P=":host{display:block}:host([generate-header=sticky]){max-block-size:400px}.base{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base{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{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base{position:relative;overflow:auto;block-size:inherit;inline-size:100%;max-block-size:inherit}",L=".base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-row-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-row-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-row-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-data-grid-row-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-data-grid-row-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-data-grid-row-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-row-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-row-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-row-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-row-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-row-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-data-grid-row-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-data-grid-row-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-data-grid-row-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-row-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:grid;width:100%;box-sizing:border-box;color:var(--vvd-color-canvas-text)}:host([row-type=sticky-header]) .base{position:sticky;z-index:9;top:0;background:var(--data-grid-row-background, var(--vvd-color-canvas))}:host([row-type=hidden-header]) .base{display:none}:host(:is([selected]):not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}",M=':host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:"";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}',D={none:"none",ascending:"ascending",descending:"descending",other:"other"},g={none:"none",default:"default",sticky:"sticky"},v={default:"default",columnHeader:"columnheader",rowHeader:"rowheader"},p={default:"default",header:"header",stickyHeader:"sticky-header"},R={columnheader:"columnheader",rowheader:"rowheader",default:"gridcell"};var U=Object.defineProperty,b=(i,e,t,l)=>{for(var o=void 0,r=i.length-1,a;r>=0;r--)(a=i[r])&&(o=a(e,t,o)||o);return o&&U(e,t,o),o};const V=n.html`
 	<template>
 		${i=>i.rowData===null||i.columnDefinition===null||i.columnDefinition.columnDataKey===null?null:i.rowData[i.columnDefinition.columnDataKey]}
 	</template>

package/data-grid/index.js

@@ -1,6 +1,6 @@
 import { I as j, i as N } from "../bundled/definition2.js";
 import { V as E, h as f, a as m, o as a, b as z, U as x, O as R, n as W, c as J, d as F } from "../bundled/vivid-element.js";
-import { V as X, v as Y } from "../bundled/definition13.js";
+import { V as X, v as Y } from "../bundled/definition14.js";
 import { R as G } from "../bundled/repeat.js";
 import { n as D } from "../bundled/normalize.js";
 import { d as Z, e as ee, f as A, k as P, a as L, g as te, h as oe, i as le, j as ie, b as ne, c as ae, l as re } from "../bundled/key-codes.js";

package/date-picker/index.cjs

@@ -1 +1 @@
-"use strict";const u=require("../bundled/definition9.cjs"),d=require("../bundled/definition3.cjs"),p=require("../bundled/definition10.cjs"),P=require("../bundled/definition14.cjs"),l=require("../bundled/picker-field.template.cjs"),t=require("../bundled/calendar-picker.template.cjs"),o=require("../bundled/vivid-element.cjs"),k=require("../bundled/definition13.cjs"),h=require("../bundled/single-value-picker.cjs"),_=require("../bundled/single-date-picker.cjs");var D=Object.defineProperty,f=Object.getOwnPropertyDescriptor,g=(i,e,a,q)=>{for(var r=f(e,a),n=i.length-1,c;n>=0;n--)(c=i[n])&&(r=c(e,a,r)||r);return r&&D(e,a,r),r};class s extends _.SingleDatePickerMixin(h.SingleValuePicker(t.MinMaxCalendarPicker(t.CalendarPicker(l.PickerField)))){constructor(){super(),this._isValidValue=t.isValidDateStr,this._textFieldSize="20",this.proxy.type="date"}_toPresentationValue(e){return t.formatPresentationDate(e,this.locale.calendarPicker)}_parsePresentationValue(e){return t.parsePresentationDate(e,this.locale.calendarPicker)}_dateValue(){return this.value}_withUpdatedDate(e){return e}get _pickerButtonLabel(){return this.value?this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value)):this.locale.calendarPicker.chooseDateLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDateLabel}get _textFieldPlaceholder(){return this.locale.calendarPicker.dateFormatPlaceholder}_onDateClick(e){super._onDateClick(e),this._closePopup()}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateError:null}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("button, .vwc-button")}get _pickerButtonIcon(){return"calendar-line"}}g([o.volatile],s.prototype,"_pickerButtonLabel");const v=i=>l.PickerFieldTemplate(i,t.CalendarPickerTemplate(i),{withSeparator:!1,padded:!0}),b=o.defineVividComponent("date-picker",s,v,[d.buttonDefinition,u.popupDefinition,p.textFieldDefinition,P.dividerDefinition,k.visuallyHiddenDefinition],{styles:[l.pickerFieldStyles,t.calendarStyles],shadowOptions:{delegatesFocus:!0}}),V=o.createRegisterFunction(b);V();
+"use strict";const u=require("../bundled/definition9.cjs"),d=require("../bundled/definition3.cjs"),p=require("../bundled/definition10.cjs"),P=require("../bundled/definition15.cjs"),l=require("../bundled/picker-field.template.cjs"),t=require("../bundled/calendar-picker.template.cjs"),o=require("../bundled/vivid-element.cjs"),k=require("../bundled/definition14.cjs"),h=require("../bundled/single-value-picker.cjs"),_=require("../bundled/single-date-picker.cjs");var D=Object.defineProperty,f=Object.getOwnPropertyDescriptor,g=(i,e,a,q)=>{for(var r=f(e,a),n=i.length-1,c;n>=0;n--)(c=i[n])&&(r=c(e,a,r)||r);return r&&D(e,a,r),r};class s extends _.SingleDatePickerMixin(h.SingleValuePicker(t.MinMaxCalendarPicker(t.CalendarPicker(l.PickerField)))){constructor(){super(),this._isValidValue=t.isValidDateStr,this._textFieldSize="20",this.proxy.type="date"}_toPresentationValue(e){return t.formatPresentationDate(e,this.locale.calendarPicker)}_parsePresentationValue(e){return t.parsePresentationDate(e,this.locale.calendarPicker)}_dateValue(){return this.value}_withUpdatedDate(e){return e}get _pickerButtonLabel(){return this.value?this.locale.calendarPicker.changeDateLabel(this._toPresentationValue(this.value)):this.locale.calendarPicker.chooseDateLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDateLabel}get _textFieldPlaceholder(){return this.locale.calendarPicker.dateFormatPlaceholder}_onDateClick(e){super._onDateClick(e),this._closePopup()}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateError:null}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("button, .vwc-button")}get _pickerButtonIcon(){return"calendar-line"}}g([o.volatile],s.prototype,"_pickerButtonLabel");const v=i=>l.PickerFieldTemplate(i,t.CalendarPickerTemplate(i),{withSeparator:!1,padded:!0}),b=o.defineVividComponent("date-picker",s,v,[d.buttonDefinition,u.popupDefinition,p.textFieldDefinition,P.dividerDefinition,k.visuallyHiddenDefinition],{styles:[l.pickerFieldStyles,t.calendarStyles],shadowOptions:{delegatesFocus:!0}}),V=o.createRegisterFunction(b);V();

package/date-picker/index.js

@@ -1,11 +1,11 @@
 import { p as n } from "../bundled/definition9.js";
 import { b as s } from "../bundled/definition3.js";
 import { t as c } from "../bundled/definition10.js";
-import { d } from "../bundled/definition14.js";
+import { d } from "../bundled/definition15.js";
 import { P as u, a as p, p as P } from "../bundled/picker-field.template.js";
 import { M as f, C as h, i as m, f as _, p as k, a as D, c as v } from "../bundled/calendar-picker.template.js";
 import { v as g, c as b, d as V } from "../bundled/vivid-element.js";
-import { v as S } from "../bundled/definition13.js";
+import { v as S } from "../bundled/definition14.js";
 import { S as C } from "../bundled/single-value-picker.js";
 import { S as F } from "../bundled/single-date-picker.js";
 var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, x = (t, e, r, M) => {

package/date-range-picker/index.cjs

@@ -1 +1 @@
-"use strict";const m=require("../bundled/definition3.cjs"),_=require("../bundled/definition9.cjs"),D=require("../bundled/definition10.cjs"),P=require("../bundled/definition14.cjs"),n=require("../bundled/vivid-element.cjs"),u=require("../bundled/picker-field.template.cjs"),r=require("../bundled/calendar-picker.template.cjs"),g=require("../bundled/definition13.cjs"),c=(i,t)=>`${i} – ${t}`,p=(i,t)=>c(r.formatPresentationDate(i.start,t),r.formatPresentationDate(i.end,t)),f=(i,t)=>{const e=i.trim().split(/[\s—–-]+/);if(e.length!==2)throw new Error(`Invalid date range: ${i}`);const[a,s]=e.map(h=>r.parsePresentationDate(h,t));return{start:a,end:s}};var V=Object.defineProperty,k=Object.getOwnPropertyDescriptor,o=(i,t,e,a)=>{for(var s=a>1?void 0:a?k(t,e):t,h=i.length-1,d;h>=0;h--)(d=i[h])&&(s=(a?d(t,e,s):d(s))||s);return a&&s&&V(t,e,s),s};const v=i=>typeof i=="string";function b(i){return!!i}class l extends r.MinMaxCalendarPicker(r.CalendarPicker(u.PickerField)){constructor(){super(...arguments),this.initialStart="",this.initialEnd="",this.#e=!1,this.start="",this.end="",this.setFormValue=(t,e)=>{v(t)||super.setFormValue(t,e)},this._numCalendars=2,this._hideDatesOutsideMonth=!0,this._textFieldSize="30"}initialStartChanged(){this.dirtyValue||(this.start=this.initialStart,this.dirtyValue=!1)}initialEndChanged(){this.dirtyValue||(this.end=this.initialEnd,this.dirtyValue=!1)}#e;startChanged(){if(this.start&&!r.isValidDateStr(this.start)){this.start="";return}this.currentStart=this.start,this.dirtyValue=!0,this.#e||this.#i()}endChanged(){if(this.end&&!r.isValidDateStr(this.end)){this.end="";return}this.currentEnd=this.end,this.dirtyValue=!0,this.#e||this.#i()}currentStartChanged(){this.start=this.currentStart}currentEndChanged(){this.end=this.currentEnd}#t(t){this.#e=!0,t.start!==void 0&&(this.start=t.start,this.$emit("input:start")),t.end!==void 0&&(this.end=t.end,this.$emit("input:end")),this.#e=!1,this.$emit("input"),this.$emit("change"),this.#i()}#i(){if(this.start&&this.end){if(r.compareDateStr(this.start,this.end)>0){this.#t({start:this.end,end:this.start});return}this.value=c(this.start,this.end)}else this.value="";this._updatePresentationValue();const t=this.start||this.end;t&&this._adjustSelectedMonthToEnsureVisibilityOf(t),this.#a()}_updatePresentationValue(){this.start&&this.end?this._presentationValue=p({start:this.start,end:this.end},this.locale.calendarPicker):this._presentationValue=""}nameChanged(t,e){super.nameChanged(t,e),this.#a()}#a(){if(!this.name||!this.start||!this.end)this.setFormValue(null);else{const t=new FormData;t.append(this.name,this.start),t.append(this.name,this.end),this.setFormValue(t)}}connectedCallback(){super.connectedCallback(),this.start||(this.start=this.initialStart),this.end||(this.end=this.initialEnd)}#r(){const t=[this.start,this.end].filter(b),e=t.length===1;this._hoverDate&&e&&t.push(this._hoverDate);const[a,s]=t.sort(r.compareDateStr);return{start:a,end:s}}_isDateAriaSelected(t){return this._isDateInSelectedRange(t)}_isDateInSelectedRange(t){const{start:e,end:a}=this.#r();return e&&a?r.compareDateStr(t,e)>=0&&r.compareDateStr(t,a)<=0:!1}_isDateRangeStart(t){return t===this.#r().start}_isDateRangeEnd(t){return t===this.#r().end}_getSelectedDates(){const t=[];return this.start&&t.push(this.start),this.end&&t.push(this.end),t}_onDateClick(t){this.start&&this.end?this.#t({start:t,end:""}):this.start?(this.#t({end:t}),this._closePopup()):this.end?(this.#t({start:t}),this._closePopup()):this.#t({start:t})}get _textFieldPlaceholder(){return c(this.locale.calendarPicker.dateFormatPlaceholder,this.locale.calendarPicker.dateFormatPlaceholder)}_onTextFieldChange(){if(this._presentationValue===""){this.#t({start:"",end:""});return}try{const{start:t,end:e}=f(this._presentationValue,this.locale.calendarPicker);this.#t({start:t,end:e})}catch{const e=this._presentationValue;this.#t({start:"",end:""}),this._presentationValue=e;return}}_onDateMouseEnter(t){this._hoverDate=t}_onDateMouseLeave(){this._hoverDate=void 0}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateRangeError:this.min&&this.start&&r.compareDateStr(this.start,this.min)<0?this.locale.calendarPicker.startDateAfterMinDateError(r.formatPresentationDate(this.min,this.locale.calendarPicker)):this.max&&this.end&&r.compareDateStr(this.end,this.max)>0?this.locale.calendarPicker.endDateBeforeMaxDateError(r.formatPresentationDate(this.max,this.locale.calendarPicker)):null}_isPresentationValueInvalid(){if(this._presentationValue==="")return!1;try{return f(this._presentationValue,this.locale.calendarPicker),!1}catch{return!0}}_onClearClick(){this.#t({start:"",end:""}),super._onClearClick()}formResetCallback(){this.#t({start:this.initialStart,end:this.initialEnd}),super.formResetCallback()}get _pickerButtonLabel(){return this.start&&this.end?this.locale.calendarPicker.changeDatesLabel(p({start:this.start,end:this.end},this.locale.calendarPicker)):this.locale.calendarPicker.chooseDatesLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDatesLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("button, .vwc-button")}get _pickerButtonIcon(){return"calendar-line"}}o([n.attr({mode:"fromView",attribute:"start"})],l.prototype,"initialStart",2);o([n.attr({mode:"fromView",attribute:"end"})],l.prototype,"initialEnd",2);o([n.observable],l.prototype,"start",2);o([n.observable],l.prototype,"end",2);o([n.attr({attribute:"current-start"})],l.prototype,"currentStart",2);o([n.attr({attribute:"current-end"})],l.prototype,"currentEnd",2);o([n.observable],l.prototype,"_numCalendars",2);o([n.observable],l.prototype,"_hoverDate",2);o([n.volatile],l.prototype,"_pickerButtonLabel",1);const S=i=>u.PickerFieldTemplate(i,r.CalendarPickerTemplate(i),{withSeparator:!1,padded:!0}),C=n.defineVividComponent("date-range-picker",l,S,[m.buttonDefinition,_.popupDefinition,D.textFieldDefinition,P.dividerDefinition,g.visuallyHiddenDefinition],{styles:[u.pickerFieldStyles,r.calendarStyles],shadowOptions:{delegatesFocus:!0}}),y=n.createRegisterFunction(C);y();
+"use strict";const m=require("../bundled/definition3.cjs"),_=require("../bundled/definition9.cjs"),D=require("../bundled/definition10.cjs"),P=require("../bundled/definition15.cjs"),n=require("../bundled/vivid-element.cjs"),u=require("../bundled/picker-field.template.cjs"),r=require("../bundled/calendar-picker.template.cjs"),g=require("../bundled/definition14.cjs"),c=(i,t)=>`${i} – ${t}`,p=(i,t)=>c(r.formatPresentationDate(i.start,t),r.formatPresentationDate(i.end,t)),f=(i,t)=>{const e=i.trim().split(/[\s—–-]+/);if(e.length!==2)throw new Error(`Invalid date range: ${i}`);const[a,s]=e.map(h=>r.parsePresentationDate(h,t));return{start:a,end:s}};var V=Object.defineProperty,k=Object.getOwnPropertyDescriptor,o=(i,t,e,a)=>{for(var s=a>1?void 0:a?k(t,e):t,h=i.length-1,d;h>=0;h--)(d=i[h])&&(s=(a?d(t,e,s):d(s))||s);return a&&s&&V(t,e,s),s};const v=i=>typeof i=="string";function b(i){return!!i}class l extends r.MinMaxCalendarPicker(r.CalendarPicker(u.PickerField)){constructor(){super(...arguments),this.initialStart="",this.initialEnd="",this.#e=!1,this.start="",this.end="",this.setFormValue=(t,e)=>{v(t)||super.setFormValue(t,e)},this._numCalendars=2,this._hideDatesOutsideMonth=!0,this._textFieldSize="30"}initialStartChanged(){this.dirtyValue||(this.start=this.initialStart,this.dirtyValue=!1)}initialEndChanged(){this.dirtyValue||(this.end=this.initialEnd,this.dirtyValue=!1)}#e;startChanged(){if(this.start&&!r.isValidDateStr(this.start)){this.start="";return}this.currentStart=this.start,this.dirtyValue=!0,this.#e||this.#i()}endChanged(){if(this.end&&!r.isValidDateStr(this.end)){this.end="";return}this.currentEnd=this.end,this.dirtyValue=!0,this.#e||this.#i()}currentStartChanged(){this.start=this.currentStart}currentEndChanged(){this.end=this.currentEnd}#t(t){this.#e=!0,t.start!==void 0&&(this.start=t.start,this.$emit("input:start")),t.end!==void 0&&(this.end=t.end,this.$emit("input:end")),this.#e=!1,this.$emit("input"),this.$emit("change"),this.#i()}#i(){if(this.start&&this.end){if(r.compareDateStr(this.start,this.end)>0){this.#t({start:this.end,end:this.start});return}this.value=c(this.start,this.end)}else this.value="";this._updatePresentationValue();const t=this.start||this.end;t&&this._adjustSelectedMonthToEnsureVisibilityOf(t),this.#a()}_updatePresentationValue(){this.start&&this.end?this._presentationValue=p({start:this.start,end:this.end},this.locale.calendarPicker):this._presentationValue=""}nameChanged(t,e){super.nameChanged(t,e),this.#a()}#a(){if(!this.name||!this.start||!this.end)this.setFormValue(null);else{const t=new FormData;t.append(this.name,this.start),t.append(this.name,this.end),this.setFormValue(t)}}connectedCallback(){super.connectedCallback(),this.start||(this.start=this.initialStart),this.end||(this.end=this.initialEnd)}#r(){const t=[this.start,this.end].filter(b),e=t.length===1;this._hoverDate&&e&&t.push(this._hoverDate);const[a,s]=t.sort(r.compareDateStr);return{start:a,end:s}}_isDateAriaSelected(t){return this._isDateInSelectedRange(t)}_isDateInSelectedRange(t){const{start:e,end:a}=this.#r();return e&&a?r.compareDateStr(t,e)>=0&&r.compareDateStr(t,a)<=0:!1}_isDateRangeStart(t){return t===this.#r().start}_isDateRangeEnd(t){return t===this.#r().end}_getSelectedDates(){const t=[];return this.start&&t.push(this.start),this.end&&t.push(this.end),t}_onDateClick(t){this.start&&this.end?this.#t({start:t,end:""}):this.start?(this.#t({end:t}),this._closePopup()):this.end?(this.#t({start:t}),this._closePopup()):this.#t({start:t})}get _textFieldPlaceholder(){return c(this.locale.calendarPicker.dateFormatPlaceholder,this.locale.calendarPicker.dateFormatPlaceholder)}_onTextFieldChange(){if(this._presentationValue===""){this.#t({start:"",end:""});return}try{const{start:t,end:e}=f(this._presentationValue,this.locale.calendarPicker);this.#t({start:t,end:e})}catch{const e=this._presentationValue;this.#t({start:"",end:""}),this._presentationValue=e;return}}_onDateMouseEnter(t){this._hoverDate=t}_onDateMouseLeave(){this._hoverDate=void 0}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.calendarPicker.invalidDateRangeError:this.min&&this.start&&r.compareDateStr(this.start,this.min)<0?this.locale.calendarPicker.startDateAfterMinDateError(r.formatPresentationDate(this.min,this.locale.calendarPicker)):this.max&&this.end&&r.compareDateStr(this.end,this.max)>0?this.locale.calendarPicker.endDateBeforeMaxDateError(r.formatPresentationDate(this.max,this.locale.calendarPicker)):null}_isPresentationValueInvalid(){if(this._presentationValue==="")return!1;try{return f(this._presentationValue,this.locale.calendarPicker),!1}catch{return!0}}_onClearClick(){this.#t({start:"",end:""}),super._onClearClick()}formResetCallback(){this.#t({start:this.initialStart,end:this.initialEnd}),super.formResetCallback()}get _pickerButtonLabel(){return this.start&&this.end?this.locale.calendarPicker.changeDatesLabel(p({start:this.start,end:this.end},this.locale.calendarPicker)):this.locale.calendarPicker.chooseDatesLabel}get _dialogLabel(){return this.locale.calendarPicker.chooseDatesLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("button, .vwc-button")}get _pickerButtonIcon(){return"calendar-line"}}o([n.attr({mode:"fromView",attribute:"start"})],l.prototype,"initialStart",2);o([n.attr({mode:"fromView",attribute:"end"})],l.prototype,"initialEnd",2);o([n.observable],l.prototype,"start",2);o([n.observable],l.prototype,"end",2);o([n.attr({attribute:"current-start"})],l.prototype,"currentStart",2);o([n.attr({attribute:"current-end"})],l.prototype,"currentEnd",2);o([n.observable],l.prototype,"_numCalendars",2);o([n.observable],l.prototype,"_hoverDate",2);o([n.volatile],l.prototype,"_pickerButtonLabel",1);const S=i=>u.PickerFieldTemplate(i,r.CalendarPickerTemplate(i),{withSeparator:!1,padded:!0}),C=n.defineVividComponent("date-range-picker",l,S,[m.buttonDefinition,_.popupDefinition,D.textFieldDefinition,P.dividerDefinition,g.visuallyHiddenDefinition],{styles:[u.pickerFieldStyles,r.calendarStyles],shadowOptions:{delegatesFocus:!0}}),y=n.createRegisterFunction(C);y();

package/date-range-picker/index.js

@@ -1,11 +1,11 @@
 import { b as D } from "../bundled/definition3.js";
 import { p as P } from "../bundled/definition9.js";
 import { t as g } from "../bundled/definition10.js";
-import { d as V } from "../bundled/definition14.js";
+import { d as V } from "../bundled/definition15.js";
 import { a as d, o as c, v as k, c as v, d as C } from "../bundled/vivid-element.js";
 import { P as b, a as y, p as S } from "../bundled/picker-field.template.js";
 import { f as o, p as E, M as F, C as R, i as f, b as h, a as w, c as x } from "../bundled/calendar-picker.template.js";
-import { v as M } from "../bundled/definition13.js";
+import { v as M } from "../bundled/definition14.js";
 const p = (i, t) => `${i} – ${t}`, m = (i, t) => p(
   o(i.start, t),
   o(i.end, t)

package/date-time-picker/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const P=require("../bundled/definition9.cjs"),D=require("../bundled/definition3.cjs"),k=require("../bundled/definition10.cjs"),v=require("../bundled/definition14.cjs"),p=require("../bundled/picker-field.template.cjs"),i=require("../bundled/calendar-picker.template.cjs"),s=require("../bundled/vivid-element.cjs"),r=require("../bundled/time-selection-picker.template.cjs"),f=require("../bundled/definition13.cjs"),x=require("../bundled/single-value-picker.cjs"),V=require("../bundled/single-date-picker.cjs"),S=".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}",c=e=>e.split("T")[0]||"",u=e=>e.split("T")[1]||"",T=e=>{const[t="",n=""]=e.split("T");return i.isValidDateStr(t)&&r.isValidTimeStr(n)},g=(e,t,n,d)=>{const[a,l]=e.split("T");return`${i.formatPresentationDate(a,t)} ${r.formatPresentationTime(l,n,d)}`},M=(e,t,n)=>{const[d,...a]=e.split(" "),l=i.parsePresentationDate(d,t),h=r.parsePresentationTime(a.join(" "),n);return`${l}T${h}`};var y=Object.defineProperty,m=(e,t,n,d)=>{for(var a=void 0,l=e.length-1,h;l>=0;l--)(h=e[l])&&(a=h(t,n,a)||a);return a&&y(t,n,a),a};const _={fromView:e=>e&&T(e)?e:"",toView(e){return e}};class o extends r.TimeSelectionPicker(V.SingleDatePickerMixin(x.SingleValuePicker(i.CalendarPicker(p.PickerField)))){constructor(){super(),this._isValidValue=T,this._textFieldSize="30",this.proxy.type="datetime-local",this.proxy.step="1",this.min="",this.minDate="",this.minTime="",this.max="",this.maxDate="",this.maxTime=""}get _resolvedMinDate(){return this.minDate||c(this.min)}get _resolvedMaxDate(){return this.maxDate||c(this.max)}get _resolvedMinTime(){return this.minTime||this.min&&c(this.min)===this._dateValue()&&u(this.min)||""}get _resolvedMaxTime(){return this.maxTime||this.max&&c(this.max)===this._dateValue()&&u(this.max)||""}_toPresentationValue(t){return g(t,this.locale.calendarPicker,this._displaySeconds,this._use12hClock)}_parsePresentationValue(t){return M(t,this.locale.calendarPicker,this._use12hClock)}_dateValue(){return c(this.value)}_withUpdatedDate(t){return`${t}T${u(this.value)||"00:00:00"}`}get _timeValue(){return u(this.value)}_withUpdatedTime(t){return`${c(this.value)||i.currentDateStr()}T${t}`}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.dateTimePicker.invalidDateTimeError:this._dateValue()&&this._resolvedMinDate&&i.compareDateStr(this._dateValue(),this._resolvedMinDate)<0?this.locale.dateTimePicker.dateBeforeMinDateError(i.formatPresentationDate(this._resolvedMinDate,this.locale.calendarPicker)):this._dateValue()&&this._resolvedMaxDate&&i.compareDateStr(this._dateValue(),this._resolvedMaxDate)>0?this.locale.dateTimePicker.dateAfterMaxDateError(i.formatPresentationDate(this._resolvedMaxDate,this.locale.calendarPicker)):this._timeValue&&this._resolvedMinTime&&r.compareTimeStr(this._timeValue,this._resolvedMinTime)<0?this.locale.dateTimePicker.timeBeforeMinTimeError(r.formatPresentationTime(this._resolvedMinTime,this._displaySeconds,this._use12hClock)):this._timeValue&&this._resolvedMaxTime&&r.compareTimeStr(this._timeValue,this._resolvedMaxTime)>0?this.locale.dateTimePicker.timeAfterMaxTimeError(r.formatPresentationTime(this._resolvedMaxTime,this._displaySeconds,this._use12hClock)):null}get _textFieldPlaceholder(){return`${this.locale.calendarPicker.dateFormatPlaceholder} ${this._timePlaceholder}`}get _pickerButtonLabel(){return this.value?this.locale.dateTimePicker.changeDateTimeLabel(this._toPresentationValue(this.value)):this.locale.dateTimePicker.chooseDateTimeLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("#inline-time-picker, button, .vwc-button")}get _pickerButtonIcon(){return"calendar-clock-line"}get _dialogLabel(){return this.locale.dateTimePicker.chooseDateTimeLabel}}m([s.attr({converter:_})],o.prototype,"min");m([s.attr({converter:r.ValidTimeFilter,attribute:"min-time"})],o.prototype,"minTime");m([s.attr({converter:i.ValidDateFilter,attribute:"min-date"})],o.prototype,"minDate");m([s.attr({converter:_})],o.prototype,"max");m([s.attr({converter:r.ValidTimeFilter,attribute:"max-time"})],o.prototype,"maxTime");m([s.attr({converter:i.ValidDateFilter,attribute:"max-date"})],o.prototype,"maxDate");const $=e=>p.PickerFieldTemplate(e,s.html`
+"use strict";const P=require("../bundled/definition9.cjs"),D=require("../bundled/definition3.cjs"),k=require("../bundled/definition10.cjs"),v=require("../bundled/definition15.cjs"),p=require("../bundled/picker-field.template.cjs"),i=require("../bundled/calendar-picker.template.cjs"),s=require("../bundled/vivid-element.cjs"),r=require("../bundled/time-selection-picker.template.cjs"),f=require("../bundled/definition14.cjs"),x=require("../bundled/single-value-picker.cjs"),V=require("../bundled/single-date-picker.cjs"),S=".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}",c=e=>e.split("T")[0]||"",u=e=>e.split("T")[1]||"",T=e=>{const[t="",n=""]=e.split("T");return i.isValidDateStr(t)&&r.isValidTimeStr(n)},g=(e,t,n,d)=>{const[a,l]=e.split("T");return`${i.formatPresentationDate(a,t)} ${r.formatPresentationTime(l,n,d)}`},M=(e,t,n)=>{const[d,...a]=e.split(" "),l=i.parsePresentationDate(d,t),h=r.parsePresentationTime(a.join(" "),n);return`${l}T${h}`};var y=Object.defineProperty,m=(e,t,n,d)=>{for(var a=void 0,l=e.length-1,h;l>=0;l--)(h=e[l])&&(a=h(t,n,a)||a);return a&&y(t,n,a),a};const _={fromView:e=>e&&T(e)?e:"",toView(e){return e}};class o extends r.TimeSelectionPicker(V.SingleDatePickerMixin(x.SingleValuePicker(i.CalendarPicker(p.PickerField)))){constructor(){super(),this._isValidValue=T,this._textFieldSize="30",this.proxy.type="datetime-local",this.proxy.step="1",this.min="",this.minDate="",this.minTime="",this.max="",this.maxDate="",this.maxTime=""}get _resolvedMinDate(){return this.minDate||c(this.min)}get _resolvedMaxDate(){return this.maxDate||c(this.max)}get _resolvedMinTime(){return this.minTime||this.min&&c(this.min)===this._dateValue()&&u(this.min)||""}get _resolvedMaxTime(){return this.maxTime||this.max&&c(this.max)===this._dateValue()&&u(this.max)||""}_toPresentationValue(t){return g(t,this.locale.calendarPicker,this._displaySeconds,this._use12hClock)}_parsePresentationValue(t){return M(t,this.locale.calendarPicker,this._use12hClock)}_dateValue(){return c(this.value)}_withUpdatedDate(t){return`${t}T${u(this.value)||"00:00:00"}`}get _timeValue(){return u(this.value)}_withUpdatedTime(t){return`${c(this.value)||i.currentDateStr()}T${t}`}_getCustomValidationError(){return this._isPresentationValueInvalid()?this.locale.dateTimePicker.invalidDateTimeError:this._dateValue()&&this._resolvedMinDate&&i.compareDateStr(this._dateValue(),this._resolvedMinDate)<0?this.locale.dateTimePicker.dateBeforeMinDateError(i.formatPresentationDate(this._resolvedMinDate,this.locale.calendarPicker)):this._dateValue()&&this._resolvedMaxDate&&i.compareDateStr(this._dateValue(),this._resolvedMaxDate)>0?this.locale.dateTimePicker.dateAfterMaxDateError(i.formatPresentationDate(this._resolvedMaxDate,this.locale.calendarPicker)):this._timeValue&&this._resolvedMinTime&&r.compareTimeStr(this._timeValue,this._resolvedMinTime)<0?this.locale.dateTimePicker.timeBeforeMinTimeError(r.formatPresentationTime(this._resolvedMinTime,this._displaySeconds,this._use12hClock)):this._timeValue&&this._resolvedMaxTime&&r.compareTimeStr(this._timeValue,this._resolvedMaxTime)>0?this.locale.dateTimePicker.timeAfterMaxTimeError(r.formatPresentationTime(this._resolvedMaxTime,this._displaySeconds,this._use12hClock)):null}get _textFieldPlaceholder(){return`${this.locale.calendarPicker.dateFormatPlaceholder} ${this._timePlaceholder}`}get _pickerButtonLabel(){return this.value?this.locale.dateTimePicker.changeDateTimeLabel(this._toPresentationValue(this.value)):this.locale.dateTimePicker.chooseDateTimeLabel}_focusableElsWithinDialog(){return this._dialogEl.querySelectorAll("#inline-time-picker, button, .vwc-button")}get _pickerButtonIcon(){return"calendar-clock-line"}get _dialogLabel(){return this.locale.dateTimePicker.chooseDateTimeLabel}}m([s.attr({converter:_})],o.prototype,"min");m([s.attr({converter:r.ValidTimeFilter,attribute:"min-time"})],o.prototype,"minTime");m([s.attr({converter:i.ValidDateFilter,attribute:"min-date"})],o.prototype,"minDate");m([s.attr({converter:_})],o.prototype,"max");m([s.attr({converter:r.ValidTimeFilter,attribute:"max-time"})],o.prototype,"maxTime");m([s.attr({converter:i.ValidDateFilter,attribute:"max-date"})],o.prototype,"maxDate");const $=e=>p.PickerFieldTemplate(e,s.html`
 			<div class="date-time-picker">
 				${()=>i.CalendarPickerTemplate(e)}
 				<div class="time-picker">

package/date-time-picker/index.js

@@ -1,12 +1,12 @@
 import { p as v } from "../bundled/definition9.js";
 import { b as k } from "../bundled/definition3.js";
 import { t as x } from "../bundled/definition10.js";
-import { d as V } from "../bundled/definition14.js";
+import { d as V } from "../bundled/definition15.js";
 import { P as S, a as g, p as M } from "../bundled/picker-field.template.js";
 import { i as y, f as h, p as b, C as F, d as $, b as u, V as _, a as C, c as E } from "../bundled/calendar-picker.template.js";
 import { a as l, h as w, c as L, d as B } from "../bundled/vivid-element.js";
 import { i as A, f as p, p as j, T as I, c as T, V as P, a as O, b as U } from "../bundled/time-selection-picker.template.js";
-import { v as q } from "../bundled/definition13.js";
+import { v as q } from "../bundled/definition14.js";
 import { S as z } from "../bundled/single-value-picker.js";
 import { S as H } from "../bundled/single-date-picker.js";
 const R = ".date-time-picker{display:flex;gap:28px;padding-inline-start:12px}.time-picker{padding-block:4px 12px}", o = (e) => e.split("T")[0] || "", d = (e) => e.split("T")[1] || "", f = (e) => {

package/dial-pad/definition.cjs

@@ -37,6 +37,21 @@ class DialPad extends localized.Localized(vividElement.VividElement) {
     this.endCallButtonLabel = null;
     this.callButtonLabel = null;
     this.deleteAriaLabel = null;
+    /**
+     * Long-press handling for digit '0' to insert '+'
+     * @internal
+     */
+    this._longPressTimeoutId = null;
+    /**
+     * Suppresses the next click handler after a long press has already handled input
+     * @internal
+     */
+    this._suppressNextClick = false;
+    /**
+     * Tracks if long press completed for keyboard events
+     * @internal
+     */
+    this._keyboardLongPressCompleted = false;
     /**
      *
      * @internal
@@ -65,6 +80,70 @@ class DialPad extends localized.Localized(vividElement.VividElement) {
       this._textFieldEl.reportValidity();
     }
   }
+  /**
+   * @internal
+   */
+  _startLongPress(digit, event) {
+    if (this.disabled || this.callActive || digit !== "0") return;
+    this._clearLongPressTimer();
+    const target = event.currentTarget;
+    this._longPressTimeoutId = window.setTimeout(() => {
+      this._suppressNextClick = true;
+      this.value += "+";
+      this.$emit("keypad-click", target);
+      this.$emit("input");
+      this.$emit("change");
+    }, 600);
+  }
+  /**
+   * @internal
+   */
+  _startKeyboardLongPress() {
+    if (this.disabled || this.callActive) return;
+    if (this._longPressTimeoutId !== null) return;
+    this._keyboardLongPressCompleted = false;
+    this._longPressTimeoutId = window.setTimeout(() => {
+      this._keyboardLongPressCompleted = true;
+      this.value += "+";
+      this.$emit("input");
+      this.$emit("change");
+    }, 650);
+  }
+  /**
+   * @internal
+   */
+  _endLongPress() {
+    this._clearLongPressTimer();
+    window.setTimeout(() => {
+      if (this._suppressNextClick) {
+        this._suppressNextClick = false;
+      }
+    }, 0);
+  }
+  /**
+   * @internal
+   * @returns true if long press completed (timer fired), false otherwise
+   */
+  _endKeyboardLongPress() {
+    const wasLongPress = this._keyboardLongPressCompleted;
+    this._clearLongPressTimer();
+    window.setTimeout(() => {
+      this._keyboardLongPressCompleted = false;
+    }, 0);
+    return wasLongPress;
+  }
+  /**
+   * @internal
+   */
+  _cancelLongPress() {
+    this._clearLongPressTimer();
+  }
+  _clearLongPressTimer() {
+    if (this._longPressTimeoutId !== null) {
+      clearTimeout(this._longPressTimeoutId);
+      this._longPressTimeoutId = null;
+    }
+  }
   /**
    * Moves focus into the diapl-pad.
    *
@@ -179,6 +258,13 @@ const getClasses = ({ noInput }) => fastWebUtilities.classNames("base", ["no-inp
 function handleKeyDown(x, e) {
   if (e.key === fastWebUtilities.keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
     x._onDial();
+  } else if (e.key === " " || e.key === "Space") {
+    if (e.target instanceof HTMLInputElement) {
+      e.preventDefault();
+      if (!e.repeat) {
+        x._startKeyboardLongPress();
+      }
+    }
   } else {
     const elementIndex = DIAL_PAD_BUTTONS.findIndex((x2) => x2.value === e.key);
     if (elementIndex > -1) {
@@ -193,6 +279,42 @@ function handleKeyDown(x, e) {
   }
   return true;
 }
+function handleKeyUp(x, e) {
+  if (e.key === " " || e.key === "Space") {
+    if (e.target instanceof HTMLInputElement) {
+      e.preventDefault();
+      const wasLongPress = x._endKeyboardLongPress();
+      if (!wasLongPress && !x.disabled && !x.callActive) {
+        x.value += " ";
+        x.$emit("input");
+        x.$emit("change");
+      }
+    }
+  }
+  return true;
+}
+function handleButtonKeyDown(digit, { parent: dialPad, event }) {
+  if ((event.key === " " || event.key === "Space") && digit.value === "0") {
+    event.preventDefault();
+    if (!event.repeat) {
+      dialPad._startKeyboardLongPress();
+    }
+  }
+  return true;
+}
+function handleButtonKeyUp(digit, { parent: dialPad, event }) {
+  if ((event.key === " " || event.key === "Space") && digit.value === "0") {
+    event.preventDefault();
+    const wasLongPress = dialPad._endKeyboardLongPress();
+    if (!wasLongPress && !dialPad.disabled && !dialPad.callActive) {
+      onDigitClick(digit, {
+        parent: dialPad,
+        event: new MouseEvent("click", { bubbles: true })
+      });
+    }
+  }
+  return true;
+}
 function syncFieldAndPadValues(x) {
   x.value = x._textFieldEl.value;
 }
@@ -215,6 +337,7 @@ function renderTextField(textFieldTag, buttonTag) {
             ?disabled="${(x) => x.disabled}" helper-text="${(x) => x.helperText}" pattern="${(x) => x.pattern}"
             aria-label="${(x) => x.locale.dialPad.inputLabel}"
             @keydown="${(x, c) => handleKeyDown(x, c.event)}"
+            @keyup="${(x, c) => handleKeyUp(x, c.event)}"
             @input="${syncFieldAndPadValues}"
 			@change="${syncFieldAndPadValues}"
 			@focus="${stopPropagation}"
@@ -236,6 +359,10 @@ function renderTextField(textFieldTag, buttonTag) {
         </${textFieldTag}>`;
 }
 function onDigitClick(digit, { parent: dialPad, event }) {
+  if (dialPad._suppressNextClick) {
+    dialPad._suppressNextClick = false;
+    return;
+  }
   dialPad.value += digit.value;
   dialPad.$emit("keypad-click", event.currentTarget);
   dialPad.$emit("input");
@@ -258,6 +385,18 @@ function renderDigits(buttonTag, iconTag) {
 						?autofocus="${(_, c) => c.parent.autofocus && c.parent.noInput && c.index === 0}"
 					  aria-label="${(x, c) => c.parent.locale.dialPad[x.ariaLabel]}"
 					  ?disabled="${(_, c) => c.parent.disabled}"
+					  @pointerdown="${(x, c) => c.parent._startLongPress(x.value, c.event)}"
+					  @pointerup="${(_, c) => c.parent._endLongPress()}"
+					  @pointercancel="${(_, c) => c.parent._cancelLongPress()}"
+					  @pointerleave="${(_, c) => c.parent._cancelLongPress()}"
+					  @keydown="${(x, c) => handleButtonKeyDown(x, {
+      parent: c.parent,
+      event: c.event
+    })}"
+					  @keyup="${(x, c) => handleButtonKeyUp(x, {
+      parent: c.parent,
+      event: c.event
+    })}"
 					  @click="${onDigitClick}">
 					  	<${iconTag} slot="icon"
 									name="${(x) => x.icon}"