lightning-base-components 1.22.3-alpha → 1.26.2-rc.0-alpha

package/src/lightning/datatable/templates/div/div.html

@@ -11,6 +11,7 @@
         <!-- Inline Edit Panel -->
         <lightning-primitive-datatable-iedit-panel
             data-iedit-panel="true"
+            custom-error-validation-message={state.inlineEdit.customErrorValidationMessage}
             visible={state.inlineEdit.isPanelVisible}
             row-key-value={state.inlineEdit.rowKeyValue}
             col-key-value={state.inlineEdit.colKeyValue}
@@ -41,8 +42,7 @@
                     aria-rowcount={ariaRowCount}
                     aria-colcount={ariaColCount}
                     data-num-rows={data.length}
-                    data-num-selected-rows={selectedRows.length}
-                    data-last-rendered-row={_lastRenderedRow}>
+                    data-num-selected-rows={selectedRows.length}>
                     <template if:false={hasValidKeyField}>
                         <!-- empty since keyField wasn't provided -->
                     </template>
@@ -58,6 +58,7 @@
                             <div class="slds-line-height_reset table-header"
                                 role="row"
                                 aria-rowindex="1"
+                                lwc:ref="headerRow"
                                 data-row-key-value="HEADER"
                                 onprivateresizestart={handleResizeStart}
                                 onprivateresizeend={handleResizeEnd}>
@@ -66,7 +67,7 @@
                                     <div part="cell"
                                         class="column-header cell"
                                         style={def.style}
-                                        role="columnheader"
+                                        role={def.role}
                                         tabindex={def.tabIndex}
                                         aria-label={def.ariaLabel}
                                         aria-sort={def.sortAriaLabel}
@@ -78,21 +79,21 @@
                                             <lightning-primitive-header-factory
                                                 style={def.style}
                                                 def={def}
+                                                header-height={_headerHeight}
+                                                header-id={computedCheckboxColumnHeaderId}
                                                 dt-context-id={_datatableId}
                                                 key={def.colKeyValue}
-                                                header-height={_headerHeight}
                                                 row-key-value="HEADER"
                                                 col-key-value={def.colKeyValue}
                                                 col-index={colIndex}
                                                 has-focus={def.hasFocus}
                                                 actions={def.actions}
+                                                img-src={def.imgSrc}
                                                 sortable={def.sortable}
                                                 sorted={def.sorted}
                                                 sorted-direction={def.sortedDirection}
-                                                column-width={def.columnWidth}
                                                 show-checkbox={showSelectAllCheckbox}
                                                 hide-header={hideTableHeader}
-                                                onprivatecolumnheaderid={handleCheckboxHeaderId}
                                                 wrap-table-header={wrapTableHeader}
                                                 wrap-text-max-lines={state.wrapTextMaxLines}
                                                 show-actions-menu={showActionsMenu}>
@@ -103,22 +104,22 @@
                                             <lightning-primitive-header-factory
                                                 style={def.style}
                                                 def={def}
+                                                header-height={_headerHeight}
+                                                header-id={computedCheckboxColumnHeaderId}
                                                 dt-context-id={_datatableId}
                                                 key={def.colKeyValue}
                                                 row-key-value="HEADER"
                                                 col-key-value={def.colKeyValue}
                                                 col-index={colIndex}
                                                 has-focus={def.hasFocus}
-                                                header-height={_headerHeight}
                                                 actions={def.actions}
+                                                img-src={def.imgSrc}
                                                 sortable={def.sortable}
                                                 sorted={def.sorted}
                                                 sorted-direction={def.sortedDirection}
-                                                column-width={def.columnWidth}
                                                 resizable={hasResizebleColumns}
                                                 resizestep={widthsData.resizeStep}
                                                 hide-header={hideTableHeader}
-                                                onprivatecolumnheaderid={handleCheckboxHeaderId}
                                                 wrap-table-header={wrapTableHeader}
                                                 wrap-text-max-lines={state.wrapTextMaxLines}
                                                 show-actions-menu={showActionsMenu}>
@@ -131,6 +132,7 @@
                         <!-- Corresponds to <tbody> -->
                         <div part="datagrid-body"
                             data-rowgroup-body
+                            lwc:ref="tableBody"
                             role="rowgroup"
                             style={computedTbodyStyle}>
                             <template for:each={renderedRows} for:item="row">
