@vonage/vivid 5.21.0 → 5.22.0

package/data-grid/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/children.cjs`),a=require(`../bundled/when.cjs`),o=require(`../bundled/definition.cjs`),s=require(`../bundled/decorate.cjs`),c=require(`../bundled/definition2.cjs`),l=require(`../bundled/class-names.cjs`),u=require(`../bundled/key-codes.cjs`),d=require(`../bundled/host-semantics.cjs`),f=require(`../bundled/data-grid.options.cjs`);var p=`focus`,m=`focusin`,h=`focusout`,g=`keydown`,_=`: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%);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{block-size:inherit;inline-size:100%;max-block-size:inherit;position:relative;overflow:auto}`,v=`.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{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:grid}:host([row-type=sticky-header]) .base{z-index:9;background:var(--data-grid-row-background,var(--vvd-color-canvas));position:sticky;top:0}:host([row-type=hidden-header]) .base{display:none}:host([selected]:not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}`,y=`:host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:"";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.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{box-sizing:border-box;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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}:host(:focus-visible) .base{--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))}: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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_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([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}`,b={none:`none`,singleRow:`single-row`,multiRow:`multi-row`,singleCell:`single-cell`,multiCell:`multi-cell`},x=class e extends t.t{static generateTemplateColumns(e){let t=``;return e.forEach(e=>{t=`${t}${t===``?``:` `}1fr`}),t}noTabbingChanged(){this.$fastController.isConnected&&this.#e()}#e(){this.setAttribute(`tabIndex`,this.noTabbing||this.contains(document.activeElement)?`-1`:`0`)}generateHeaderChanged(){this.$fastController.isConnected&&this.toggleGeneratedHeader()}gridTemplateColumnsChanged(){this.$fastController.isConnected&&(this.updateRowIndexes(),this.fixedColumns&&this.fixedColumns>0&&this.applyFixedColumns())}rowsDataChanged(){this.columnDefinitions===null&&this.rowsData.length>0&&(this.columnDefinitions=e.generateColumns(this.rowsData[0])),this.$fastController.isConnected&&this.toggleGeneratedHeader()}columnDefinitionsChanged(){if(this.columnDefinitions===null){this.generatedGridTemplateColumns=``;return}this.generatedGridTemplateColumns=e.generateTemplateColumns(this.columnDefinitions),this.$fastController.isConnected&&(this.columnDefinitionsStale=!0,this.queueRowIndexUpdate())}headerCellItemTemplateChanged(){this.$fastController.isConnected&&this.generatedHeader!==null&&(this.generatedHeader.headerCellItemTemplate=this.headerCellItemTemplate)}focusRowIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}focusColumnIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}fixedColumnsChanged(){this.$fastController.isConnected&&(this.applyFixedColumns(),this.setupResizeObserver())}setupResizeObserver(){this.resizeObserver&&=(this.resizeObserver.disconnect(),void 0),typeof ResizeObserver<`u`&&this.fixedColumns&&this.fixedColumns>0&&(this.resizeObserver=new ResizeObserver(()=>{this.applyFixedColumns()}),this.resizeObserver.observe(this))}connectedCallback(){super.connectedCallback(),this.rowItemTemplate===void 0&&(this.rowItemTemplate=this.defaultRowItemTemplate),this.behaviorOrchestrator===null&&(this.behaviorOrchestrator=t.f.create(this),this.$fastController.addBehavior(this.behaviorOrchestrator),this.behaviorOrchestrator.addBehaviorFactory(new n.t(n.r(e=>e.rowsData),n.r(e=>e.rowItemTemplate),{positioning:!0}),this.appendChild(document.createComment(``)))),this.toggleGeneratedHeader(),this.addEventListener(`row-focused`,this.handleRowFocus),this.addEventListener(p,this.handleFocus),this.addEventListener(g,this.handleKeydown),this.addEventListener(h,this.handleFocusOut),this.observer=new MutationObserver(this.onChildListChange),this.observer.observe(this,{childList:!0}),this.setupResizeObserver(),t.M.enqueue(this.queueRowIndexUpdate),this.#e(),t.k.getNotifier(this).subscribe(this.#s,`columnDefinitions`)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`row-focused`,this.handleRowFocus),this.removeEventListener(p,this.handleFocus),this.removeEventListener(g,this.handleKeydown),this.removeEventListener(h,this.handleFocusOut),this.observer.disconnect(),this.resizeObserver&&=(this.resizeObserver.disconnect(),void 0),this.generatedHeader=null,t.k.getNotifier(this).unsubscribe(this.#s,`columnDefinitions`)}handleRowFocus(e){this.isUpdatingFocus=!0;let t=e.target;this.focusRowIndex=this.rowElements.indexOf(t),this.focusColumnIndex=t.focusColumnIndex,this.setAttribute(`tabIndex`,`-1`),this.isUpdatingFocus=!1}handleFocus(e){this.focusOnCell(this.focusRowIndex,this.focusColumnIndex,!0)}handleFocusOut(e){(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute(`tabIndex`,this.noTabbing?`-1`:`0`)}handleKeydown(e){if(e.defaultPrevented)return;let t,n=this.rowElements.length-1,r=this.offsetHeight+this.scrollTop,i=this.rowElements[n];switch(e.key){case u.i:e.preventDefault(),this.focusOnCell(this.focusRowIndex-1,this.focusColumnIndex,!0);break;case u.t:e.preventDefault(),this.focusOnCell(this.focusRowIndex+1,this.focusColumnIndex,!0);break;case u.l:if(e.preventDefault(),this.rowElements.length===0){this.focusOnCell(0,0,!1);break}if(this.focusRowIndex===0){this.focusOnCell(0,this.focusColumnIndex,!1);return}for(t=this.focusRowIndex-1;t>=0;t--){let e=this.rowElements[t];if(e.offsetTop<this.scrollTop){this.scrollTop=e.offsetTop+e.clientHeight-this.clientHeight;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case u.c:if(e.preventDefault(),this.rowElements.length===0){this.focusOnCell(0,0,!1);break}if(this.focusRowIndex>=n||i.offsetTop+i.offsetHeight<=r){this.focusOnCell(n,this.focusColumnIndex,!1);return}for(t=this.focusRowIndex+1;t<=n;t++){let e=this.rowElements[t];if(e.offsetTop+e.offsetHeight>r){let t=0;this.generateHeader===f.a.sticky&&this.generatedHeader!==null&&(t=this.generatedHeader.clientHeight),this.scrollTop=e.offsetTop-t;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case u.s:e.ctrlKey&&(e.preventDefault(),this.focusOnCell(0,0,!0));break;case`End`:e.ctrlKey&&this.columnDefinitions!==null&&(e.preventDefault(),this.focusOnCell(this.rowElements.length-1,this.columnDefinitions.length-1,!0));break}}queueFocusUpdate(){this.isUpdatingFocus&&this.contains(document.activeElement)||this.pendingFocusUpdate===!1&&(this.pendingFocusUpdate=!0,t.M.enqueue(()=>this.updateFocus()))}updateFocus(){this.pendingFocusUpdate=!1,this.focusOnCell(this.focusRowIndex,this.focusColumnIndex,!0)}toggleGeneratedHeader(){if(this.generatedHeader!==null&&(this.removeChild(this.generatedHeader),this.generatedHeader=null),this.generateHeader!==f.a.none&&this.columnDefinitions!==null){let e=document.createElement(this.rowElementTag);this.generatedHeader=e,this.generatedHeader.columnDefinitions=this.columnDefinitions,this.generatedHeader.gridTemplateColumns=this.gridTemplateColumns,this.generatedHeader.rowType=this.generateHeader===f.a.sticky?f.i.stickyHeader:f.i.header,this.firstChild!==null&&this.insertBefore(e,this.firstChild);return}}slottedRowElementsChanged(e,t){this._resetSelection()}get#t(){return this.rowElements.filter(e=>e.selected)}get#n(){return this.rowElements.reduce((e,t)=>{let n=Array.from(t.children).filter(e=>e.selected);return e.concat(n)},[])}selectionModeChanged(e){if(e===void 0){t.M.enqueue(this._resetSelection);return}this._resetSelection(!0)}#r;#i;#a;#o;constructor(){super(),this.noTabbing=!1,this.generateHeader=f.a.default,this.rowsData=[],this.columnDefinitions=null,this.focusRowIndex=0,this.focusColumnIndex=0,this.fixedColumnsPositions=[],this.behaviorOrchestrator=null,this.generatedHeader=null,this.isUpdatingFocus=!1,this.pendingFocusUpdate=!1,this.rowindexUpdateQueued=!1,this.columnDefinitionsStale=!0,this.generatedGridTemplateColumns=``,this.focusOnCell=(e,t,n)=>{if(this.rowElements.length===0){this.focusRowIndex=0,this.focusColumnIndex=0;return}let r=Math.max(0,Math.min(this.rowElements.length-1,e)),i=this.rowElements[r].querySelectorAll(`[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]`),a=i[Math.max(0,Math.min(i.length-1,t))];n&&this.scrollHeight!==this.clientHeight&&(r<this.focusRowIndex&&this.scrollTop>0||r>this.focusRowIndex&&this.scrollTop<this.scrollHeight-this.clientHeight)&&a.scrollIntoView({block:`center`,inline:`center`}),a.focus()},this.onChildListChange=(e,t)=>{e&&e.length&&(e.forEach(e=>{e.addedNodes.forEach(e=>{e.nodeType===1&&(e.getAttribute(`role`)===`row`||e.getAttribute(`row-type`)===`default`)&&(e.columnDefinitions=this.columnDefinitions)})}),this.queueRowIndexUpdate())},this.queueRowIndexUpdate=()=>{this.rowindexUpdateQueued||(this.rowindexUpdateQueued=!0,t.M.enqueue(this.updateRowIndexes))},this.updateRowIndexes=()=>{let e=this.gridTemplateColumns;if(e===void 0){if(this.generatedGridTemplateColumns===``&&this.rowElements.length>0){let e=this.rowElements[0];this.generatedGridTemplateColumns=Array(e.cellElements.length).fill(`1fr`).join(` `)}e=this.generatedGridTemplateColumns}this.rowElements.forEach((t,n)=>{let r=t;r.rowIndex=n,r.gridTemplateColumns=e,this.columnDefinitionsStale&&(r.columnDefinitions=this.columnDefinitions)}),this.rowindexUpdateQueued=!1,this.columnDefinitionsStale=!1},this.#r=e=>{(e.key===`Enter`||e.key===` `)&&this.#i(e)},this.#i=({target:e,ctrlKey:t,shiftKey:n,metaKey:r})=>{if(!(e.getAttribute(`role`)!==`gridcell`||e.getAttribute(`cell-type`)!==`default`)){if(this.selectionMode===b.singleCell||this.selectionMode===b.multiCell){this.#a({target:e,ctrlKey:t,shiftKey:n,metaKey:r});return}(this.selectionMode===b.singleRow||this.selectionMode===b.multiRow)&&this.#o({target:e,ctrlKey:t,shiftKey:n,metaKey:r})}},this.#a=({target:e,ctrlKey:t,shiftKey:n,metaKey:r})=>{let i=e;if(this.selectionMode===b.multiCell&&(t||n||r))i.selected=!this.#n.includes(i);else{let e=i.selected;this._resetSelection(!0),i.selected=!e}},this.#o=({target:e,ctrlKey:t,shiftKey:n,metaKey:r})=>{let i=e.parentNode;if(this.selectionMode===b.multiRow&&(t||n||r))i.selected=!this.#t.includes(i);else{let e=i.selected;this._resetSelection(!0),i.selected=!e}},this.#s={handleChange(e,t){t===`columnDefinitions`&&e.$fastController.isConnected&&e.toggleGeneratedHeader()}},this._resetSelection=(e=!1)=>{let t=Array.from(this.querySelectorAll(`[role="gridcell"], [cell-type="default"]`)),n=Array.from(this.querySelectorAll(`[role="row"], [row-type="default"]`));if(this.selectionMode===b.singleCell||this.selectionMode===b.multiCell){for(let n of t)n._selectable=!0,n.selected=e?!1:n.selected||!1;for(let e of n)e._selectable=!1,e.selected=!1}if(this.selectionMode===b.none)for(let e of[...t,...n])e._selectable=!1,e.selected=!1;if(this.selectionMode===b.singleRow||this.selectionMode===b.multiRow){for(let e of t)e._selectable=!1,e.selected=!1;for(let t of n)t._selectable=!0,t.selected=e?!1:t.selected||!1}},this.addEventListener(`click`,this.#i),this.addEventListener(`keydown`,this.#r)}#s;static generateColumns(e){return Object.keys(e).map((e,t)=>({columnDataKey:e,gridColumn:`${t}`}))}applyFixedColumns(){if(!this.fixedColumns||this.fixedColumns<=0){this.clearFixedColumns();return}this.calculateFixedColumnPositions(),this.applyFixedColumnStyling()}applyFixedColumnStyling(){this.rowElements.forEach(e=>{let t=e.querySelectorAll(`[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]`);this.fixedColumnsPositions.forEach((e,n)=>{if(n<t.length){let r=t[n];typeof r.setFixedPosition==`function`&&r.setFixedPosition(`${e}px`)}})})}calculateFixedColumnPositions(){if(this.fixedColumnsPositions=[],this.rowElements.length===0)return;let e=this.rowElements[0].querySelectorAll(`[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]`),t=0;for(let n=0;n<Math.min(this.fixedColumns,e.length);n++)this.fixedColumnsPositions.push(t),t+=e[n].offsetWidth}clearFixedColumns(){if(this.rowElements.length===0){this.fixedColumnsPositions=[];return}this.rowElements.forEach(e=>{let t=e.querySelectorAll(`[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]`);this.fixedColumnsPositions.forEach((e,n)=>{if(n<t.length){let e=t[n];typeof e.setFixedPosition==`function`&&e.setFixedPosition(void 0)}})}),this.fixedColumnsPositions=[]}};s.t([t.m({attribute:`no-tabbing`,mode:`boolean`})],x.prototype,`noTabbing`,void 0),s.t([t.m({attribute:`generate-header`})],x.prototype,`generateHeader`,void 0),s.t([t.m({attribute:`grid-template-columns`})],x.prototype,`gridTemplateColumns`,void 0),s.t([t.A],x.prototype,`rowsData`,void 0),s.t([t.A],x.prototype,`columnDefinitions`,void 0),s.t([t.A],x.prototype,`rowItemTemplate`,void 0),s.t([t.A],x.prototype,`cellItemTemplate`,void 0),s.t([t.A],x.prototype,`headerCellItemTemplate`,void 0),s.t([t.A],x.prototype,`focusRowIndex`,void 0),s.t([t.A],x.prototype,`focusColumnIndex`,void 0),s.t([t.m({attribute:`fixed-columns`,converter:t.h})],x.prototype,`fixedColumns`,void 0),s.t([t.A],x.prototype,`defaultRowItemTemplate`,void 0),s.t([t.A],x.prototype,`rowElementTag`,void 0),s.t([t.A],x.prototype,`rowElements`,void 0),s.t([t.A],x.prototype,`slottedRowElements`,void 0),s.t([t.m({attribute:`selection-mode`})],x.prototype,`selectionMode`,void 0);var S=class extends d.t(t.t){constructor(...e){super(...e),this.rowType=f.i.default,this.rowData=null,this.columnDefinitions=null,this.behaviorOrchestrator=null,this.focusColumnIndex=0,this.updateRowStyle=()=>{this.style.gridTemplateColumns=this.gridTemplateColumns},this.ariaSelected=null,this._selectable=!1,this.selected=!1}gridTemplateColumnsChanged(){this.$fastController.isConnected&&this.updateRowStyle()}rowTypeChanged(){this.$fastController.isConnected&&this.updateItemTemplate()}cellItemTemplateChanged(){this.updateItemTemplate()}headerCellItemTemplateChanged(){this.updateItemTemplate()}connectedCallback(){super.connectedCallback(),this.behaviorOrchestrator===null&&(this.updateItemTemplate(),this.behaviorOrchestrator=t.f.create(this),this.$fastController.addBehavior(this.behaviorOrchestrator),this.behaviorOrchestrator.addBehaviorFactory(new n.t(n.r(e=>e.columnDefinitions),n.r(e=>e.activeCellItemTemplate),{positioning:!0}),this.appendChild(document.createComment(``)))),this.addEventListener(`cell-focused`,this.handleCellFocus),this.addEventListener(h,this.handleFocusout),this.addEventListener(g,this.handleKeydown),this.updateRowStyle()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`cell-focused`,this.handleCellFocus),this.removeEventListener(h,this.handleFocusout),this.removeEventListener(g,this.handleKeydown)}handleFocusout(e){this.contains(document.activeElement)||(this.focusColumnIndex=0)}handleCellFocus(e){this.focusColumnIndex=this.cellElements.indexOf(e.target),this.$emit(`row-focused`,this)}handleKeydown(e){if(e.defaultPrevented)return;let t=0;switch(e.key){case u.n:t=Math.max(0,this.focusColumnIndex-1),this.cellElements[t].focus(),e.preventDefault();break;case u.r:t=Math.min(this.cellElements.length-1,this.focusColumnIndex+1),this.cellElements[t].focus(),e.preventDefault();break;case u.s:e.ctrlKey||(this.cellElements[0].focus(),e.preventDefault());break;case`End`:e.ctrlKey||(this.cellElements[this.cellElements.length-1].focus(),e.preventDefault());break}}updateItemTemplate(){this.activeCellItemTemplate=this.rowType===f.i.default&&this.cellItemTemplate!==void 0?this.cellItemTemplate:this.rowType===f.i.default&&this.cellItemTemplate===void 0?this.defaultCellItemTemplate:this.headerCellItemTemplate===void 0?this.defaultHeaderCellItemTemplate:this.headerCellItemTemplate}ariaSelectedChanged(e,t){super.ariaSelectedChanged(e,t),this._selectable=t!==null,this.selected=t===`true`}};s.t([t.m({attribute:`grid-template-columns`})],S.prototype,`gridTemplateColumns`,void 0),s.t([t.m({attribute:`row-type`})],S.prototype,`rowType`,void 0),s.t([t.A],S.prototype,`rowData`,void 0),s.t([t.A],S.prototype,`columnDefinitions`,void 0),s.t([t.A],S.prototype,`cellItemTemplate`,void 0),s.t([t.A],S.prototype,`headerCellItemTemplate`,void 0),s.t([t.A],S.prototype,`rowIndex`,void 0),s.t([t.A],S.prototype,`activeCellItemTemplate`,void 0),s.t([t.A],S.prototype,`defaultCellItemTemplate`,void 0),s.t([t.A],S.prototype,`defaultHeaderCellItemTemplate`,void 0),s.t([t.A],S.prototype,`cellElements`,void 0),s.t([t.A],S.prototype,`_selectable`,void 0),s.t([t.m({mode:`boolean`})],S.prototype,`selected`,void 0);function C(e){let n=e.tagFor(S);return t.p`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/children.cjs`),a=require(`../bundled/when.cjs`),o=require(`../bundled/definition.cjs`),s=require(`../bundled/decorate.cjs`),c=require(`../bundled/definition2.cjs`),l=require(`../bundled/class-names.cjs`),u=require(`../bundled/key-codes.cjs`),d=require(`../bundled/host-semantics.cjs`),f=require(`../bundled/data-grid.options.cjs`);var p=`focus`,m=`focusin`,h=`focusout`,g=`keydown`,_=`: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%);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{block-size:inherit;inline-size:100%;max-block-size:inherit;position:relative;overflow:auto}`,v=`.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{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:grid}:host([row-type=sticky-header]) .base{z-index:9;background:var(--data-grid-row-background,var(--vvd-color-canvas));position:sticky;top:0}:host([row-type=hidden-header]) .base{display:none}:host([selected]:not([row-type*=header])) .base{background-color:var(--_appearance-color-fill)}`,y=`:host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){z-index:5;background:var(--data-grid-cell-background,var(--vvd-color-surface-2dp));position:sticky}:host([data-fixed]):before{z-index:1;width:1px;content:"";pointer-events:none;block-size:100%;position:absolute;top:0;right:0;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d}.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{box-sizing:border-box;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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));align-items:center;padding-block:13px 14px;padding-inline:12px;display:flex}:host(:focus-visible) .base{--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))}: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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_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([selected]:not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}.content{align-items:center;display:flex;overflow:hidden}.content[role=button]{cursor:pointer}slot:not([name]){text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space,var(--_data-grid-cell-default-white-space));display:block;overflow:hidden}:host(:not([cell-type=columnheader][aria-sort])) slot:not([name]){inline-size:100%}.header-icon{flex-shrink:0;margin-inline-start:16px}slot[name=action-items]{flex-shrink:0;align-items:center;display:flex}.base.has-action-items slot[name=action-items]{margin-inline-start:16px}`,b={none:`none`,singleRow:`single-row`,multiRow:`multi-row`,singleCell:`single-cell`,multiCell:`multi-cell`},x=class e extends t.t{static generateTemplateColumns(e){let t=``;return e.forEach(e=>{t=`${t}${t===``?``:` `}1fr`}),t}noTabbingChanged(){this.$fastController.isConnected&&this.#e()}#e(){this.setAttribute(`tabIndex`,this.noTabbing||this.contains(document.activeElement)?`-1`:`0`)}generateHeaderChanged(){this.$fastController.isConnected&&this.toggleGeneratedHeader()}gridTemplateColumnsChanged(){this.$fastController.isConnected&&(this.updateRowIndexes(),this.fixedColumns&&this.fixedColumns>0&&this.applyFixedColumns())}rowsDataChanged(){this.columnDefinitions===null&&this.rowsData.length>0&&(this.columnDefinitions=e.generateColumns(this.rowsData[0])),this.$fastController.isConnected&&this.toggleGeneratedHeader()}columnDefinitionsChanged(){if(this.columnDefinitions===null){this.generatedGridTemplateColumns=``;return}this.generatedGridTemplateColumns=e.generateTemplateColumns(this.columnDefinitions),this.$fastController.isConnected&&(this.columnDefinitionsStale=!0,this.queueRowIndexUpdate())}headerCellItemTemplateChanged(){this.$fastController.isConnected&&this.generatedHeader!==null&&(this.generatedHeader.headerCellItemTemplate=this.headerCellItemTemplate)}focusRowIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}focusColumnIndexChanged(){this.$fastController.isConnected&&this.queueFocusUpdate()}fixedColumnsChanged(){this.$fastController.isConnected&&(this.applyFixedColumns(),this.setupResizeObserver())}setupResizeObserver(){this.resizeObserver&&=(this.resizeObserver.disconnect(),void 0),typeof ResizeObserver<`u`&&this.fixedColumns&&this.fixedColumns>0&&(this.resizeObserver=new ResizeObserver(()=>{this.applyFixedColumns()}),this.resizeObserver.observe(this))}connectedCallback(){super.connectedCallback(),this.rowItemTemplate===void 0&&(this.rowItemTemplate=this.defaultRowItemTemplate),this.behaviorOrchestrator===null&&(this.behaviorOrchestrator=t.f.create(this),this.$fastController.addBehavior(this.behaviorOrchestrator),this.behaviorOrchestrator.addBehaviorFactory(new n.t(n.r(e=>e.rowsData),n.r(e=>e.rowItemTemplate),{positioning:!0}),this.appendChild(document.createComment(``)))),this.toggleGeneratedHeader(),this.addEventListener(`row-focused`,this.handleRowFocus),this.addEventListener(p,this.handleFocus),this.addEventListener(g,this.handleKeydown),this.addEventListener(h,this.handleFocusOut),this.observer=new MutationObserver(this.onChildListChange),this.observer.observe(this,{childList:!0}),this.setupResizeObserver(),t.M.enqueue(this.queueRowIndexUpdate),this.#e(),t.k.getNotifier(this).subscribe(this.#s,`columnDefinitions`)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`row-focused`,this.handleRowFocus),this.removeEventListener(p,this.handleFocus),this.removeEventListener(g,this.handleKeydown),this.removeEventListener(h,this.handleFocusOut),this.observer.disconnect(),this.resizeObserver&&=(this.resizeObserver.disconnect(),void 0),this.generatedHeader=null,t.k.getNotifier(this).unsubscribe(this.#s,`columnDefinitions`)}handleRowFocus(e){this.isUpdatingFocus=!0;let t=e.target;this.focusRowIndex=this.rowElements.indexOf(t),this.focusColumnIndex=t.focusColumnIndex,this.setAttribute(`tabIndex`,`-1`),this.isUpdatingFocus=!1}handleFocus(e){this.focusOnCell(this.focusRowIndex,this.focusColumnIndex,!0)}handleFocusOut(e){(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute(`tabIndex`,this.noTabbing?`-1`:`0`)}handleKeydown(e){if(e.defaultPrevented)return;let t,n=this.rowElements.length-1,r=this.offsetHeight+this.scrollTop,i=this.rowElements[n];switch(e.key){case u.i:e.preventDefault(),this.focusOnCell(this.focusRowIndex-1,this.focusColumnIndex,!0);break;case u.t:e.preventDefault(),this.focusOnCell(this.focusRowIndex+1,this.focusColumnIndex,!0);break;case u.l:if(e.preventDefault(),this.rowElements.length===0){this.focusOnCell(0,0,!1);break}if(this.focusRowIndex===0){this.focusOnCell(0,this.focusColumnIndex,!1);return}for(t=this.focusRowIndex-1;t>=0;t--){let e=this.rowElements[t];if(e.offsetTop<this.scrollTop){this.scrollTop=e.offsetTop+e.clientHeight-this.clientHeight;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case u.c:if(e.preventDefault(),this.rowElements.length===0){this.focusOnCell(0,0,!1);break}if(this.focusRowIndex>=n||i.offsetTop+i.offsetHeight<=r){this.focusOnCell(n,this.focusColumnIndex,!1);return}for(t=this.focusRowIndex+1;t<=n;t++){let e=this.rowElements[t];if(e.offsetTop+e.offsetHeight>r){let t=0;this.generateHeader===f.a.sticky&&this.generatedHeader!==null&&(t=this.generatedHeader.clientHeight),this.scrollTop=e.offsetTop-t;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case u.s:e.ctrlKey&&(e.preventDefault(),this.focusOnCell(0,0,!0));break;case`End`:e.ctrlKey&&this.columnDefinitions!==null&&(e.preventDefault(),this.focusOnCell(this.rowElements.length-1,this.columnDefinitions.length-1,!0));break}}queueFocusUpdate(){this.isUpdatingFocus&&this.contains(document.activeElement)||this.pendingFocusUpdate||(this.pendingFocusUpdate=!0,t.M.enqueue(()=>this.updateFocus()))}updateFocus(){this.pendingFocusUpdate=!1,this.focusOnCell(this.focusRowIndex,this.focusColumnIndex,!0)}toggleGeneratedHeader(){if(this.generatedHeader!==null&&(this.removeChild(this.generatedHeader),this.generatedHeader=null),this.generateHeader!==f.a.none&&this.columnDefinitions!==null){let e=document.createElement(this.rowElementTag);this.generatedHeader=e,this.generatedHeader.columnDefinitions=this.columnDefinitions,this.generatedHeader.gridTemplateColumns=this.gridTemplateColumns,this.generatedHeader.rowType=this.generateHeader===f.a.sticky?f.i.stickyHeader:f.i.header,this.firstChild!==null&&this.insertBefore(e,this.firstChild);return}}slottedRowElementsChanged(){this._resetSelection()}get#t(){return this.rowElements.filter(e=>e.selected)}get#n(){return this.rowElements.reduce((e,t)=>{let n=Array.from(t.children).filter(e=>e.selected);return e.concat(n)},[])}selectionModeChanged(e){if(e===void 0){t.M.enqueue(this._resetSelection);return}this._resetSelection(!0)}#r;#i;#a;#o;constructor(){super(),this.noTabbing=!1,this.generateHeader=f.a.default,this.rowsData=[],this.columnDefinitions=null,this.focusRowIndex=0,this.focusColumnIndex=0,this.fixedColumnsPositions=[],this.behaviorOrchestrator=null,this.generatedHeader=null,this.isUpdatingFocus=!1,this.pendingFocusUpdate=!1,this.rowindexUpdateQueued=!1,this.columnDefinitionsStale=!0,this.generatedGridTemplateColumns=``,this.focusOnCell=(e,t,n)=>{if(this.rowElements.length===0){this.focusRowIndex=0,this.focusColumnIndex=0;return}let r=Math.max(0,Math.min(this.rowElements.length-1,e)),i=this.rowElements[r].querySelectorAll(`[role="cell"], [role="gridcell"], [role="columnheader"], [role="rowheader"], [data-vvd-component="data-grid-cell"]`),a=i[Math.max(0,Math.min(i.length-1,t))];n&&this.scrollHeight!==this.clientHeight&&(r<this.focusRowIndex&&this.scrollTop>0||r>this.focusRowIndex&&this.scrollTop<this.scrollHeight-this.clientHeight)&&a.scrollIntoView({block:`center`,inline:`center`}),a.focus()},this.onChildListChange=(e,t)=>{e&&e.length&&(e.forEach(e=>{e.addedNodes.forEach(e=>{e.nodeType===1&&(e.getAttribute(`role`)===`row`||e.getAttribute(`row-type`)===`default`)&&(e.columnDefinitions=this.columnDefinitions)})}),this.queueRowIndexUpdate())},this.queueRowIndexUpdate=()=>{this.rowindexUpdateQueued||(this.rowindexUpdateQueued=!0,t.M.enqueue(this.updateRowIndexes))},this.updateRowIndexes=()=>{let e=this.gridTemplateColumns;if(e===void 0){if(this.generatedGridTemplateColumns===``&&this.rowElements.length>0){let e=this.rowElements[0];this.generatedGridTemplateColumns=Array(e.cellElements.length).fill(`1fr`).join(` `)}e=this.generatedGridTemplateColumns}this.rowElements.forEach((t,n)=>{let r=t;r.rowIndex=n,r.gridTemplateColumns=e,this.columnDefinitionsStale&&(r.columnDefinitions=this.columnDefinitions)}),this.rowindexUpdateQueued=!1,this.columnDefinitionsStale=!1},this.#r=e=>{(e.key===`Enter`||e.key===` `)&&this.#i(e)},this.#i=({target:e,ctrlKey:t,shiftKey:n,metaKey:r})=>{if(!(e.getAttribute(`role`)!==`gridcell`||e.getAttribute(`cell-type`)!==`default`)){if(this.selectionMode===b.singleCell||this.selectionMode===b.multiCell){this.#a({target:e,ctrlKey:t,shiftKey:n,metaKey:r});return}(this.selectionMode===b.singleRow||this.selectionMode===b.multiRow)&&this.#o({target:e,ctrlKey:t,shiftKey:n,metaKey:r})}},this.#a=({target:e,ctrlKey:t,shiftKey:n,metaKey:r})=>{let i=e;if(this.selectionMode===b.multiCell&&(t||n||r))i.selected=!this.#n.includes(i);else{let e=i.selected;this._resetSelection(!0),i.selected=!e}},this.#o=({target:e,ctrlKey:t,shiftKey:n,metaKey:r})=>{let i=e.parentNode;if(this.selectionMode===b.multiRow&&(t||n||r))i.selected=!this.#t.includes(i);else{let e=i.selected;this._resetSelection(!0),i.selected=!e}},this.#s={handleChange(e,t){t===`columnDefinitions`&&e.$fastController.isConnected&&e.toggleGeneratedHeader()}},this._resetSelection=(e=!1)=>{let t=Array.from(this.querySelectorAll(`[role="gridcell"], [cell-type="default"]`)),n=Array.from(this.querySelectorAll(`[role="row"], [row-type="default"]`));if(this.selectionMode===b.singleCell||this.selectionMode===b.multiCell){for(let n of t)n._selectable=!0,n.selected=e?!1:n.selected||!1;for(let e of n)e._selectable=!1,e.selected=!1}if(this.selectionMode===b.none)for(let e of[...t,...n])e._selectable=!1,e.selected=!1;if(this.selectionMode===b.singleRow||this.selectionMode===b.multiRow){for(let e of t)e._selectable=!1,e.selected=!1;for(let t of n)t._selectable=!0,t.selected=e?!1:t.selected||!1}},this.addEventListener(`click`,this.#i),this.addEventListener(`keydown`,this.#r)}#s;static generateColumns(e){return Object.keys(e).map((e,t)=>({columnDataKey:e,gridColumn:`${t}`}))}applyFixedColumns(){if(!this.fixedColumns||this.fixedColumns<=0){this.clearFixedColumns();return}this.calculateFixedColumnPositions(),this.applyFixedColumnStyling()}applyFixedColumnStyling(){this.rowElements.forEach(e=>{let t=e.querySelectorAll(`[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]`);this.fixedColumnsPositions.forEach((e,n)=>{if(n<t.length){let r=t[n];typeof r.setFixedPosition==`function`&&r.setFixedPosition(`${e}px`)}})})}calculateFixedColumnPositions(){if(this.fixedColumnsPositions=[],this.rowElements.length===0)return;let e=this.rowElements[0].querySelectorAll(`[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]`),t=0;for(let n=0;n<Math.min(this.fixedColumns,e.length);n++)this.fixedColumnsPositions.push(t),t+=e[n].offsetWidth}clearFixedColumns(){if(this.rowElements.length===0){this.fixedColumnsPositions=[];return}this.rowElements.forEach(e=>{let t=e.querySelectorAll(`[role="cell"], [role="gridcell"], [role="columnheader"], [cell-type="default"], [cell-type="columnheader"]`);this.fixedColumnsPositions.forEach((e,n)=>{if(n<t.length){let e=t[n];typeof e.setFixedPosition==`function`&&e.setFixedPosition(void 0)}})}),this.fixedColumnsPositions=[]}};s.t([t.m({attribute:`no-tabbing`,mode:`boolean`})],x.prototype,`noTabbing`,void 0),s.t([t.m({attribute:`generate-header`})],x.prototype,`generateHeader`,void 0),s.t([t.m({attribute:`grid-template-columns`})],x.prototype,`gridTemplateColumns`,void 0),s.t([t.A],x.prototype,`rowsData`,void 0),s.t([t.A],x.prototype,`columnDefinitions`,void 0),s.t([t.A],x.prototype,`rowItemTemplate`,void 0),s.t([t.A],x.prototype,`cellItemTemplate`,void 0),s.t([t.A],x.prototype,`headerCellItemTemplate`,void 0),s.t([t.A],x.prototype,`focusRowIndex`,void 0),s.t([t.A],x.prototype,`focusColumnIndex`,void 0),s.t([t.m({attribute:`fixed-columns`,converter:t.h})],x.prototype,`fixedColumns`,void 0),s.t([t.A],x.prototype,`defaultRowItemTemplate`,void 0),s.t([t.A],x.prototype,`rowElementTag`,void 0),s.t([t.A],x.prototype,`rowElements`,void 0),s.t([t.A],x.prototype,`slottedRowElements`,void 0),s.t([t.m({attribute:`selection-mode`})],x.prototype,`selectionMode`,void 0);var S=class extends d.t(t.t){constructor(...e){super(...e),this.rowType=f.i.default,this.rowData=null,this.columnDefinitions=null,this.behaviorOrchestrator=null,this.focusColumnIndex=0,this.updateRowStyle=()=>{this.style.gridTemplateColumns=this.gridTemplateColumns},this.ariaSelected=null,this._selectable=!1,this.selected=!1}gridTemplateColumnsChanged(){this.$fastController.isConnected&&this.updateRowStyle()}rowTypeChanged(){this.$fastController.isConnected&&this.updateItemTemplate()}cellItemTemplateChanged(){this.updateItemTemplate()}headerCellItemTemplateChanged(){this.updateItemTemplate()}connectedCallback(){super.connectedCallback(),this.behaviorOrchestrator===null&&(this.updateItemTemplate(),this.behaviorOrchestrator=t.f.create(this),this.$fastController.addBehavior(this.behaviorOrchestrator),this.behaviorOrchestrator.addBehaviorFactory(new n.t(n.r(e=>e.columnDefinitions),n.r(e=>e.activeCellItemTemplate),{positioning:!0}),this.appendChild(document.createComment(``)))),this.addEventListener(`cell-focused`,this.handleCellFocus),this.addEventListener(h,this.handleFocusout),this.addEventListener(g,this.handleKeydown),this.updateRowStyle()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`cell-focused`,this.handleCellFocus),this.removeEventListener(h,this.handleFocusout),this.removeEventListener(g,this.handleKeydown)}handleFocusout(e){this.contains(document.activeElement)||(this.focusColumnIndex=0)}handleCellFocus(e){this.focusColumnIndex=this.cellElements.indexOf(e.target),this.$emit(`row-focused`,this)}handleKeydown(e){if(!e.defaultPrevented)switch(e.key){case u.n:{let t=Math.max(0,this.focusColumnIndex-1);this.cellElements[t].focus(),e.preventDefault();break}case u.r:{let t=Math.min(this.cellElements.length-1,this.focusColumnIndex+1);this.cellElements[t].focus(),e.preventDefault();break}case u.s:e.ctrlKey||(this.cellElements[0].focus(),e.preventDefault());break;case`End`:e.ctrlKey||(this.cellElements[this.cellElements.length-1].focus(),e.preventDefault());break}}updateItemTemplate(){this.activeCellItemTemplate=this.rowType===f.i.default&&this.cellItemTemplate!==void 0?this.cellItemTemplate:this.rowType===f.i.default&&this.cellItemTemplate===void 0?this.defaultCellItemTemplate:this.headerCellItemTemplate===void 0?this.defaultHeaderCellItemTemplate:this.headerCellItemTemplate}ariaSelectedChanged(e,t){super.ariaSelectedChanged(e,t),this._selectable=t!==null,this.selected=t===`true`}};s.t([t.m({attribute:`grid-template-columns`})],S.prototype,`gridTemplateColumns`,void 0),s.t([t.m({attribute:`row-type`})],S.prototype,`rowType`,void 0),s.t([t.A],S.prototype,`rowData`,void 0),s.t([t.A],S.prototype,`columnDefinitions`,void 0),s.t([t.A],S.prototype,`cellItemTemplate`,void 0),s.t([t.A],S.prototype,`headerCellItemTemplate`,void 0),s.t([t.A],S.prototype,`rowIndex`,void 0),s.t([t.A],S.prototype,`activeCellItemTemplate`,void 0),s.t([t.A],S.prototype,`defaultCellItemTemplate`,void 0),s.t([t.A],S.prototype,`defaultHeaderCellItemTemplate`,void 0),s.t([t.A],S.prototype,`cellElements`,void 0),s.t([t.A],S.prototype,`_selectable`,void 0),s.t([t.m({mode:`boolean`})],S.prototype,`selected`,void 0);function C(e){let n=e.tagFor(S);return t.p`
     <${n}
         :rowData="${e=>e}"
         :cellItemTemplate="${(e,t)=>t.parent.cellItemTemplate}"
