@vonage/vivid 5.27.0 → 5.28.1

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/class-names.cjs"),l=require("../bundled/key-codes.cjs"),u=require("../bundled/definition2.cjs"),d=require("../bundled/icon.cjs"),f=require("../bundled/host-semantics.cjs"),p=require("../bundled/data-grid.options.cjs");var m=`focus`,h=`focusin`,g=`focusout`,_=`keydown`,v=`: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}`,y=`.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)}`,b=`: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{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(--vvd-color-canvas-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}`,x={none:`none`,singleRow:`single-row`,multiRow:`multi-row`,singleCell:`single-cell`,multiCell:`multi-cell`},S=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(m,this.handleFocus),this.addEventListener(_,this.handleKeydown),this.addEventListener(g,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(m,this.handleFocus),this.removeEventListener(_,this.handleKeydown),this.removeEventListener(g,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 l.i:e.preventDefault(),this.focusOnCell(this.focusRowIndex-1,this.focusColumnIndex,!0);break;case l.t:e.preventDefault(),this.focusOnCell(this.focusRowIndex+1,this.focusColumnIndex,!0);break;case l.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 l.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===p.a.sticky&&this.generatedHeader!==null&&(t=this.generatedHeader.clientHeight),this.scrollTop=e.offsetTop-t;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case l.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))}}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!==p.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===p.a.sticky?p.i.stickyHeader:p.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=p.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===x.singleCell||this.selectionMode===x.multiCell){this.#a({target:e,ctrlKey:t,shiftKey:n,metaKey:r});return}(this.selectionMode===x.singleRow||this.selectionMode===x.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===x.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===x.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===x.singleCell||this.selectionMode===x.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===x.none)for(let e of[...t,...n])e._selectable=!1,e.selected=!1;if(this.selectionMode===x.singleRow||this.selectionMode===x.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`})],S.prototype,`noTabbing`,void 0),s.t([t.m({attribute:`generate-header`})],S.prototype,`generateHeader`,void 0),s.t([t.m({attribute:`grid-template-columns`})],S.prototype,`gridTemplateColumns`,void 0),s.t([t.A],S.prototype,`rowsData`,void 0),s.t([t.A],S.prototype,`columnDefinitions`,void 0),s.t([t.A],S.prototype,`rowItemTemplate`,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,`focusRowIndex`,void 0),s.t([t.A],S.prototype,`focusColumnIndex`,void 0),s.t([t.m({attribute:`fixed-columns`,converter:t.h})],S.prototype,`fixedColumns`,void 0),s.t([t.A],S.prototype,`defaultRowItemTemplate`,void 0),s.t([t.A],S.prototype,`rowElementTag`,void 0),s.t([t.A],S.prototype,`rowElements`,void 0),s.t([t.A],S.prototype,`slottedRowElements`,void 0),s.t([t.m({attribute:`selection-mode`})],S.prototype,`selectionMode`,void 0);var C=class extends f.t(t.t){constructor(...e){super(...e),this.rowType=p.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(g,this.handleFocusout),this.addEventListener(_,this.handleKeydown),this.updateRowStyle()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`cell-focused`,this.handleCellFocus),this.removeEventListener(g,this.handleFocusout),this.removeEventListener(_,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 l.n:{let t=Math.max(0,this.focusColumnIndex-1);this.cellElements[t].focus(),e.preventDefault();break}case l.r:{let t=Math.min(this.cellElements.length-1,this.focusColumnIndex+1);this.cellElements[t].focus(),e.preventDefault();break}case l.s:e.ctrlKey||(this.cellElements[0].focus(),e.preventDefault());break;case`End`:e.ctrlKey||(this.cellElements[this.cellElements.length-1].focus(),e.preventDefault())}}updateItemTemplate(){this.activeCellItemTemplate=this.rowType===p.i.default&&this.cellItemTemplate!==void 0?this.cellItemTemplate:this.rowType===p.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`})],C.prototype,`gridTemplateColumns`,void 0),s.t([t.m({attribute:`row-type`})],C.prototype,`rowType`,void 0),s.t([t.A],C.prototype,`rowData`,void 0),s.t([t.A],C.prototype,`columnDefinitions`,void 0),s.t([t.A],C.prototype,`cellItemTemplate`,void 0),s.t([t.A],C.prototype,`headerCellItemTemplate`,void 0),s.t([t.A],C.prototype,`rowIndex`,void 0),s.t([t.A],C.prototype,`activeCellItemTemplate`,void 0),s.t([t.A],C.prototype,`defaultCellItemTemplate`,void 0),s.t([t.A],C.prototype,`defaultHeaderCellItemTemplate`,void 0),s.t([t.A],C.prototype,`cellElements`,void 0),s.t([t.m],C.prototype,`connotation`,void 0),s.t([t.A],C.prototype,`_selectable`,void 0),s.t([t.m({mode:`boolean`})],C.prototype,`selected`,void 0);function w(e){let n=e.tagFor(C);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/class-names.cjs"),l=require("../bundled/key-codes.cjs"),u=require("../bundled/definition2.cjs"),d=require("../bundled/icon.cjs"),f=require("../bundled/host-semantics.cjs"),p=require("../bundled/data-grid.options.cjs");var m=`focus`,h=`focusin`,g=`focusout`,_=`keydown`,v=`: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}`,y=`.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)}`,b=`: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{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(--vvd-color-canvas-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{flex:1;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}`,x={none:`none`,singleRow:`single-row`,multiRow:`multi-row`,singleCell:`single-cell`,multiCell:`multi-cell`},S=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(m,this.handleFocus),this.addEventListener(_,this.handleKeydown),this.addEventListener(g,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(m,this.handleFocus),this.removeEventListener(_,this.handleKeydown),this.removeEventListener(g,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 l.i:e.preventDefault(),this.focusOnCell(this.focusRowIndex-1,this.focusColumnIndex,!0);break;case l.t:e.preventDefault(),this.focusOnCell(this.focusRowIndex+1,this.focusColumnIndex,!0);break;case l.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 l.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===p.a.sticky&&this.generatedHeader!==null&&(t=this.generatedHeader.clientHeight),this.scrollTop=e.offsetTop-t;break}}this.focusOnCell(t,this.focusColumnIndex,!1);break;case l.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))}}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!==p.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===p.a.sticky?p.i.stickyHeader:p.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=p.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===x.singleCell||this.selectionMode===x.multiCell){this.#a({target:e,ctrlKey:t,shiftKey:n,metaKey:r});return}(this.selectionMode===x.singleRow||this.selectionMode===x.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===x.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===x.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===x.singleCell||this.selectionMode===x.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===x.none)for(let e of[...t,...n])e._selectable=!1,e.selected=!1;if(this.selectionMode===x.singleRow||this.selectionMode===x.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`})],S.prototype,`noTabbing`,void 0),s.t([t.m({attribute:`generate-header`})],S.prototype,`generateHeader`,void 0),s.t([t.m({attribute:`grid-template-columns`})],S.prototype,`gridTemplateColumns`,void 0),s.t([t.A],S.prototype,`rowsData`,void 0),s.t([t.A],S.prototype,`columnDefinitions`,void 0),s.t([t.A],S.prototype,`rowItemTemplate`,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,`focusRowIndex`,void 0),s.t([t.A],S.prototype,`focusColumnIndex`,void 0),s.t([t.m({attribute:`fixed-columns`,converter:t.h})],S.prototype,`fixedColumns`,void 0),s.t([t.A],S.prototype,`defaultRowItemTemplate`,void 0),s.t([t.A],S.prototype,`rowElementTag`,void 0),s.t([t.A],S.prototype,`rowElements`,void 0),s.t([t.A],S.prototype,`slottedRowElements`,void 0),s.t([t.m({attribute:`selection-mode`})],S.prototype,`selectionMode`,void 0);var C=class extends f.t(t.t){constructor(...e){super(...e),this.rowType=p.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(g,this.handleFocusout),this.addEventListener(_,this.handleKeydown),this.updateRowStyle()}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`cell-focused`,this.handleCellFocus),this.removeEventListener(g,this.handleFocusout),this.removeEventListener(_,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 l.n:{let t=Math.max(0,this.focusColumnIndex-1);this.cellElements[t].focus(),e.preventDefault();break}case l.r:{let t=Math.min(this.cellElements.length-1,this.focusColumnIndex+1);this.cellElements[t].focus(),e.preventDefault();break}case l.s:e.ctrlKey||(this.cellElements[0].focus(),e.preventDefault());break;case`End`:e.ctrlKey||(this.cellElements[this.cellElements.length-1].focus(),e.preventDefault())}}updateItemTemplate(){this.activeCellItemTemplate=this.rowType===p.i.default&&this.cellItemTemplate!==void 0?this.cellItemTemplate:this.rowType===p.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`})],C.prototype,`gridTemplateColumns`,void 0),s.t([t.m({attribute:`row-type`})],C.prototype,`rowType`,void 0),s.t([t.A],C.prototype,`rowData`,void 0),s.t([t.A],C.prototype,`columnDefinitions`,void 0),s.t([t.A],C.prototype,`cellItemTemplate`,void 0),s.t([t.A],C.prototype,`headerCellItemTemplate`,void 0),s.t([t.A],C.prototype,`rowIndex`,void 0),s.t([t.A],C.prototype,`activeCellItemTemplate`,void 0),s.t([t.A],C.prototype,`defaultCellItemTemplate`,void 0),s.t([t.A],C.prototype,`defaultHeaderCellItemTemplate`,void 0),s.t([t.A],C.prototype,`cellElements`,void 0),s.t([t.m],C.prototype,`connotation`,void 0),s.t([t.A],C.prototype,`_selectable`,void 0),s.t([t.m({mode:`boolean`})],C.prototype,`selected`,void 0);function w(e){let n=e.tagFor(C);return t.p`
     <${n}
         :rowData="${e=>e}"
         :cellItemTemplate="${(e,t)=>t.parent.cellItemTemplate}"

package/data-grid/index.js

@@ -13,7 +13,7 @@ import { t as D } from "../bundled/icon.js";
 import { n as O, t as k } from "../bundled/host-semantics.js";
 import { a as A, i as j, n as M, o as N, r as P, t as F } from "../bundled/data-grid.options.js";
 //#region ../../node_modules/.pnpm/@microsoft+fast-web-utilities@6.0.0/node_modules/@microsoft/fast-web-utilities/dist/events.js
-var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":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{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)}", H = ":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{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(--vvd-color-canvas-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}", U = {
+var I = "focus", L = "focusin", R = "focusout", z = "keydown", B = ":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{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)}", H = ":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{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(--vvd-color-canvas-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{flex:1;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}", U = {
 	none: "none",
 	singleRow: "single-row",
 	multiRow: "multi-row",

package/lib/badge/badge.d.ts

@@ -449,5 +449,6 @@ export declare class Badge extends Badge_base {
     appearance?: BadgeAppearance;
     count: boolean;
     text?: string;
+    textSecondary?: string;
 }
 export {};

package/lib/badge/badge.template.d.ts

@@ -1,2 +1,3 @@
 import { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
-export declare const badgeTemplate: (context: VividElementDefinitionContext) => import('@microsoft/fast-element').ViewTemplate<any, any>;
+import { Badge } from './badge';
+export declare const badgeTemplate: (context: VividElementDefinitionContext) => import('@microsoft/fast-element').ViewTemplate<Badge, any>;

package/lib/icon/icon.d.ts

@@ -5,7 +5,7 @@ export type IconConnotation = ExtractFromEnum<Connotation, Connotation.Accent |
 export declare class Icon extends VividElement {
     #private;
     connotation?: IconConnotation;
-    size?: -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
+    size?: -7 | -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
     label?: string;
     name?: string;
 }

package/lib/popover/popover.d.ts

@@ -1,12 +1,13 @@
 import { Placement } from '@floating-ui/dom';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+import { VividAriaBehaviour } from '../../shared/aria/aria-mixin';
 export type PopoverLayout = 'default' | 'condensed';
 declare const Popover_base: {
     new (...args: any[]): {
         get locale(): import('../../shared/localization/Locale').Locale;
         connectedCallback(): void;
         focus(...args: any[]): void;
-        _vividAriaBehaviour: import('../../shared/aria/aria-mixin').VividAriaBehaviour;
+        _vividAriaBehaviour: VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);

package/lib/progress-ring/progress-ring.d.ts

@@ -432,6 +432,6 @@ declare const ProgressRing_base: {
 } & typeof BaseProgress;
 export declare class ProgressRing extends ProgressRing_base {
     connotation?: ProgressRingConnotation;
-    size?: -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
+    size?: -7 | -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
 }
 export {};

package/lib/rich-text-editor/rich-text-editor.d.ts

@@ -1,9 +1,435 @@
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import { ExtractFromEnum } from '../../shared/utils/enums';
+import { FeedbackType } from '../../shared/feedback/feedback-message';
 import { Appearance } from '../enums.js';
 import { RteInstance } from './rte/instance';
 export type RichTextEditorAppearance = ExtractFromEnum<Appearance, Appearance.Fieldset>;
+export type RichTextEditorState = Extract<FeedbackType, 'error' | 'success'>;
 declare const RichTextEditor_base: {
+    new (...args: any[]): {
+        _vividAriaBehaviour: "delegate";
+        connectedCallback(): void;
+        focus(...args: any[]): void;
+        readonly $fastController: import('@microsoft/fast-element').ElementController;
+        $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
+        disconnectedCallback: (() => void) & (() => void);
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+        accessKey: string;
+        readonly accessKeyLabel: string;
+        autocapitalize: string;
+        autocorrect: boolean;
+        dir: string;
+        draggable: boolean;
+        hidden: boolean;
+        inert: boolean;
+        innerText: string;
+        lang: string;
+        readonly offsetHeight: number;
+        readonly offsetLeft: number;
+        readonly offsetParent: Element | null;
+        readonly offsetTop: number;
+        readonly offsetWidth: number;
+        outerText: string;
+        popover: string | null;
+        spellcheck: boolean;
+        title: string;
+        translate: boolean;
+        writingSuggestions: string;
+        attachInternals(): ElementInternals;
+        click(): void;
+        hidePopover(): void;
+        showPopover(): void;
+        togglePopover(options?: boolean): boolean;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+        readonly attributes: NamedNodeMap;
+        get classList(): DOMTokenList;
+        set classList(value: string);
+        className: string;
+        readonly clientHeight: number;
+        readonly clientLeft: number;
+        readonly clientTop: number;
+        readonly clientWidth: number;
+        readonly currentCSSZoom: number;
+        id: string;
+        innerHTML: string;
+        readonly localName: string;
+        readonly namespaceURI: string | null;
+        onfullscreenchange: ((this: Element, ev: Event) => any) | null;
+        onfullscreenerror: ((this: Element, ev: Event) => any) | null;
+        outerHTML: string;
+        readonly ownerDocument: Document;
+        get part(): DOMTokenList;
+        set part(value: string);
+        readonly prefix: string | null;
+        readonly scrollHeight: number;
+        scrollLeft: number;
+        scrollTop: number;
+        readonly scrollWidth: number;
+        readonly shadowRoot: ShadowRoot | null;
+        slot: string;
+        readonly tagName: string;
+        attachShadow(init: ShadowRootInit): ShadowRoot;
+        checkVisibility(options?: CheckVisibilityOptions): boolean;
+        closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
+        closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
+        closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
+        closest<E extends Element = Element>(selectors: string): E | null;
+        computedStyleMap(): StylePropertyMapReadOnly;
+        getAttribute(qualifiedName: string): string | null;
+        getAttributeNS(namespace: string | null, localName: string): string | null;
+        getAttributeNames(): string[];
+        getAttributeNode(qualifiedName: string): Attr | null;
+        getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+        getBoundingClientRect(): DOMRect;
+        getClientRects(): DOMRectList;
+        getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+        getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
+        getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
+        getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+        getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
+        getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+        getHTML(options?: GetHTMLOptions): string;
+        hasAttribute(qualifiedName: string): boolean;
+        hasAttributeNS(namespace: string | null, localName: string): boolean;
+        hasAttributes(): boolean;
+        hasPointerCapture(pointerId: number): boolean;
+        insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+        insertAdjacentHTML(position: InsertPosition, string: string): void;
+        insertAdjacentText(where: InsertPosition, data: string): void;
+        matches(selectors: string): boolean;
+        releasePointerCapture(pointerId: number): void;
+        removeAttribute(qualifiedName: string): void;
+        removeAttributeNS(namespace: string | null, localName: string): void;
+        removeAttributeNode(attr: Attr): Attr;
+        requestFullscreen(options?: FullscreenOptions): Promise<void>;
+        requestPointerLock(options?: PointerLockOptions): Promise<void>;
+        scroll(options?: ScrollToOptions): void;
+        scroll(x: number, y: number): void;
+        scrollBy(options?: ScrollToOptions): void;
+        scrollBy(x: number, y: number): void;
+        scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
+        scrollTo(options?: ScrollToOptions): void;
+        scrollTo(x: number, y: number): void;
+        setAttribute(qualifiedName: string, value: string): void;
+        setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
+        setAttributeNode(attr: Attr): Attr | null;
+        setAttributeNodeNS(attr: Attr): Attr | null;
+        setHTMLUnsafe(html: string): void;
+        setPointerCapture(pointerId: number): void;
+        toggleAttribute(qualifiedName: string, force?: boolean): boolean;
+        webkitMatchesSelector(selectors: string): boolean;
+        get textContent(): string;
+        set textContent(value: string | null);
+        readonly baseURI: string;
+        readonly childNodes: NodeListOf<ChildNode>;
+        readonly firstChild: ChildNode | null;
+        readonly isConnected: boolean;
+        readonly lastChild: ChildNode | null;
+        readonly nextSibling: ChildNode | null;
+        readonly nodeName: string;
+        readonly nodeType: number;
+        nodeValue: string | null;
+        readonly parentElement: HTMLElement | null;
+        readonly parentNode: ParentNode | null;
+        readonly previousSibling: ChildNode | null;
+        appendChild<T extends Node>(node: T): T;
+        cloneNode(subtree?: boolean): Node;
+        compareDocumentPosition(other: Node): number;
+        contains(other: Node | null): boolean;
+        getRootNode(options?: GetRootNodeOptions): Node;
+        hasChildNodes(): boolean;
+        insertBefore<T extends Node>(node: T, child: Node | null): T;
+        isDefaultNamespace(namespace: string | null): boolean;
+        isEqualNode(otherNode: Node | null): boolean;
+        isSameNode(otherNode: Node | null): boolean;
+        lookupNamespaceURI(prefix: string | null): string | null;
+        lookupPrefix(namespace: string | null): string | null;
+        normalize(): void;
+        removeChild<T extends Node>(child: T): T;
+        replaceChild<T extends Node>(node: Node, child: T): T;
+        readonly ELEMENT_NODE: 1;
+        readonly ATTRIBUTE_NODE: 2;
+        readonly TEXT_NODE: 3;
+        readonly CDATA_SECTION_NODE: 4;
+        readonly ENTITY_REFERENCE_NODE: 5;
+        readonly ENTITY_NODE: 6;
+        readonly PROCESSING_INSTRUCTION_NODE: 7;
+        readonly COMMENT_NODE: 8;
+        readonly DOCUMENT_NODE: 9;
+        readonly DOCUMENT_TYPE_NODE: 10;
+        readonly DOCUMENT_FRAGMENT_NODE: 11;
+        readonly NOTATION_NODE: 12;
+        readonly DOCUMENT_POSITION_DISCONNECTED: 1;
+        readonly DOCUMENT_POSITION_PRECEDING: 2;
+        readonly DOCUMENT_POSITION_FOLLOWING: 4;
+        readonly DOCUMENT_POSITION_CONTAINS: 8;
+        readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
+        readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
+        dispatchEvent(event: Event): boolean;
+        ariaActiveDescendantElement: Element | null;
+        ariaAtomic: string | null;
+        ariaAutoComplete: string | null;
+        ariaBrailleLabel: string | null;
+        ariaBrailleRoleDescription: string | null;
+        ariaBusy: string | null;
+        ariaChecked: string | null;
+        ariaColCount: string | null;
+        ariaColIndex: string | null;
+        ariaColIndexText: string | null;
+        ariaColSpan: string | null;
+        ariaControlsElements: ReadonlyArray<Element> | null;
+        ariaCurrent: string | null;
+        ariaDescribedByElements: ReadonlyArray<Element> | null;
+        ariaDescription: string | null;
+        ariaDetailsElements: ReadonlyArray<Element> | null;
+        ariaDisabled: string | null;
+        ariaErrorMessageElements: ReadonlyArray<Element> | null;
+        ariaExpanded: string | null;
+        ariaFlowToElements: ReadonlyArray<Element> | null;
+        ariaHasPopup: string | null;
+        ariaHidden: string | null;
+        ariaInvalid: string | null;
+        ariaKeyShortcuts: string | null;
+        ariaLabel: string | null;
+        ariaLabelledByElements: ReadonlyArray<Element> | null;
+        ariaLevel: string | null;
+        ariaLive: string | null;
+        ariaModal: string | null;
+        ariaMultiLine: string | null;
+        ariaMultiSelectable: string | null;
+        ariaOrientation: string | null;
+        ariaOwnsElements: ReadonlyArray<Element> | null;
+        ariaPlaceholder: string | null;
+        ariaPosInSet: string | null;
+        ariaPressed: string | null;
+        ariaReadOnly: string | null;
+        ariaRelevant: string | null;
+        ariaRequired: string | null;
+        ariaRoleDescription: string | null;
+        ariaRowCount: string | null;
+        ariaRowIndex: string | null;
+        ariaRowIndexText: string | null;
+        ariaRowSpan: string | null;
+        ariaSelected: string | null;
+        ariaSetSize: string | null;
+        ariaSort: string | null;
+        ariaValueMax: string | null;
+        ariaValueMin: string | null;
+        ariaValueNow: string | null;
+        ariaValueText: string | null;
+        role: string | null;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
+        getAnimations(options?: GetAnimationsOptions): Animation[];
+        after(...nodes: (Node | string)[]): void;
+        before(...nodes: (Node | string)[]): void;
+        remove(): void;
+        replaceWith(...nodes: (Node | string)[]): void;
+        readonly nextElementSibling: Element | null;
+        readonly previousElementSibling: Element | null;
+        readonly childElementCount: number;
+        readonly children: HTMLCollection;
+        readonly firstElementChild: Element | null;
+        readonly lastElementChild: Element | null;
+        append(...nodes: (Node | string)[]): void;
+        prepend(...nodes: (Node | string)[]): void;
+        querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
+        querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
+        querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
+        querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
+        querySelector<E extends Element = Element>(selectors: string): E | null;
+        querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+        querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
+        querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+        replaceChildren(...nodes: (Node | string)[]): void;
+        readonly assignedSlot: HTMLSlotElement | null;
+        readonly attributeStyleMap: StylePropertyMap;
+        get style(): CSSStyleDeclaration;
+        set style(cssText: string);
+        contentEditable: string;
+        enterKeyHint: string;
+        inputMode: string;
+        readonly isContentEditable: boolean;
+        onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+        onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
+        onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+        oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+        ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+        ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onerror: OnErrorEventHandler;
+        onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+        onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+        ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+        onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+        onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
+        onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+        onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
+        onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+        onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
+        ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+        onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+        autofocus: boolean;
+        readonly dataset: DOMStringMap;
+        nonce?: string;
+        tabIndex: number;
+        blur(): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
+        roleChanged(prev: string | null, next: string | null): void;
+        ariaAtomicChanged(prev: string | null, next: string | null): void;
+        ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
+        ariaBusyChanged(prev: string | null, next: string | null): void;
+        ariaCheckedChanged(prev: string | null, next: string | null): void;
+        ariaColCountChanged(prev: string | null, next: string | null): void;
+        ariaColIndexChanged(prev: string | null, next: string | null): void;
+        ariaColIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaColSpanChanged(prev: string | null, next: string | null): void;
+        ariaCurrentChanged(prev: string | null, next: string | null): void;
+        ariaDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaDisabledChanged(prev: string | null, next: string | null): void;
+        ariaExpandedChanged(prev: string | null, next: string | null): void;
+        ariaHasPopupChanged(prev: string | null, next: string | null): void;
+        ariaHiddenChanged(prev: string | null, next: string | null): void;
+        ariaInvalidChanged(prev: string | null, next: string | null): void;
+        ariaKeyShortcutsChanged(prev: string | null, next: string | null): void;
+        ariaLabelChanged(prev: string | null, next: string | null): void;
+        ariaLevelChanged(prev: string | null, next: string | null): void;
+        ariaLiveChanged(prev: string | null, next: string | null): void;
+        ariaModalChanged(prev: string | null, next: string | null): void;
+        ariaMultiLineChanged(prev: string | null, next: string | null): void;
+        ariaMultiSelectableChanged(prev: string | null, next: string | null): void;
+        ariaOrientationChanged(prev: string | null, next: string | null): void;
+        ariaPlaceholderChanged(prev: string | null, next: string | null): void;
+        ariaPosInSetChanged(prev: string | null, next: string | null): void;
+        ariaPressedChanged(prev: string | null, next: string | null): void;
+        ariaReadOnlyChanged(prev: string | null, next: string | null): void;
+        ariaRequiredChanged(prev: string | null, next: string | null): void;
+        ariaRoleDescriptionChanged(prev: string | null, next: string | null): void;
+        ariaRowCountChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexChanged(prev: string | null, next: string | null): void;
+        ariaRowIndexTextChanged(prev: string | null, next: string | null): void;
+        ariaRowSpanChanged(prev: string | null, next: string | null): void;
+        ariaSelectedChanged(prev: string | null, next: string | null): void;
+        ariaSetSizeChanged(prev: string | null, next: string | null): void;
+        ariaSortChanged(prev: string | null, next: string | null): void;
+        ariaValueMaxChanged(prev: string | null, next: string | null): void;
+        ariaValueMinChanged(prev: string | null, next: string | null): void;
+        ariaValueNowChanged(prev: string | null, next: string | null): void;
+        ariaValueTextChanged(prev: string | null, next: string | null): void;
+        ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
+        "__#private@#handleReplacedProp"(replacedProp: {
+            newPropertyName: string;
+            deprecatedPropertyName: string;
+            fromDeprecated: (v: any) => any;
+            toDeprecated?: ((v: any) => any) | undefined;
+        }): void;
+        "__#private@#controllers": Set<import('../../shared/framework/reactive-controller.js').ReactiveController>;
+        _addController(controller: import('../../shared/framework/reactive-controller.js').ReactiveController): void;
+        _removeController(controller: import('../../shared/framework/reactive-controller.js').ReactiveController): void;
+    };
+} & {
     new (...args: any[]): {
         localeChanged(): void;
         connectedCallback(): void;
@@ -439,6 +865,7 @@ declare const RichTextEditor_base: {
 export declare class RichTextEditor extends RichTextEditor_base {
     instance?: RteInstance;
     appearance?: RichTextEditorAppearance;
+    state?: RichTextEditorState;
     editorViewportElement?: HTMLElement;
     private _initViewIfNeeded;
     private _destroyViewIfNeeded;

package/lib/rich-text-editor/rte/__tests__/async-generator.d.ts

@@ -2,4 +2,5 @@ export declare const asyncGeneratorMock: <TYield, TReturn = undefined>() => {
     generator: AsyncGenerator<TYield, TReturn>;
     yield: (value: TYield) => Promise<void>;
     return: (value: TReturn) => Promise<void>;
+    throw: (error: unknown) => Promise<void>;
 };

package/lib/rich-text-editor/rte/features/atom.d.ts

@@ -1,5 +1,9 @@
-export type ResolvedAtomValue = string | null;
-export type ResolvedAtomValueGenerator = AsyncGenerator<ResolvedAtomValue, ResolvedAtomValue>;
+export interface ResolvedAtomValueWithVariant {
+    text: string;
+    variant?: string[];
+}
+export type ResolvedAtomValue = string | ResolvedAtomValueWithVariant | null;
+export type ResolvedAtomValueGenerator = AsyncGenerator<ResolvedAtomValue, ResolvedAtomValue | void>;
 export interface RteAtomConfig {
     resolveValue?: (value: string) => ResolvedAtomValue | ResolvedAtomValueGenerator;
     serializeValueToHtml?: (value: string) => string | null;