@@ -165,11 +167,13 @@
                                                     <!-- Fast Path -->
                                                     <template if:true={cell.isInlined}>
                                                         <span
+                                                            part="input-checkbox"
                                                             class="slds-checkbox"
                                                             data-inline-type="primitive-cell-checkbox"
                                                             onclick={handleInlinedCheckboxContainerClick}
                                                             onmousedown={handleInlinedCheckboxContainerMouseDown}>
                                                             <input type="checkbox"
+                                                                part="checkbox"
                                                                 name={cell.checkboxName}
                                                                 id={cell.checkboxId}
                                                                 checked={row.isSelected}
@@ -180,9 +184,10 @@
                                                                 onclick={handleInlinedCheckboxClick}>
                                                             <label
                                                                 id={cell.checkboxLabelId}
+                                                                part="label-container"
                                                                 class="slds-checkbox__label"
                                                                 for={cell.checkboxId}>
-                                                                <span class="slds-checkbox_faux"></span>
+                                                                <span part="indicator" class="slds-checkbox_faux"></span>
                                                                 <span class="slds-form-element__label slds-assistive-text">
                                                                     {cell.checkboxSelectItemAssistiveText}
                                                                 </span>
@@ -270,22 +275,24 @@
                                                         </template>
                                                         <template if:false={cell.isCustomBareLayout}>
                                                             <span class={cell.computedWrapperClass} data-cell-type={cell.columnType}>
+
+                                                                <!-- tree toggle -->
+                                                                <template if:true={cell.hasTreeData}>
+                                                                    <lightning-primitive-treegrid-cell-toggle
+                                                                        data-navigation="enable"
+                                                                        row-key-value={row.key}
+                                                                        col-key-value={cell.colKeyValue}
+                                                                        display-value={cell.displayValue}
+                                                                        url-label={cell.urlLabel}
+                                                                        value={cell.value}
+                                                                        has-children={cell.typeAttribute21}
+                                                                        is-expanded={cell.typeAttribute22}>
+                                                                    </lightning-primitive-treegrid-cell-toggle>
+                                                                </template>
+
                                                                 <div class={cell.computedCellDivClass} style={cell.computedCellDivStyle} data-editable={cell.isEditable}>
                                                                     <!-- *************** PREFIX ICONS DO NOT ADD ANY TYPE BEFORE THIS *************** -->
 
-                                                                    <!-- tree toggle -->
-                                                                    <template if:true={cell.hasTreeData}>
-                                                                        <lightning-primitive-treegrid-cell-toggle
-                                                                            data-navigation="enable"
-                                                                            row-key-value={row.key}
-                                                                            col-key-value={cell.colKeyValue}
-                                                                            display-value={cell.displayValue}
-                                                                            value={cell.value}
-                                                                            has-children={cell.typeAttribute21}
-                                                                            is-expanded={cell.typeAttribute22}>
-                                                                        </lightning-primitive-treegrid-cell-toggle>
-                                                                    </template>
-
                                                                     <!-- left icon -->
                                                                     <template if:true={cell.hasLeftIcon}>
                                                                         <lightning-icon
@@ -305,14 +312,14 @@
                                                                             <!-- Caution: Modify generate-inlined-icons script before changing comments -->
                                                                             <!-- START utility:check -->
                                                                             <template lwc:if={cell.isRTL}>
-                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                     <g>
                                                                              <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
                                                                             </g>
                                                                                 </svg>
                                                                             </template>
                                                                             <template lwc:else>
-                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                     <g>
                                                                              <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
                                                                             </g>
@@ -325,9 +332,7 @@
 
                                                                     <!-- currency -->
                                                                     <template if:true={cell.isCurrency}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.currencyValue}
                                                                         </span>
                                                                     </template>
@@ -335,7 +340,6 @@
                                                                     <!-- custom type with standard layout -->
                                                                     <template if:true={cell.isCustomStandardLayout}>
                                                                         <lightning-primitive-custom-cell
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
                                                                             types={_privateTypes}
                                                                             row-key-value={row.key}
                                                                             col-key-value={cell.colKeyValue}
@@ -363,18 +367,14 @@
 
                                                                     <!-- date local -->
                                                                     <template if:true={cell.isDateLocal}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-date-time">
+                                                                        <span data-inline-type="formatted-date-time">
                                                                             {cell.dateLocalValue}
                                                                         </span>
                                                                     </template>
 
                                                                     <!-- date time -->
                                                                     <template if:true={cell.isDateTime}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-date-time">