@@ -67,7 +67,7 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			@click="${(e,t)=>G(e,t.event)}"
 			@keydown="${(e,t)=>W(e,t.event)}"
 		>
-			<div class="${({selected:e,_actionItemsSlottedContent:t})=>l.t(`base`,[`selected`,!!e],[`has-action-items`,!!t?.length])}">
+			<div class="${({selected:e,_actionItemsSlottedContent:t})=>l.t(`base`,[`selected`,e],[`has-action-items`,!!t?.length])}">
 				<div
 					class="content"
 					role="${e=>F(e)?`button`:void 0}"

package/data-grid/index.js

@@ -143,7 +143,7 @@ var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":host{displa
 		}
 	}
 	queueFocusUpdate() {
-		this.isUpdatingFocus && this.contains(document.activeElement) || this.pendingFocusUpdate === !1 && (this.pendingFocusUpdate = !0, n.enqueue(() => this.updateFocus()));
+		this.isUpdatingFocus && this.contains(document.activeElement) || this.pendingFocusUpdate || (this.pendingFocusUpdate = !0, n.enqueue(() => this.updateFocus()));
 	}
 	updateFocus() {
 		this.pendingFocusUpdate = !1, this.focusOnCell(this.focusRowIndex, this.focusColumnIndex, !0);
@@ -156,7 +156,7 @@ var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":host{displa
 			return;
 		}
 	}