+                                                                        <span data-inline-type="formatted-date-time">
                                                                             {cell.dateTimeValue}
                                                                         </span>
                                                                     </template>
@@ -383,7 +383,6 @@
                                                                     <template if:true={cell.isEmail}>
                                                                         <template if:true={cell.showEmailLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-action-triggers="enter"
                                                                                 data-navigation="enable"
                                                                                 href={cell.emailLink}
@@ -392,14 +391,14 @@
                                                                                     <!-- Caution: Modify generate-inlined-icons script before changing comments -->
                                                                                     <!-- START utility:email -->
                                                                                     <template lwc:if={cell.isRTL}>
-                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                             <g>
                                                                                      <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
                                                                                     </g>
                                                                                         </svg>
                                                                                     </template>
                                                                                     <template lwc:else>
-                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                             <g>
                                                                                      <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
                                                                                     </g>
@@ -415,7 +414,7 @@
                                                                     <!-- location -->
                                                                     <template if:true={cell.isLocation}>
                                                                         <template if:true={cell.hasLeftIcon}>
-                                                                            <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.locationValue}</span>
+                                                                            <span>{cell.locationValue}</span>
                                                                         </template>
                                                                         <template if:false={cell.hasLeftIcon}>
                                                                             {cell.locationValue}
@@ -424,18 +423,14 @@
 
                                                                     <!-- number -->
                                                                     <template if:true={cell.isNumber}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.numberValue}
                                                                         </span>
                                                                     </template>
 
                                                                     <!-- percent -->
                                                                     <template if:true={cell.isPercent}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.percentValue}
                                                                         </span>
                                                                     </template>
@@ -444,7 +439,6 @@
                                                                     <template if:true={cell.isPhone}>
                                                                         <template if:true={cell.showPhoneLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-action-triggers="enter"
                                                                                 data-inline-type="formatted-phone"
                                                                                 data-navigation="enable"
@@ -459,7 +453,6 @@
                                                                     <template if:true={cell.isLookup}>
                                                                         <template if:true={cell.lookupIsNavigable}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-action-triggers="enter"
                                                                                 data-inline-type="formatted-lookup"
                                                                                 data-navigation="enable"
@@ -471,7 +464,6 @@
                                                                         </template>
                                                                         <template if:false={cell.lookupIsNavigable}>
                                                                             <span
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-inline-type="formatted-lookup"
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter">
@@ -502,11 +494,11 @@
                                                                     <template if:true={cell.isText}>
                                                                         <template if:false={cell.shouldFormatText}>
                                                                             <template if:true={cell.ignoreRTL}>
-                                                                                <span dir="ltr" class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                                <span dir="ltr">{cell.textValue}</span>
                                                                             </template>
                                                                             <template if:false={cell.ignoreRTL}>
                                                                                 <template if:true={cell.hasLeftIcon}>
-                                                                                    <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                                    <span>{cell.textValue}</span>
                                                                                 </template>
                                                                                 <template if:false={cell.hasLeftIcon}>
                                                                                     {cell.textValue}
@@ -514,7 +506,7 @@
                                                                             </template>
                                                                         </template>
                                                                         <template if:true={cell.shouldFormatText}>
-                                                                            <span class={cell.computedMarginClassWhenLeftIconExists}>
+                                                                            <span>
                                                                                 <template for:each={cell.textParts} for:item="part">
                                                                                     <template if:true={part.isLink}>
                                                                                         <a key={part.key} target='_blank' href={part.href} rel="noopener">{part.value}</a>
@@ -531,7 +523,6 @@
                                                                     <template if:true={cell.isURL}>
                                                                         <template if:true={cell.showUrlLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-action-triggers="enter"
                                                                                 data-inline-type="formatted-url"
                                                                                 data-navigation="enable"
@@ -560,7 +551,8 @@
 
                                                                 </div>
                                                                 <template if:true={cell.isEditable}>
-                                                                    <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
+                                                                    <button part="button button-icon"
+                                                                            class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
                                                                             aria-labelledby={cell.editLabelId}
                                                                             data-action-edit="true"
                                                                             data-action-triggers="enter,space"
@@ -570,14 +562,14 @@
                                                                         <!-- Caution: Modify generate-inlined-icons script before changing comments -->
                                                                         <!-- START utility:edit -->
                                                                         <template lwc:if={cell.isRTL}>
-                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                 <g>
                                                                          <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
                                                                         </g>
                                                                             </svg>
                                                                         </template>
                                                                         <template lwc:else>
-                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                 <g>
                                                                          <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
                                                                         </g>
@@ -598,14 +590,14 @@
                                                                     <!-- Caution: Modify generate-inlined-icons script before changing comments -->
                                                                     <!-- START utility:lock -->
                                                                     <template lwc:if={cell.isRTL}>
-                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                             <g>
                                                                      <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
                                                                     </g>
                                                                         </svg>
                                                                     </template>
                                                                     <template lwc:else>
-                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                             <g>
                                                                      <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
                                                                     </g>
@@ -638,6 +630,8 @@
                                                             icon-label={cell.iconLabel}
                                                             icon-position={cell.iconPosition}
                                                             icon-alternative-text={cell.iconAlternativeText}
+                                                            is-custom-type={cell.isCustom}
+                                                            is-custom-bare-layout={cell.isCustomBareLayout}
                                                             editable={cell.editable}
                                                             display-read-only-icon={cell.displayReadOnlyIcon}
                                                             type-attribute-0={cell.typeAttribute0}
@@ -706,22 +700,24 @@
                                                         </template>
                                                         <template if:false={cell.isCustomBareLayout}>
                                                             <span class={cell.computedWrapperClass} data-cell-type={cell.columnType}>
+
+                                                                <!-- tree toggle -->
+                                                                <template if:true={cell.hasTreeData}>
+                                                                    <lightning-primitive-treegrid-cell-toggle
+                                                                        data-navigation="enable"
+                                                                        row-key-value={row.key}
+                                                                        col-key-value={cell.colKeyValue}
+                                                                        display-value={cell.displayValue}
+                                                                        url-label={cell.urlLabel}
+                                                                        value={cell.value}
+                                                                        has-children={cell.typeAttribute21}
+                                                                        is-expanded={cell.typeAttribute22}>
+                                                                    </lightning-primitive-treegrid-cell-toggle>
+                                                                </template>
+
                                                                 <div class={cell.computedCellDivClass} style={cell.computedCellDivStyle} data-editable={cell.isEditable}>
                                                                     <!-- *************** PREFIX ICONS DO NOT ADD ANY TYPE BEFORE THIS *************** -->
 
-                                                                    <!-- tree toggle -->
-                                                                    <template if:true={cell.hasTreeData}>
-                                                                        <lightning-primitive-treegrid-cell-toggle
-                                                                            data-navigation="enable"
-                                                                            row-key-value={row.key}
-                                                                            col-key-value={cell.colKeyValue}
-                                                                            display-value={cell.displayValue}
-                                                                            value={cell.value}
-                                                                            has-children={cell.typeAttribute21}
-                                                                            is-expanded={cell.typeAttribute22}>
-                                                                        </lightning-primitive-treegrid-cell-toggle>
-                                                                    </template>
-
                                                                     <!-- left icon -->
                                                                     <template if:true={cell.hasLeftIcon}>
                                                                         <lightning-icon
@@ -741,14 +737,14 @@
                                                                             <!-- Caution: Modify generate-inlined-icons script before changing comments -->
                                                                             <!-- START utility:check -->
                                                                             <template lwc:if={cell.isRTL}>
-                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                     <g>
                                                                              <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
                                                                             </g>
                                                                                 </svg>
                                                                             </template>
                                                                             <template lwc:else>
-                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="check" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                     <g>
                                                                              <path d="M191 425L26 259c-6-6-6-16 0-22l22-22c6-6 16-6 22 0l124 125a10 10 0 0015 0L452 95c6-6 16-6 22 0l22 22c6 6 6 16 0 22L213 425c-6 7-16 7-22 0z"></path>
                                                                             </g>
@@ -761,9 +757,7 @@
 
                                                                     <!-- currency -->
                                                                     <template if:true={cell.isCurrency}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.currencyValue}
                                                                         </span>
                                                                     </template>
@@ -771,7 +765,6 @@
                                                                     <!-- custom type with standard layout -->
                                                                     <template if:true={cell.isCustomStandardLayout}>
                                                                         <lightning-primitive-custom-cell
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
                                                                             types={_privateTypes}
                                                                             row-key-value={row.key}
                                                                             col-key-value={cell.colKeyValue}
@@ -799,18 +792,14 @@
 
                                                                     <!-- date local -->
                                                                     <template if:true={cell.isDateLocal}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-date-time">
+                                                                        <span data-inline-type="formatted-date-time">
                                                                             {cell.dateLocalValue}
                                                                         </span>
                                                                     </template>
 
                                                                     <!-- date time -->
                                                                     <template if:true={cell.isDateTime}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-date-time">
+                                                                        <span data-inline-type="formatted-date-time">
                                                                             {cell.dateTimeValue}
                                                                         </span>
                                                                     </template>
@@ -819,7 +808,6 @@
                                                                     <template if:true={cell.isEmail}>
                                                                         <template if:true={cell.showEmailLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter"
                                                                                 href={cell.emailLink}
@@ -828,14 +816,14 @@
                                                                                     <!-- Caution: Modify generate-inlined-icons script before changing comments -->
                                                                                     <!-- START utility:email -->
                                                                                     <template lwc:if={cell.isRTL}>
-                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                             <g>
                                                                                      <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
                                                                                     </g>
                                                                                         </svg>
                                                                                     </template>
                                                                                     <template lwc:else>
-                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                                        <svg class="slds-icon slds-icon-text-default slds-icon_x-small slds-m-right_x-small" focusable="false" data-key="email" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                             <g>
                                                                                      <path d="M249 301c6 6 15 6 21 0L496 91c4-8 3-21-13-21L36 71c-12 0-22 11-13 21zm251-128c0-10-12-16-20-9L303 327c-12 11-27 17-43 17s-31-6-43-16L41 164c-8-7-20-2-20 9-1-3-1 227-1 227a40 40 0 0040 40h400a40 40 0 0040-40z"></path>
                                                                                     </g>
@@ -851,7 +839,7 @@
                                                                     <!-- location -->
                                                                     <template if:true={cell.isLocation}>
                                                                         <template if:true={cell.hasLeftIcon}>
-                                                                            <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.locationValue}</span>
+                                                                            <span>{cell.locationValue}</span>
                                                                         </template>
                                                                         <template if:false={cell.hasLeftIcon}>
                                                                             {cell.locationValue}
@@ -860,18 +848,14 @@
 
                                                                     <!-- number -->
                                                                     <template if:true={cell.isNumber}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.numberValue}
                                                                         </span>
                                                                     </template>
 
                                                                     <!-- percent -->
                                                                     <template if:true={cell.isPercent}>