-	slottedRowElementsChanged(e, t) {
+	slottedRowElementsChanged() {
 		this._resetSelection();
 	}
 	get #t() {
@@ -353,15 +353,17 @@ var G = class extends A(l) {
 		this.focusColumnIndex = this.cellElements.indexOf(e.target), this.$emit("row-focused", this);
 	}
 	handleKeydown(e) {
-		if (e.defaultPrevented) return;
-		let t = 0;
-		switch (e.key) {
-			case T:
-				t = Math.max(0, this.focusColumnIndex - 1), this.cellElements[t].focus(), e.preventDefault();
+		if (!e.defaultPrevented) switch (e.key) {
+			case T: {
+				let t = Math.max(0, this.focusColumnIndex - 1);
+				this.cellElements[t].focus(), e.preventDefault();
 				break;
-			case D:
-				t = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1), this.cellElements[t].focus(), e.preventDefault();
+			}
+			case D: {
+				let t = Math.min(this.cellElements.length - 1, this.focusColumnIndex + 1);
+				this.cellElements[t].focus(), e.preventDefault();
 				break;
+			}
 			case O:
 				e.ctrlKey || (this.cellElements[0].focus(), e.preventDefault());
 				break;
@@ -670,7 +672,7 @@ r(u("data-grid", W, X, [u("data-grid-row", G, ce, [u("data-grid-cell", Z, (e) =>
 			@click="${(e, t) => _e(e, t.event)}"
 			@keydown="${(e, t) => ge(e, t.event)}"
 		>
-			<div class="${({ selected: e, _actionItemsSlottedContent: t }) => S("base", ["selected", !!e], ["has-action-items", !!t?.length])}">
+			<div class="${({ selected: e, _actionItemsSlottedContent: t }) => S("base", ["selected", e], ["has-action-items", !!t?.length])}">
 				<div
 					class="content"
 					role="${(e) => Q(e) ? "button" : void 0}"

package/dial-pad/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/definition.cjs`),o=require(`../bundled/decorate.cjs`),s=require(`../bundled/definition2.cjs`),c=require(`../bundled/class-names.cjs`);require(`../bundled/key-codes.cjs`);const l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition12.cjs`);var d=`:host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.digit-btn:disabled,.digit-btn.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast:var(--vvd-dial-pad-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-dial-pad-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-dial-pad-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-dial-pad-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm-all:var(--vvd-dial-pad-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-dial-pad-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-dial-pad-accent-dim,var(--vvd-color-neutral-200));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--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))}.call-btn{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}`,f=class extends e.t(t.t){constructor(...e){super(...e),this.helperText=null,this.placeholder=null,this.value=``,this.pattern=`^[0-9#*]*$`,this.disabled=!1,this.pending=!1,this.callActive=!1,this.noCall=!1,this.noInput=!1,this.endCallButtonLabel=null,this.callButtonLabel=null,this.deleteAriaLabel=null,this._longPressTimeoutId=null,this._suppressNextClick=!1,this._keyboardLongPressCompleted=!1,this._onDial=()=>{this._textFieldEl.checkValidity()?this._clearErrorAnnouncement():this._announceValidationError(this._textFieldEl.errorValidationMessage??``),this.callActive?this.$emit(`end-call`):this.$emit(`dial`)},this.autofocus=!1,this._errorAnnouncement=``,this._forceAnnouncementToggle=!1}valueChanged(e,t){t!=null&&this._textFieldEl&&t!==this._textFieldEl.value&&(this._textFieldEl.value=t,this._textFieldEl.reportValidity())}_startLongPress(e,t){if(this.disabled||this.callActive||e!==`0`)return;this._clearLongPressTimer();let n=t.currentTarget;this._longPressTimeoutId=window.setTimeout(()=>{this._suppressNextClick=!0,this.value+=`+`,this.$emit(`keypad-click`,n),this.$emit(`input`),this.$emit(`change`)},600)}_startKeyboardLongPress(){this.disabled||this.callActive||this._longPressTimeoutId===null&&(this._keyboardLongPressCompleted=!1,this._longPressTimeoutId=window.setTimeout(()=>{this._keyboardLongPressCompleted=!0,this.value+=`+`,this.$emit(`input`),this.$emit(`change`)},650))}_endLongPress(){this._clearLongPressTimer(),window.setTimeout(()=>{this._suppressNextClick&&=!1},0)}_endKeyboardLongPress(){let e=this._keyboardLongPressCompleted;return this._clearLongPressTimer(),window.setTimeout(()=>{this._keyboardLongPressCompleted=!1},0),e}_cancelLongPress(){this._clearLongPressTimer()}_clearLongPressTimer(){this._longPressTimeoutId!==null&&(clearTimeout(this._longPressTimeoutId),this._longPressTimeoutId=null)}focus(){let e=this.shadowRoot?.querySelectorAll(`.digits .digit-btn`);(this._textFieldEl||e?.[0])?.focus()}_announceValidationError(e){this._errorAnnouncement=``,window.queueMicrotask(()=>{e?(this._forceAnnouncementToggle=!this._forceAnnouncementToggle,this._errorAnnouncement=`${e}${this._forceAnnouncementToggle?`​`:``}`):this._clearErrorAnnouncement()})}_clearErrorAnnouncement(){this._errorAnnouncement=``,this._forceAnnouncementToggle=!1}};o.t([t.m({attribute:`helper-text`})],f.prototype,`helperText`,void 0),o.t([t.m],f.prototype,`placeholder`,void 0),o.t([t.m({mode:`fromView`})],f.prototype,`value`,void 0),o.t([t.m({mode:`fromView`})],f.prototype,`pattern`,void 0),o.t([t.m({mode:`boolean`})],f.prototype,`disabled`,void 0),o.t([t.m({mode:`boolean`})],f.prototype,`pending`,void 0),o.t([t.m({attribute:`call-active`,mode:`boolean`})],f.prototype,`callActive`,void 0),o.t([t.m({mode:`boolean`,attribute:`no-call`})],f.prototype,`noCall`,void 0),o.t([t.m({mode:`boolean`,attribute:`no-input`})],f.prototype,`noInput`,void 0),o.t([t.m],f.prototype,`size`,void 0),o.t([t.m({attribute:`end-call-button-label`})],f.prototype,`endCallButtonLabel`,void 0),o.t([t.m({attribute:`call-button-label`})],f.prototype,`callButtonLabel`,void 0),o.t([t.m({attribute:`delete-aria-label`})],f.prototype,`deleteAriaLabel`,void 0),o.t([t.m({mode:`boolean`})],f.prototype,`autofocus`,void 0),o.t([t.A],f.prototype,`_errorAnnouncement`,void 0);var p=class{constructor(e,t,n,r,i){this.value=e,this.label=t,this.ariaLabel=n,this.icon=r,this.id=i}},m=[new p(`1`,`&nbsp;`,`digitOneLabel`,`one-solid`,`btn1`),new p(`2`,`ABC`,`digitTwoLabel`,`two-solid`,`btn2`),new p(`3`,`DEF`,`digitThreeLabel`,`three-solid`,`btn3`),new p(`4`,`GHI`,`digitFourLabel`,`four-solid`,`btn4`),new p(`5`,`JKL`,`digitFiveLabel`,`five-solid`,`btn5`),new p(`6`,`MNO`,`digitSixLabel`,`six-solid`,`btn6`),new p(`7`,`PQRS`,`digitSevenLabel`,`seven-solid`,`btn7`),new p(`8`,`TUV`,`digitEightLabel`,`eight-solid`,`btn8`),new p(`9`,`WXYZ`,`digitNineLabel`,`nine-solid`,`btn9`),new p(`*`,null,`digitAsteriskLabel`,`asterisk-2-solid`,`btnAsterisk`),new p(`0`,`+`,`digitZeroLabel`,`zero-solid`,`btn0`),new p(`#`,null,`digitHashtagLabel`,`hashtag-solid`,`btnHashtag`)],h=({noInput:e,size:t})=>c.t(`base`,[`size-${t}`,!!t],[`no-input`,!!e]);function g(e,t){if(t.key===`Enter`&&!e.pending&&!e.disabled&&!e.callActive&&!e.noCall&&e.value.length>0&&t.target instanceof HTMLInputElement)e._onDial();else if(t.key===` `||t.key===`Space`)t.target instanceof HTMLInputElement&&(t.preventDefault(),t.repeat||e._startKeyboardLongPress());else{let n=m.findIndex(e=>e.value===t.key);if(n>-1){let t=e.shadowRoot.querySelector(`.digits`).children[n];t&&(t.active=!0,setTimeout(()=>{t.active=!1},200))}}return!0}function _(e,t){return(t.key===` `||t.key===`Space`)&&t.target instanceof HTMLInputElement&&(t.preventDefault(),!e._endKeyboardLongPress()&&!e.disabled&&!e.callActive&&(e.value+=` `,e.$emit(`input`),e.$emit(`change`))),!0}function v(e,{parent:t,event:n}){return(n.key===` `||n.key===`Space`)&&e.value===`0`&&(n.preventDefault(),n.repeat||t._startKeyboardLongPress()),!0}function y(e,{parent:t,event:n}){return(n.key===` `||n.key===`Space`)&&e.value===`0`&&(n.preventDefault(),!t._endKeyboardLongPress()&&!t.disabled&&!t.callActive&&w(e,{parent:t,event:new MouseEvent(`click`,{bubbles:!0})})),!0}function b(e){e.value=e._textFieldEl.value}function x(e,{event:t}){t.stopImmediatePropagation()}function S(e){e.value=e.value.slice(0,-1),e.$emit(`input`),e.$emit(`change`),e.value===``&&e._textFieldEl?.focus()}function C(e,n){return t.p`<${e} ${r.t(`_textFieldEl`)} class="phone-field" internal-part type="tel"
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/ref.cjs`),i=require(`../bundled/when.cjs`),a=require(`../bundled/definition.cjs`),o=require(`../bundled/decorate.cjs`),s=require(`../bundled/definition2.cjs`),c=require(`../bundled/class-names.cjs`);require(`../bundled/key-codes.cjs`);const l=require(`../bundled/definition6.cjs`),u=require(`../bundled/definition12.cjs`);var d=`:host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.digit-btn:disabled,.digit-btn.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast:var(--vvd-dial-pad-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-dial-pad-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-dial-pad-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-dial-pad-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm-all:var(--vvd-dial-pad-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-dial-pad-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-dial-pad-accent-dim,var(--vvd-color-neutral-200));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--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))}.call-btn{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}`,f=class extends e.t(t.t){constructor(...e){super(...e),this.helperText=null,this.placeholder=null,this.value=``,this.pattern=`^[0-9#*]*$`,this.disabled=!1,this.pending=!1,this.callActive=!1,this.noCall=!1,this.noInput=!1,this.endCallButtonLabel=null,this.callButtonLabel=null,this.deleteAriaLabel=null,this._longPressTimeoutId=null,this._suppressNextClick=!1,this._keyboardLongPressCompleted=!1,this._onDial=()=>{this._textFieldEl.checkValidity()?this._clearErrorAnnouncement():this._announceValidationError(this._textFieldEl.errorValidationMessage??``),this.$emit(this.callActive?`end-call`:`dial`)},this.autofocus=!1,this._errorAnnouncement=``,this._forceAnnouncementToggle=!1}valueChanged(e,t){t!=null&&this._textFieldEl&&t!==this._textFieldEl.value&&(this._textFieldEl.value=t,this._textFieldEl.reportValidity())}_startLongPress(e,t){if(this.disabled||this.callActive||e!==`0`)return;this._clearLongPressTimer();let n=t.currentTarget;this._longPressTimeoutId=window.setTimeout(()=>{this._suppressNextClick=!0,this.value+=`+`,this.$emit(`keypad-click`,n),this.$emit(`input`),this.$emit(`change`)},600)}_startKeyboardLongPress(){this.disabled||this.callActive||this._longPressTimeoutId===null&&(this._keyboardLongPressCompleted=!1,this._longPressTimeoutId=window.setTimeout(()=>{this._keyboardLongPressCompleted=!0,this.value+=`+`,this.$emit(`input`),this.$emit(`change`)},650))}_endLongPress(){this._clearLongPressTimer(),window.setTimeout(()=>{this._suppressNextClick&&=!1},0)}_endKeyboardLongPress(){let e=this._keyboardLongPressCompleted;return this._clearLongPressTimer(),window.setTimeout(()=>{this._keyboardLongPressCompleted=!1},0),e}_cancelLongPress(){this._clearLongPressTimer()}_clearLongPressTimer(){this._longPressTimeoutId!==null&&(clearTimeout(this._longPressTimeoutId),this._longPressTimeoutId=null)}focus(){let e=this.shadowRoot?.querySelectorAll(`.digits .digit-btn`);(this._textFieldEl||e?.[0])?.focus()}_announceValidationError(e){this._errorAnnouncement=``,window.queueMicrotask(()=>{e?(this._forceAnnouncementToggle=!this._forceAnnouncementToggle,this._errorAnnouncement=`${e}${this._forceAnnouncementToggle?`​`:``}`):this._clearErrorAnnouncement()})}_clearErrorAnnouncement(){this._errorAnnouncement=``,this._forceAnnouncementToggle=!1}};o.t([t.m({attribute:`helper-text`})],f.prototype,`helperText`,void 0),o.t([t.m],f.prototype,`placeholder`,void 0),o.t([t.m({mode:`fromView`})],f.prototype,`value`,void 0),o.t([t.m({mode:`fromView`})],f.prototype,`pattern`,void 0),o.t([t.m({mode:`boolean`})],f.prototype,`disabled`,void 0),o.t([t.m({mode:`boolean`})],f.prototype,`pending`,void 0),o.t([t.m({attribute:`call-active`,mode:`boolean`})],f.prototype,`callActive`,void 0),o.t([t.m({mode:`boolean`,attribute:`no-call`})],f.prototype,`noCall`,void 0),o.t([t.m({mode:`boolean`,attribute:`no-input`})],f.prototype,`noInput`,void 0),o.t([t.m],f.prototype,`size`,void 0),o.t([t.m({attribute:`end-call-button-label`})],f.prototype,`endCallButtonLabel`,void 0),o.t([t.m({attribute:`call-button-label`})],f.prototype,`callButtonLabel`,void 0),o.t([t.m({attribute:`delete-aria-label`})],f.prototype,`deleteAriaLabel`,void 0),o.t([t.m({mode:`boolean`})],f.prototype,`autofocus`,void 0),o.t([t.A],f.prototype,`_errorAnnouncement`,void 0);var p=class{constructor(e,t,n,r,i){this.value=e,this.label=t,this.ariaLabel=n,this.icon=r,this.id=i}},m=[new p(`1`,`&nbsp;`,`digitOneLabel`,`one-solid`,`btn1`),new p(`2`,`ABC`,`digitTwoLabel`,`two-solid`,`btn2`),new p(`3`,`DEF`,`digitThreeLabel`,`three-solid`,`btn3`),new p(`4`,`GHI`,`digitFourLabel`,`four-solid`,`btn4`),new p(`5`,`JKL`,`digitFiveLabel`,`five-solid`,`btn5`),new p(`6`,`MNO`,`digitSixLabel`,`six-solid`,`btn6`),new p(`7`,`PQRS`,`digitSevenLabel`,`seven-solid`,`btn7`),new p(`8`,`TUV`,`digitEightLabel`,`eight-solid`,`btn8`),new p(`9`,`WXYZ`,`digitNineLabel`,`nine-solid`,`btn9`),new p(`*`,null,`digitAsteriskLabel`,`asterisk-2-solid`,`btnAsterisk`),new p(`0`,`+`,`digitZeroLabel`,`zero-solid`,`btn0`),new p(`#`,null,`digitHashtagLabel`,`hashtag-solid`,`btnHashtag`)],h=({noInput:e,size:t})=>c.t(`base`,[`size-${t}`,!!t],[`no-input`,e]);function g(e,t){if(t.key===`Enter`&&!e.pending&&!e.disabled&&!e.callActive&&!e.noCall&&e.value.length>0&&t.target instanceof HTMLInputElement)e._onDial();else if(t.key===` `||t.key===`Space`)t.target instanceof HTMLInputElement&&(t.preventDefault(),t.repeat||e._startKeyboardLongPress());else{let n=m.findIndex(e=>e.value===t.key);if(n>-1){let t=e.shadowRoot.querySelector(`.digits`).children[n];t&&(t.active=!0,setTimeout(()=>{t.active=!1},200))}}return!0}function _(e,t){return(t.key===` `||t.key===`Space`)&&t.target instanceof HTMLInputElement&&(t.preventDefault(),!e._endKeyboardLongPress()&&!e.disabled&&!e.callActive&&(e.value+=` `,e.$emit(`input`),e.$emit(`change`))),!0}function v(e,{parent:t,event:n}){return(n.key===` `||n.key===`Space`)&&e.value===`0`&&(n.preventDefault(),n.repeat||t._startKeyboardLongPress()),!0}function y(e,{parent:t,event:n}){return(n.key===` `||n.key===`Space`)&&e.value===`0`&&(n.preventDefault(),!t._endKeyboardLongPress()&&!t.disabled&&!t.callActive&&w(e,{parent:t,event:new MouseEvent(`click`,{bubbles:!0})})),!0}function b(e){e.value=e._textFieldEl.value}function x(e,{event:t}){t.stopImmediatePropagation()}function S(e){e.value=e.value.slice(0,-1),e.$emit(`input`),e.$emit(`change`),e.value===``&&e._textFieldEl?.focus()}function C(e,n){return t.p`<${e} ${r.t(`_textFieldEl`)} class="phone-field" internal-part type="tel"
         value="${e=>e.value}" placeholder="${e=>e.placeholder}"
             ?disabled="${e=>e.disabled}" helper-text="${e=>e.helperText}" pattern="${e=>e.pattern}"
             aria-label="${e=>e.locale.dialPad.inputLabel}"

package/dial-pad/index.js

@@ -14,7 +14,7 @@ import { n as v, r as y } from "../bundled/definition12.js";
 var b = ":host{inline-size:230px;margin:16px;display:inline-block}.base{box-sizing:border-box;grid-template-rows:80px 1fr auto;display:grid}.base.no-input{grid-template-rows:1fr auto}.digits{grid-template-rows:repeat(4,1fr);grid-template-columns:repeat(3,1fr);gap:16px;inline-size:100%;display:grid}.phone-field{grid-column:1/-1;align-self:flex-start}.digit-btn{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.digit-btn:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.digit-btn.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.digit-btn:disabled,.digit-btn.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast:var(--vvd-dial-pad-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-soft:var(--vvd-dial-pad-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-dial-pad-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-dial-pad-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm-all:var(--vvd-dial-pad-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-faint:var(--vvd-dial-pad-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-dim:var(--vvd-dial-pad-accent-dim,var(--vvd-color-neutral-200));--vvd-button-accent-firm:var(--_appearance-color-text);box-shadow:0 0 0 1px var(--_appearance-color-outline);border-radius:16px;flex-direction:column;inline-size:100%;display:flex;overflow:hidden}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.digit-btn:focus-within{--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))}.call-btn{grid-column:1/-1;margin-block-start:32px}.base.size-condensed{grid-template-rows:60px 1fr auto}.base.size-condensed .digits{grid-template-rows:repeat(4,.85fr);gap:8px}.base.size-condensed .call-btn{margin-block-start:12px}.base.size-condensed .digit-btn-num{padding-top:6px}", x = class extends e(a) {
 	constructor(...e) {
 		super(...e), this.helperText = null, this.placeholder = null, this.value = "", this.pattern = "^[0-9#*]*$", this.disabled = !1, this.pending = !1, this.callActive = !1, this.noCall = !1, this.noInput = !1, this.endCallButtonLabel = null, this.callButtonLabel = null, this.deleteAriaLabel = null, this._longPressTimeoutId = null, this._suppressNextClick = !1, this._keyboardLongPressCompleted = !1, this._onDial = () => {
-			this._textFieldEl.checkValidity() ? this._clearErrorAnnouncement() : this._announceValidationError(this._textFieldEl.errorValidationMessage ?? ""), this.callActive ? this.$emit("end-call") : this.$emit("dial");
+			this._textFieldEl.checkValidity() ? this._clearErrorAnnouncement() : this._announceValidationError(this._textFieldEl.errorValidationMessage ?? ""), this.$emit(this.callActive ? "end-call" : "dial");
 		}, this.autofocus = !1, this._errorAnnouncement = "", this._forceAnnouncementToggle = !1;
 	}
 	valueChanged(e, t) {
@@ -92,7 +92,7 @@ var S = class {
 	new S("*", null, "digitAsteriskLabel", "asterisk-2-solid", "btnAsterisk"),
 	new S("0", "+", "digitZeroLabel", "zero-solid", "btn0"),
 	new S("#", null, "digitHashtagLabel", "hashtag-solid", "btnHashtag")
-], w = ({ noInput: e, size: t }) => h("base", [`size-${t}`, !!t], ["no-input", !!e]);
+], w = ({ noInput: e, size: t }) => h("base", [`size-${t}`, !!t], ["no-input", e]);
 function T(e, t) {
 	if (t.key === "Enter" && !e.pending && !e.disabled && !e.callActive && !e.noCall && e.value.length > 0 && t.target instanceof HTMLInputElement) e._onDial();
 	else if (t.key === " " || t.key === "Space")

package/dialog/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/when.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/definition2.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/delegates-aria.cjs`),c=require(`../bundled/definition6.cjs`),l=require(`../bundled/definition7.cjs`),u=require(`../bundled/dialog.cjs`);var d=`.base{white-space:initial;box-sizing:border-box;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size,var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size,280px);background-color:#0000;border:none;border-radius:8px;padding:0}@media not all and (width>=600px){.base{--_dialog-default-max-inline-size:90vw}}@media (width>=600px){.base{--_dialog-default-max-inline-size:560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size,calc(100vh - 64px))}.base:not(.modal){z-index:var(--dialog-z-index,1);inset-block:var(--dialog-inset-block,auto);inset-inline:var(--dialog-inset-inline,0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text,currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.main-wrapper{box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px;display:flex}.main-wrapper>*{box-sizing:border-box}.header{justify-content:space-between;align-items:flex-start;inline-size:100%;padding-inline:24px;display:grid}.base:not(.icon-placement-side) .header{grid-template-rows:auto auto auto;grid-template-columns:1fr auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));grid-area:1/1/2/2;margin-block-end:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));line-height:1}.base.icon-placement-side .header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto}.base.icon-placement-side .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-area:1/1/-1/2;margin-inline-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.header.border{position:relative}.header.border:after{background-color:var(--vvd-color-neutral-200);content:"";block-size:1px;inline-size:100%;position:absolute;bottom:-24px;left:0}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{max-block-size:var(--dialog-body-max-block-size,300px);--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;overflow:hidden auto}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.footer{justify-content:space-between;align-items:center;gap:24px;padding-inline:24px;display:flex}.hide-footer .footer{display:none}.footer .actions{align-self:flex-end;gap:8px;display:flex}.dismiss-button{flex-shrink:0;grid-area:1/-2/-1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4);margin:0}.subtitle{font:var(--vvd-typography-base);margin:0}slot[name=main]{--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}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}slot[name=main]{max-width:inherit;max-height:inherit;border-radius:inherit;display:block;overflow:hidden auto}`,f=class extends e.t(s.t(t.t)){constructor(...e){super(...e),this.open=!1,this.fullWidthBody=!1,this.dismissButtonAriaLabel=null,this.noLightDismiss=!1,this.noDismissOnEsc=!1,this.noDismissButton=!1,this.nonDismissible=!1,this.modal=!1,this.scrollableBody=!1,this._openedAsModal=!1,this.#r=e=>{if(e.target!==this.#t||!this.#n(`light-dismiss`))return;let t=this.#t.getBoundingClientRect();t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||this._handleCloseRequest()},this.#i=e=>{e.target.method===`dialog`&&(this.open=!1)}}modalChanged(e,t){this.open&&(this._openedAsModal=t,this.$fastController.isConnected&&(this.#a(),this.#o()))}set returnValue(e){this.#t&&(this.#t.returnValue=e)}get returnValue(){return this.#t?.returnValue}#e;get#t(){return this.#e||=this.shadowRoot.querySelector(`dialog`),this.#e}openChanged(e,t){e!==void 0&&(t?(this._openedAsModal=this._openedAsModal||this.modal,this.$fastController.isConnected&&this.#o(),this.$emit(`open`,void 0,{bubbles:!1})):(this._openedAsModal=!1,this.$fastController.isConnected&&this.#a(),this.$emit(`close`,this.returnValue,{bubbles:!1})))}get _showDismissButton(){return this.#n(`dismiss-button`)}#n(e){if(this.nonDismissible)return!1;switch(e){case`escape`:return!this.noDismissOnEsc;case`dismiss-button`:return!this.noDismissButton;case`light-dismiss`:return!this.noLightDismiss}}#r;#i;_onKeyDown(e){return u.t(e)&&this._openedAsModal?(this.#n(`escape`)&&this._handleCloseRequest(),!1):!0}_handleCloseRequest(){this.$emit(`cancel`,void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}close(){this.open=!1}show(){if(this._openedAsModal&&!this.modal)throw new DOMException(`Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.`,`InvalidStateError`);this.open=!0}showModal(){if(this.open&&!this._openedAsModal)throw new DOMException(`Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.`,`InvalidStateError`);this._openedAsModal=!0,this.open=!0}#a(){this.#t.close()}#o(){this._openedAsModal?this.#t.showModal():this.#t.show()}connectedCallback(){super.connectedCallback(),this.open&&this.#o(),this.#t.addEventListener(`mousedown`,this.#r),this.#t.addEventListener(`submit`,this.#i)}disconnectedCallback(){super.disconnectedCallback(),this.open&&this.#a(),this.#t.removeEventListener(`mousedown`,this.#r),this.#t.removeEventListener(`submit`,this.#i)}};i.t([t.m({mode:`boolean`})],f.prototype,`open`,void 0),i.t([t.m],f.prototype,`icon`,void 0),i.t([t.m({attribute:`icon-placement`})],f.prototype,`iconPlacement`,void 0),i.t([t.m],f.prototype,`subtitle`,void 0),i.t([t.m],f.prototype,`headline`,void 0),i.t([t.m({attribute:`full-width-body`,mode:`boolean`})],f.prototype,`fullWidthBody`,void 0),i.t([t.m({attribute:`dismiss-button-aria-label`})],f.prototype,`dismissButtonAriaLabel`,void 0),i.t([t.m({attribute:`no-light-dismiss`,mode:`boolean`})],f.prototype,`noLightDismiss`,void 0),i.t([t.m({attribute:`no-dismiss-on-esc`,mode:`boolean`})],f.prototype,`noDismissOnEsc`,void 0),i.t([t.m({attribute:`no-dismiss-button`,mode:`boolean`})],f.prototype,`noDismissButton`,void 0),i.t([t.m({attribute:`non-dismissible`,mode:`boolean`})],f.prototype,`nonDismissible`,void 0),i.t([t.m({mode:`boolean`})],f.prototype,`modal`,void 0),i.t([t.m({mode:`boolean`,attribute:`scrollable-body`})],f.prototype,`scrollableBody`,void 0),i.t([t.A],f.prototype,`_openedAsModal`,void 0),i.t([t.A],f.prototype,`bodySlottedContent`,void 0),i.t([t.A],f.prototype,`footerSlottedContent`,void 0),i.t([t.A],f.prototype,`actionItemsSlottedContent`,void 0);var p=({iconPlacement:e,bodySlottedContent:t,footerSlottedContent:n,actionItemsSlottedContent:r,_openedAsModal:i,scrollableBody:a})=>o.t(`base`,[`icon-placement-${e}`,!!e],[`hide-body`,!t?.length],[`hide-footer`,!(n?.length||r?.length)],[`modal`,i],[`scrollable-body`,!!a]);function m(e){return t.p`
+const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/slotted.cjs`),r=require(`../bundled/when.cjs`),i=require(`../bundled/decorate.cjs`),a=require(`../bundled/definition2.cjs`),o=require(`../bundled/class-names.cjs`),s=require(`../bundled/delegates-aria.cjs`),c=require(`../bundled/definition6.cjs`),l=require(`../bundled/definition7.cjs`),u=require(`../bundled/dialog.cjs`);var d=`.base{white-space:initial;box-sizing:border-box;color:var(--vvd-color-canvas-text);max-block-size:none;max-inline-size:var(--dialog-max-inline-size,var(--_dialog-default-max-inline-size));min-block-size:fit-content;min-inline-size:var(--dialog-min-inline-size,280px);background-color:#0000;border:none;border-radius:8px;padding:0}@media not all and (width>=600px){.base{--_dialog-default-max-inline-size:90vw}}@media (width>=600px){.base{--_dialog-default-max-inline-size:560px}}.base:not(.scrollable-body){max-block-size:var(--dialog-max-block-size,calc(100vh - 64px))}.base:not(.modal){z-index:var(--dialog-z-index,1);inset-block:var(--dialog-inset-block,auto);inset-inline:var(--dialog-inset-inline,0)}.base.modal{box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text,currentColor);opacity:.5}.base:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.main-wrapper{box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px;display:flex}.main-wrapper>*{box-sizing:border-box}.header{justify-content:space-between;align-items:flex-start;inline-size:100%;padding-inline:24px;display:grid}.base:not(.icon-placement-side) .header{grid-template-rows:auto auto auto;grid-template-columns:1fr auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));grid-area:1/1/2/2;margin-block-end:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));line-height:1}.base.icon-placement-side .header{grid-template-rows:auto auto;grid-template-columns:auto 1fr auto}.base.icon-placement-side .header .icon{font-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-area:1/1/-1/2;margin-inline-end:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.header.border{position:relative}.header.border:after{background-color:var(--vvd-color-neutral-200);content:"";block-size:1px;inline-size:100%;position:absolute;bottom:-24px;left:0}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.scrollable-body .body{max-block-size:var(--dialog-body-max-block-size,300px);--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;overflow:hidden auto}.scrollable-body .body ::-webkit-scrollbar{width:4px}.scrollable-body .body ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.scrollable-body .body ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.footer{justify-content:space-between;align-items:center;gap:24px;padding-inline:24px;display:flex}.hide-footer .footer{display:none}.footer .actions{align-self:flex-end;gap:8px;display:flex}.dismiss-button{flex-shrink:0;grid-area:1/-2/-1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4);margin:0}.subtitle{font:var(--vvd-typography-base);margin:0}slot[name=main]{--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}slot[name=main] ::-webkit-scrollbar{width:4px}slot[name=main] ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}slot[name=main] ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}slot[name=main]{max-width:inherit;max-height:inherit;border-radius:inherit;display:block;overflow:hidden auto}`,f=class extends e.t(s.t(t.t)){constructor(...e){super(...e),this.open=!1,this.fullWidthBody=!1,this.dismissButtonAriaLabel=null,this.noLightDismiss=!1,this.noDismissOnEsc=!1,this.noDismissButton=!1,this.nonDismissible=!1,this.modal=!1,this.scrollableBody=!1,this._openedAsModal=!1,this.#r=e=>{if(e.target!==this.#t||!this.#n(`light-dismiss`))return;let t=this.#t.getBoundingClientRect();t.top<=e.clientY&&e.clientY<=t.top+t.height&&t.left<=e.clientX&&e.clientX<=t.left+t.width||this._handleCloseRequest()},this.#i=e=>{e.target.method===`dialog`&&(this.open=!1)}}modalChanged(e,t){this.open&&(this._openedAsModal=t,this.$fastController.isConnected&&(this.#a(),this.#o()))}set returnValue(e){this.#t&&(this.#t.returnValue=e)}get returnValue(){return this.#t?.returnValue}#e;get#t(){return this.#e||=this.shadowRoot.querySelector(`dialog`),this.#e}openChanged(e,t){e!==void 0&&(t?(this._openedAsModal=this._openedAsModal||this.modal,this.$fastController.isConnected&&this.#o(),this.$emit(`open`,void 0,{bubbles:!1})):(this._openedAsModal=!1,this.$fastController.isConnected&&this.#a(),this.$emit(`close`,this.returnValue,{bubbles:!1})))}get _showDismissButton(){return this.#n(`dismiss-button`)}#n(e){if(this.nonDismissible)return!1;switch(e){case`escape`:return!this.noDismissOnEsc;case`dismiss-button`:return!this.noDismissButton;case`light-dismiss`:return!this.noLightDismiss}}#r;#i;_onKeyDown(e){return u.t(e)&&this._openedAsModal?(this.#n(`escape`)&&this._handleCloseRequest(),!1):!0}_handleCloseRequest(){this.$emit(`cancel`,void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}close(){this.open=!1}show(){if(this._openedAsModal&&!this.modal)throw new DOMException(`Failed to execute 'show' on 'Dialog': The dialog is already open as a modal dialog, and therefore cannot be opened as a non-modal dialog.`,`InvalidStateError`);this.open=!0}showModal(){if(this.open&&!this._openedAsModal)throw new DOMException(`Failed to execute 'showModal' on 'Dialog': The dialog is already open as a non-modal dialog, and therefore cannot be opened as a modal dialog.`,`InvalidStateError`);this._openedAsModal=!0,this.open=!0}#a(){this.#t.close()}#o(){this._openedAsModal?this.#t.showModal():this.#t.show()}connectedCallback(){super.connectedCallback(),this.open&&this.#o(),this.#t.addEventListener(`mousedown`,this.#r),this.#t.addEventListener(`submit`,this.#i)}disconnectedCallback(){super.disconnectedCallback(),this.open&&this.#a(),this.#t.removeEventListener(`mousedown`,this.#r),this.#t.removeEventListener(`submit`,this.#i)}};i.t([t.m({mode:`boolean`})],f.prototype,`open`,void 0),i.t([t.m],f.prototype,`icon`,void 0),i.t([t.m({attribute:`icon-placement`})],f.prototype,`iconPlacement`,void 0),i.t([t.m],f.prototype,`subtitle`,void 0),i.t([t.m],f.prototype,`headline`,void 0),i.t([t.m({attribute:`full-width-body`,mode:`boolean`})],f.prototype,`fullWidthBody`,void 0),i.t([t.m({attribute:`dismiss-button-aria-label`})],f.prototype,`dismissButtonAriaLabel`,void 0),i.t([t.m({attribute:`no-light-dismiss`,mode:`boolean`})],f.prototype,`noLightDismiss`,void 0),i.t([t.m({attribute:`no-dismiss-on-esc`,mode:`boolean`})],f.prototype,`noDismissOnEsc`,void 0),i.t([t.m({attribute:`no-dismiss-button`,mode:`boolean`})],f.prototype,`noDismissButton`,void 0),i.t([t.m({attribute:`non-dismissible`,mode:`boolean`})],f.prototype,`nonDismissible`,void 0),i.t([t.m({mode:`boolean`})],f.prototype,`modal`,void 0),i.t([t.m({mode:`boolean`,attribute:`scrollable-body`})],f.prototype,`scrollableBody`,void 0),i.t([t.A],f.prototype,`_openedAsModal`,void 0),i.t([t.A],f.prototype,`bodySlottedContent`,void 0),i.t([t.A],f.prototype,`footerSlottedContent`,void 0),i.t([t.A],f.prototype,`actionItemsSlottedContent`,void 0);var p=({iconPlacement:e,bodySlottedContent:t,footerSlottedContent:n,actionItemsSlottedContent:r,_openedAsModal:i,scrollableBody:a})=>o.t(`base`,[`icon-placement-${e}`,!!e],[`hide-body`,!t?.length],[`hide-footer`,!(n?.length||r?.length)],[`modal`,i],[`scrollable-body`,a]);function m(e){return t.p`
 		<${e} class="icon" name="${e=>e.icon}"></${e}>
 	`}function h(){return t.p`
 		<h2 class="headline" id="dialog-headline">${e=>e.headline}</h2>

package/dialog/index.js

@@ -104,7 +104,7 @@ l([r({ mode: "boolean" })], x.prototype, "open", void 0), l([r], x.prototype, "i
 })], x.prototype, "scrollableBody", void 0), l([t], x.prototype, "_openedAsModal", void 0), l([t], x.prototype, "bodySlottedContent", void 0), l([t], x.prototype, "footerSlottedContent", void 0), l([t], x.prototype, "actionItemsSlottedContent", void 0);
 //#endregion
 //#region src/lib/dialog/dialog.template.ts
-var S = ({ iconPlacement: e, bodySlottedContent: t, footerSlottedContent: n, actionItemsSlottedContent: r, _openedAsModal: i, scrollableBody: a }) => f("base", [`icon-placement-${e}`, !!e], ["hide-body", !t?.length], ["hide-footer", !(n?.length || r?.length)], ["modal", i], ["scrollable-body", !!a]);
+var S = ({ iconPlacement: e, bodySlottedContent: t, footerSlottedContent: n, actionItemsSlottedContent: r, _openedAsModal: i, scrollableBody: a }) => f("base", [`icon-placement-${e}`, !!e], ["hide-body", !t?.length], ["hide-footer", !(n?.length || r?.length)], ["modal", i], ["scrollable-body", a]);
 function C(e) {
 	return i`
 		<${e} class="icon" name="${(e) => e.icon}"></${e}>

package/header/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/delegates-aria.cjs`),i=require(`../bundled/definition7.cjs`);var a=`.base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}`,o=class extends r.t(e.t){constructor(...e){super(...e),this.elevationShadow=!1,this.alternate=!1}};t.t([e.m({attribute:`elevation-shadow`,mode:`boolean`})],o.prototype,`elevationShadow`,void 0),t.t([e.m({mode:`boolean`})],o.prototype,`alternate`,void 0);var s=({alternate:e})=>n.t([`vvd-theme-alternate`,!!e]),c=e.u(`header`,o,t=>{let n=t.tagFor(i.r);return e.p`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/delegates-aria.cjs`),i=require(`../bundled/definition7.cjs`);var a=`.base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}`,o=class extends r.t(e.t){constructor(...e){super(...e),this.elevationShadow=!1,this.alternate=!1}};t.t([e.m({attribute:`elevation-shadow`,mode:`boolean`})],o.prototype,`elevationShadow`,void 0),t.t([e.m({mode:`boolean`})],o.prototype,`alternate`,void 0);var s=({alternate:e})=>n.t([`vvd-theme-alternate`,e]),c=e.u(`header`,o,t=>{let n=t.tagFor(i.r);return e.p`
     <${n} dp="4" ?no-shadow=${e=>!e.elevationShadow}>
       <header class="base" part="base" ${r.n()}>
         <!-- a container is needed to distinguish the surface background color of the

package/header/index.js

@@ -15,7 +15,7 @@ a([t({
 })], f.prototype, "elevationShadow", void 0), a([t({ mode: "boolean" })], f.prototype, "alternate", void 0);
 //#endregion
 //#region src/lib/header/header.template.ts
-var p = ({ alternate: e }) => o(["vvd-theme-alternate", !!e]);
+var p = ({ alternate: e }) => o(["vvd-theme-alternate", e]);
 //#endregion
 //#region src/lib/header/index.ts
 e(i("header", f, (e) => {

package/lib/audio-player/audio-player.d.ts

@@ -461,7 +461,6 @@ export declare class AudioPlayer extends AudioPlayer_base {
     get currentTime(): number;
     set currentTime(value: number);
     durationFallback: boolean;
-    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     play(): void;

package/lib/calendar/helpers/calendar.keyboard-interactions.d.ts

@@ -5,5 +5,5 @@ export declare const ARROW_DOWN = "ArrowDown";
 export declare const ARROW_LEFT = "ArrowLeft";
 export type PredefindKeys = typeof ARROW_UP | typeof ARROW_RIGHT | typeof ARROW_DOWN | typeof ARROW_LEFT;
 export declare function isCellOrHeader(el: unknown): el is HTMLElement;
-export declare function getNextFocusableGridElement(this: Calendar, key: PredefindKeys, activeElement: HTMLElement): Element | null | void;
+export declare function getNextFocusableGridElement(this: Calendar, key: PredefindKeys, activeElement: HTMLElement): Element | null | undefined;
 export declare function getHeaderDescendantGridCell(this: Calendar, key: PredefindKeys, activeElement: HTMLElement): Element | null | undefined;

package/lib/checkbox/checkbox.d.ts

@@ -863,7 +863,7 @@ declare const Checkbox_base: {
 } & {
     new (...args: any[]): {
         errorText?: string;
-        errorTextChanged(_: string, newErrorText: string | undefined): void;
+        errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
         "__#private@#blockValidateCalls": boolean;
         "__#private@#originalValidateFn": () => void;
         "__#private@#forceCustomError"(errorMessage: string): void;
@@ -886,17 +886,17 @@ declare const Checkbox_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -1774,17 +1774,17 @@ declare const Checkbox_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -2240,17 +2240,17 @@ declare const Checkbox_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         disconnectedCallback: (() => void) & (() => void) & (() => void);

package/lib/color-picker/color-picker.d.ts

@@ -25,17 +25,17 @@ declare const ColorPicker_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -904,7 +904,7 @@ declare const ColorPicker_base: {
 } & {
     new (...args: any[]): {
         errorText?: string;
-        errorTextChanged(_: string, newErrorText: string | undefined): void;
+        errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
         "__#private@#blockValidateCalls": boolean;
         "__#private@#originalValidateFn": () => void;
         "__#private@#forceCustomError"(errorMessage: string): void;
@@ -927,17 +927,17 @@ declare const ColorPicker_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -3099,17 +3099,17 @@ declare const ColorPicker_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+        valueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+        initialValueChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
         disabled: boolean;
-        disabledChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+        disabledChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
         name: string;
-        nameChanged: ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
+        nameChanged: ((_previous: string | undefined, _next: string) => void) & ((_previous: string | undefined, _next: string) => void);
         required: boolean;
-        requiredChanged: ((_previous: boolean, _next: boolean) => void) & ((_previous: boolean, _next: boolean) => void);
+        requiredChanged: ((_previous: boolean | undefined, _next: boolean) => void) & ((_previous: boolean | undefined, _next: boolean) => void);
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity: (() => boolean) & (() => boolean);

package/lib/combobox/combobox.d.ts

@@ -30,17 +30,17 @@ declare const Combobox_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -909,7 +909,7 @@ declare const Combobox_base: {
 } & {
     new (...args: any[]): {
         errorText?: string;
-        errorTextChanged(_: string, newErrorText: string | undefined): void;
+        errorTextChanged(_: string | undefined, newErrorText: string | undefined): void;
         "__#private@#blockValidateCalls": boolean;
         "__#private@#originalValidateFn": () => void;
         "__#private@#forceCustomError"(errorMessage: string): void;
@@ -932,17 +932,17 @@ declare const Combobox_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -1820,17 +1820,17 @@ declare const Combobox_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         checkValidity(): boolean;
@@ -2700,17 +2700,17 @@ declare const Combobox_base: {
         dirtyValue: boolean;
         proxySlot?: HTMLSlotElement;
         value: string;
-        valueChanged(_previous: string, _next: string): void;
+        valueChanged(_previous: string | undefined, _next: string): void;
         get currentValue(): string;
         set currentValue(value: string);
         initialValue: string;
-        initialValueChanged(_previous: string, _next: string): void;
+        initialValueChanged(_previous: string | undefined, _next: string): void;
         disabled: boolean;
-        disabledChanged(_previous: boolean, _next: boolean): void;
+        disabledChanged(_previous: boolean | undefined, _next: boolean): void;
         name: string;
-        nameChanged(_previous: string, _next: string): void;
+        nameChanged(_previous: string | undefined, _next: string): void;
         required: boolean;
-        requiredChanged(_previous: boolean, _next: boolean): void;
+        requiredChanged(_previous: boolean | undefined, _next: boolean): void;
         get elementInternals(): ElementInternals | null;
         proxyEventsToBlock: string[];
         connectedCallback(): void;