-                                                                        <span
-                                                                            class={cell.computedMarginClassWhenLeftIconExists}
-                                                                            data-inline-type="formatted-number">
+                                                                        <span data-inline-type="formatted-number">
                                                                             {cell.percentValue}
                                                                         </span>
                                                                     </template>
@@ -880,7 +864,6 @@
                                                                     <template if:true={cell.isPhone}>
                                                                         <template if:true={cell.showPhoneLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-inline-type="formatted-phone"
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter"
@@ -895,7 +878,6 @@
                                                                     <template if:true={cell.isLookup}>
                                                                         <template if:true={cell.lookupIsNavigable}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-inline-type="formatted-lookup"
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter"
@@ -907,7 +889,6 @@
                                                                         </template>
                                                                         <template if:false={cell.lookupIsNavigable}>
                                                                             <span
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-inline-type="formatted-lookup"
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter">
@@ -941,11 +922,11 @@
                                                                     <template if:true={cell.isText}>
                                                                         <template if:false={cell.shouldFormatText}>
                                                                             <template if:true={cell.ignoreRTL}>
-                                                                                <span dir="ltr" class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                                <span dir="ltr">{cell.textValue}</span>
                                                                             </template>
                                                                             <template if:false={cell.ignoreRTL}>
                                                                                 <template if:true={cell.hasLeftIcon}>
-                                                                                    <span class={cell.computedMarginClassWhenLeftIconExists}>{cell.textValue}</span>
+                                                                                    <span>{cell.textValue}</span>
                                                                                 </template>
                                                                                 <template if:false={cell.hasLeftIcon}>
                                                                                     {cell.textValue}
@@ -953,7 +934,7 @@
                                                                             </template>
                                                                         </template>
                                                                         <template if:true={cell.shouldFormatText}>
-                                                                            <span class={cell.computedMarginClassWhenLeftIconExists}>
+                                                                            <span>
                                                                                 <template for:each={cell.textParts} for:item="part">
                                                                                     <template if:true={part.isLink}>
                                                                                         <a key={part.key} target='_blank' href={part.href} rel="noopener">{part.value}</a>
@@ -970,7 +951,6 @@
                                                                     <template if:true={cell.isURL}>
                                                                         <template if:true={cell.showUrlLink}>
                                                                             <a
-                                                                                class={cell.computedMarginClassWhenLeftIconExists}
                                                                                 data-inline-type="formatted-url"
                                                                                 data-navigation="enable"
                                                                                 data-action-triggers="enter"
@@ -999,7 +979,8 @@
 
                                                                 </div>
                                                                 <template if:true={cell.isEditable}>
-                                                                    <button class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
+                                                                    <button part="button button-icon"
+                                                                            class="slds-button slds-button_icon slds-cell-edit__button slds-m-left_x-small"
                                                                             aria-labelledby={cell.editLabelId}
                                                                             data-action-edit="true"
                                                                             data-action-triggers="enter,space"
@@ -1009,14 +990,14 @@
                                                                         <!-- Caution: Modify generate-inlined-icons script before changing comments -->
                                                                         <!-- START utility:edit -->
                                                                         <template lwc:if={cell.isRTL}>
-                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                 <g>
                                                                          <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
                                                                         </g>
                                                                             </svg>
                                                                         </template>
                                                                         <template lwc:else>
-                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                            <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="edit" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                                 <g>
                                                                          <path d="M95 334l89 89c4 4 10 4 14 0l222-223c4-4 4-10 0-14l-88-88a10 10 0 00-14 0L95 321c-4 4-4 10 0 13zM361 57a10 10 0 000 14l88 88c4 4 10 4 14 0l25-25a38 38 0 000-55l-47-47a40 40 0 00-57 0zM21 482c-2 10 7 19 17 17l109-26c4-1 7-3 9-5l2-2c2-2 3-9-1-13l-90-90c-4-4-11-3-13-1l-2 2a20 20 0 00-5 9z"></path>
                                                                         </g>
@@ -1037,14 +1018,14 @@
                                                                     <!-- Caution: Modify generate-inlined-icons script before changing comments -->
                                                                     <!-- START utility:lock -->
                                                                     <template lwc:if={cell.isRTL}>
-                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                             <g>
                                                                      <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
                                                                     </g>
                                                                         </svg>
                                                                     </template>
                                                                     <template lwc:else>
-                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="icon">
+                                                                        <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_lock slds-button__icon_edit slds-icon slds-icon-text-default slds-icon_xx-small" focusable="false" data-key="lock" aria-hidden="true" viewBox="0 0 520 520" part="button-icon icon">
                                                                             <g>
                                                                      <path d="M110 190h40c6 0 10-3 10-9v-1A100 100 0 01267 80c53 4 93 50 93 104v-3c0 6 4 9 10 9h40c6 0 10-3 10-9v-1A160 160 0 00252 20c-85 4-150 76-152 161 1 5 5 9 10 9zm-10-9v4zm360 89a40 40 0 00-40-40H100a40 40 0 00-40 40v190a40 40 0 0040 40h320a40 40 0 0040-40zM306 427c2 6-3 13-10 13h-73c-7 0-11-6-10-13l18-60a48 48 0 01-21-48 50 50 0 0139-38c32-6 60 17 60 47 0 16-8 31-21 39z"></path>
                                                                     </g>
@@ -1078,6 +1059,8 @@
                                                             icon-label={cell.iconLabel}
                                                             icon-position={cell.iconPosition}
                                                             icon-alternative-text={cell.iconAlternativeText}
+                                                            is-custom-type={cell.isCustom}
+                                                            is-custom-bare-layout={cell.isCustomBareLayout}
                                                             editable={cell.editable}
                                                             display-read-only-icon={cell.displayReadOnlyIcon}
                                                             type-attribute-0={cell.typeAttribute0}
@@ -1109,7 +1092,7 @@
                     <template if:true={isLoading}>
                         <div>
                             <div colspan={state.columns.length} part="spinner" class="slds-is-relative">
-                                <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
+                                <lightning-primitive-datatable-loading-indicator style="height: 40px;"></lightning-primitive-datatable-loading-indicator>
                             </div>
                         </div>
                     </template>