lightning-base-components 1.13.6-alpha → 1.14.1-alpha

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

@@ -0,0 +1,53 @@
+/** Styles that aren't available from SLDS **/
+
+.cell {
+    display: inline-block;
+    padding: .25rem .5rem;
+    white-space: nowrap;
+}
+
+.column-header {
+    color: #514f4d;
+    padding: .25rem .5rem;
+    font-weight: 700;
+    line-height: normal;
+}
+
+.table-header {
+    height: 0;
+}
+
+/* Row borders */
+[data-row-key-value] {
+    border-top: 1px solid #dddbda;
+}
+
+/* Required for row numbers */
+[role="row"] {
+    counter-increment: row-number;
+}
+
+/* Move column header row to left;
+   TODO: See if there a better way */
+[role="grid"] > [role="rowgroup"]:nth-child(1) {
+    margin-left: -0.5rem;
+}
+
+[role="columnheader"] {
+    outline: none;
+}
+
+[role="row"]:hover {
+    background-color: var(--sds-c-color-background, #f3f2f2);
+}
+
+[role="row"].slds-is-selected {
+    background-color: var(--sds-c-color-background-dark, #ecebea);
+}
+
+[role="rowheader"].slds-has-focus,
+[role="rowheader"]:focus {
+    -webkit-box-shadow: var(--sds-c-color-border-selection, #0176d3) 0 0 0 1px inset;
+    box-shadow: var(--sds-c-color-border-selection, #0176d3) 0 0 0 1px inset;
+    outline: 0;
+}

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

@@ -0,0 +1,272 @@
+<template>
+    <!-- aria-live region to announce the keyboard navigation mode -->
+    <span aria-live="polite">
+        <!-- TODO: Look to merge this to a single span -->
+        <span data-keyboard-mode="navigation" class={computedAriaLiveClassForNavMode}>{i18n.ariaLiveNavigationMode}</span>
+        <span data-keyboard-mode="action" class={computedAriaLiveClassForActionMode}>{i18n.ariaLiveActionMode}</span>
+    </span>
+    <div lwc:dom="manual" class="dt-width-observer" style="width: 100%; height: 0px;"></div>
+    <div class="dt-outer-container" style="height: 100%; position: relative;">
+        <!-- Inline Edit Panel -->
+        <lightning-primitive-datatable-iedit-panel
+            data-iedit-panel="true"
+            visible={state.inlineEdit.isPanelVisible}
+            row-key-value={state.inlineEdit.rowKeyValue}
+            col-key-value={state.inlineEdit.colKeyValue}
+            edited-value={state.inlineEdit.editedValue}
+            column-def={state.inlineEdit.columnDef}
+            is-mass-edit-enabled={state.inlineEdit.massEditEnabled}
+            number-of-selected-rows={state.inlineEdit.massEditSelectedRows}
+            resolved-type-attributes={state.inlineEdit.resolvedTypeAttributes}
+            onieditfinished={handleInlineEditFinish}
+            onmasscheckboxchange={handleMassCheckboxChange}
+        ></lightning-primitive-datatable-iedit-panel>
+        <!-- Table Container -->
+        <div class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={scrollerXStyles}>
+            <div class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerStyle}>
+                <!-- Corresponds to <table> -->
+                <div class={computedTableClass}
+                    role={computedTableRole}
+                    style={computedTableStyle}
+                    onkeydown={handleTableKeydown}
+                    onclick={handleCellClick}
+                    onfocusin={handleTableFocusIn}
+                    onfocusout={handleTableFocusOut}
+                    aria-label={ariaLabel}
+                    aria-labelledby={ariaLabelledBy}
+                    aria-rowcount={ariaRowCount}
+                    aria-colcount={ariaColCount}>
+                    <template if:false={hasValidKeyField}>
+                        <!-- empty since keyField wasn't provided -->
+                    </template>
+                    <template if:true={hasValidKeyField}>
+                        <!-- Corresponds to <thead> -->
+                        <div role="rowgroup">
+                            <!-- TODO: Fix aria-rowindex to not be hardcoded -->
+                            <!-- TODO: might need to move the table-header class out or rename -->
+                            <!-- Column Header Row -->
+                            <div class="slds-line-height_reset table-header"
+                                role="row"
+                                aria-rowindex="1"
+                                onprivateresizestart={handleResizeStart}
+                                onprivateresizeend={handleResizeEnd}>
+                                <template for:each={state.columns} for:item="def" for:index="colIndex">
+                                    <!-- Column Header -->
+                                    <div class="column-header cell"
+                                        style={def.style}
+                                        role="columnheader"
+                                        tabindex={def.tabIndex}
+                                        aria-label={def.ariaLabel}
+                                        aria-sort={def.sortAriaLabel}
+                                        key={def.colKeyValue}>
+
+                                        <template if:true={def.fixedWidth}>
+                                            <!-- Fixed Width Columns: Non-resizable -->
+                                            <lightning-primitive-header-factory
+                                                style={def.style}
+                                                def={def}
+                                                dt-context-id={_datatableId}
+                                                key={def.colKeyValue}
+                                                row-key-value="HEADER"
+                                                col-key-value={def.colKeyValue}
+                                                col-index={colIndex}
+                                                has-focus={def.hasFocus}
+                                                actions={def.actions}
+                                                sortable={def.sortable}
+                                                sorted={def.sorted}
+                                                sorted-direction={def.sortedDirection}
+                                                column-width={def.columnWidth}
+                                                show-checkbox={showSelectAllCheckbox}
+                                                hide-header={hideTableHeader}>
+                                            </lightning-primitive-header-factory>
+                                        </template>
+                                        <template if:false={def.fixedWidth}>
+                                            <!-- Resizable Columns (Non-Fixed-Width) -->
+                                            <lightning-primitive-header-factory
+                                                style={def.style}
+                                                def={def}
+                                                dt-context-id={_datatableId}
+                                                key={def.colKeyValue}
+                                                row-key-value="HEADER"
+                                                col-key-value={def.colKeyValue}
+                                                col-index={colIndex}
+                                                has-focus={def.hasFocus}
+                                                actions={def.actions}
+                                                sortable={def.sortable}
+                                                sorted={def.sorted}
+                                                sorted-direction={def.sortedDirection}
+                                                column-width={def.columnWidth}
+                                                resizable={hasResizebleColumns}
+                                                resizestep={widthsData.resizeStep}
+                                                hide-header={hideTableHeader}>
+                                            </lightning-primitive-header-factory>
+                                        </template>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                        <!-- Corresponds to <tbody> -->
+                        <div style={computedTbodyStyle} role="rowgroup">
+                            <template for:each={renderedRows} for:item="row" for:index="rowIndex">
+                                <!-- Data Rows -->
+                                <div class={row.classnames}
+                                    role="row"
+                                    key={row.key}
+                                    onkeydown={handleKeydownOnDataRow}
+                                    data-row-key-value={row.key}
+                                    aria-selected={row.ariaSelected}
+                                    aria-level={row.level}
+                                    aria-expanded={row.isExpanded}
+                                    aria-setsize={row.setSize}
+                                    aria-posinset={row.posInSet}
+                                    aria-rowindex={row.ariaRowIndex}
+                                    tabindex={row.tabIndex}>
+                                    <template for:each={row.cells} for:item="cell">
+                                        <template if:true={cell.isCheckbox}>
+                                            <!-- Checkbox Cell -->
+                                            <div class={cell.class}
+                                                style={cell.style}
+                                                role="gridcell"
+                                                tabindex={cell.tabIndex}
+                                                data-label={cell.dataLabel}
+                                                key={cell.colKeyValue}>
+                                                <lightning-primitive-cell-checkbox
+                                                    dt-context-id={_datatableId}
+                                                    has-focus={cell.hasFocus}
+                                                    data-label={cell.dataLabel}
+                                                    key={cell.key}
+                                                    row-key-value={row.key}
+                                                    col-key-value={cell.colKeyValue}
+                                                    row-index={rowIndex}
+                                                    type={row.inputType}
+                                                    is-selected={row.isSelected}
+                                                    is-disabled={row.isDisabled}
+                                                    column-header-id={computedCheckboxColumnHeaderId}>
+                                                </lightning-primitive-cell-checkbox>
+                                            </div>
+                                        </template>
+                                        <template if:true={cell.isDataTypeScope}>
+                                            <!-- Row Header Cell -->
+                                            <div class={cell.class}
+                                                role="rowheader"
+                                                style={cell.style}
+                                                aria-selected={cell.ariaSelected}
+                                                aria-readonly={cell.ariaReadOnly}
+                                                tabindex={cell.tabIndex}
+                                                data-label={cell.dataLabel}
+                                                key={cell.colKeyValue}>
+                                                <lightning-primitive-cell-factory
+                                                    types={privateTypes}
+                                                    aria-selected={cell.ariaSelected}
+                                                    data-label={cell.dataLabel}
+                                                    alignment={cell.alignment}
+                                                    has-error={cell.hasError}
+                                                    has-focus={cell.hasFocus}
+                                                    column-label={cell.dataLabel}
+                                                    column-type={cell.columnType}
+                                                    column-sub-type={cell.columnSubType}
+                                                    wrap-text={cell.wrapText}
+                                                    wrap-text-max-lines={cell.wrapTextMaxLines}
+                                                    key={cell.columnType}
+                                                    row-key-value={row.key}
+                                                    col-key-value={cell.colKeyValue}
+                                                    value={cell.value}
+                                                    icon-name={cell.iconName}
+                                                    icon-label={cell.iconLabel}
+                                                    icon-position={cell.iconPosition}
+                                                    icon-alternative-text={cell.iconAlternativeText}
+                                                    editable={cell.editable}
+                                                    display-read-only-icon={cell.displayReadOnlyIcon}
+                                                    type-attribute-0={cell.typeAttribute0}
+                                                    type-attribute-1={cell.typeAttribute1}
+                                                    type-attribute-2={cell.typeAttribute2}
+                                                    type-attribute-3={cell.typeAttribute3}
+                                                    type-attribute-4={cell.typeAttribute4}
+                                                    type-attribute-5={cell.typeAttribute5}
+                                                    type-attribute-6={cell.typeAttribute6}
+                                                    type-attribute-7={cell.typeAttribute7}
+                                                    type-attribute-8={cell.typeAttribute8}
+                                                    type-attribute-9={cell.typeAttribute9}
+                                                    type-attribute-10={cell.typeAttribute10}
+                                                    type-attribute-21={cell.typeAttribute21}
+                                                    type-attribute-22={cell.typeAttribute22}>
+                                                </lightning-primitive-cell-factory>
+                                            </div>
+                                        </template>
+                                        <template if:true={cell.isDataType}>
+                                            <!-- Non-Header Cells (Regular Data Cells) -->
+                                            <div class={cell.class}
+                                                role="gridcell"
+                                                style={cell.style}
+                                                aria-selected={cell.ariaSelected}
+                                                aria-readonly={cell.ariaReadOnly}
+                                                tabindex={cell.tabIndex}
+                                                data-label={cell.dataLabel}
+                                                key={cell.colKeyValue}>
+                                                <lightning-primitive-cell-factory
+                                                    types={privateTypes}
+                                                    aria-selected={cell.ariaSelected}
+                                                    data-label={cell.dataLabel}
+                                                    alignment={cell.alignment}
+                                                    has-focus={cell.hasFocus}
+                                                    has-error={cell.hasError}
+                                                    column-label={cell.dataLabel}
+                                                    column-type={cell.columnType}
+                                                    column-sub-type={cell.columnSubType}
+                                                    wrap-text={cell.wrapText}
+                                                    wrap-text-max-lines={cell.wrapTextMaxLines}
+                                                    key={cell.columnType}
+                                                    row-key-value={row.key}
+                                                    col-key-value={cell.colKeyValue}
+                                                    value={cell.value}
+                                                    icon-name={cell.iconName}
+                                                    icon-label={cell.iconLabel}
+                                                    icon-position={cell.iconPosition}
+                                                    icon-alternative-text={cell.iconAlternativeText}
+                                                    editable={cell.editable}
+                                                    display-read-only-icon={cell.displayReadOnlyIcon}
+                                                    type-attribute-0={cell.typeAttribute0}
+                                                    type-attribute-1={cell.typeAttribute1}
+                                                    type-attribute-2={cell.typeAttribute2}
+                                                    type-attribute-3={cell.typeAttribute3}
+                                                    type-attribute-4={cell.typeAttribute4}
+                                                    type-attribute-5={cell.typeAttribute5}
+                                                    type-attribute-6={cell.typeAttribute6}
+                                                    type-attribute-7={cell.typeAttribute7}
+                                                    type-attribute-8={cell.typeAttribute8}
+                                                    type-attribute-9={cell.typeAttribute9}
+                                                    type-attribute-10={cell.typeAttribute10}
+                                                    type-attribute-21={cell.typeAttribute21}
+                                                    type-attribute-22={cell.typeAttribute22}>
+                                                </lightning-primitive-cell-factory>
+                                            </div>
+                                        </template>
+                                    </template>
+                                </div>
+                            </template>
+                            <!-- Loading Indicator -->
+                            <template if:true={isLoading}>
+                                <div>
+                                    <div colspan={numberOfColumns} class="slds-is-relative">
+                                        <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+        <!-- Status Bar:
+            Displays a bar at the bottom with Save and Cancel buttons
+            when inline edit is complete. Also shows errors if present.
+        -->
+        <template if:true={showStatusBar}>
+            <lightning-primitive-datatable-status-bar
+                error={tableError}
+                onprivatesave={handleInlineEditSave}
+                onprivatecancel={handleInlineEditCancel}
+            ></lightning-primitive-datatable-status-bar>
+        </template>
+    </div>
+</template>

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

@@ -0,0 +1,260 @@
+<template>
+    <!-- aria-live region to announce the keyboard navigation mode -->
+    <span aria-live="polite">
+        <span data-keyboard-mode="navigation" class={computedAriaLiveClassForNavMode}>{i18n.ariaLiveNavigationMode}</span>
+        <span data-keyboard-mode="action" class={computedAriaLiveClassForActionMode}>{i18n.ariaLiveActionMode}</span>
+    </span>
+    <div lwc:dom="manual" class="dt-width-observer" style="width: 100%; height: 0px;"></div>
+    <div class="dt-outer-container" style="height: 100%; position: relative;">
+        <!-- Inline Edit Panel -->
+        <lightning-primitive-datatable-iedit-panel
+            data-iedit-panel="true"
+            visible={state.inlineEdit.isPanelVisible}
+            row-key-value={state.inlineEdit.rowKeyValue}
+            col-key-value={state.inlineEdit.colKeyValue}
+            edited-value={state.inlineEdit.editedValue}
+            column-def={state.inlineEdit.columnDef}
+            is-mass-edit-enabled={state.inlineEdit.massEditEnabled}
+            number-of-selected-rows={state.inlineEdit.massEditSelectedRows}
+            resolved-type-attributes={state.inlineEdit.resolvedTypeAttributes}
+            onieditfinished={handleInlineEditFinish}
+            onmasscheckboxchange={handleMassCheckboxChange}>
+        </lightning-primitive-datatable-iedit-panel>
+        <!-- Table Container -->
+        <div class={computedTableContainerClass} onscroll={handleHorizontalScroll} style={scrollerXStyles}>
+            <div class="slds-scrollable_y" onscroll={handleVerticalScroll} style={computedScrollerStyle}>
+                <!-- Table -->
+                <table class={computedTableClass}
+                    role={computedTableRole}
+                    style={computedTableStyle}
+                    onkeydown={handleTableKeydown}
+                    onclick={handleCellClick}
+                    onfocusin={handleTableFocusIn}
+                    onfocusout={handleTableFocusOut}
+                    aria-label={ariaLabel}
+                    aria-labelledby={ariaLabelledBy}
+                    aria-rowcount={ariaRowCount}>
+                    <template if:false={hasValidKeyField}>
+                        <!-- empty since keyField wasn't provided TODO: Why is this here? Test and remove! -->
+                    </template>
+                    <template if:true={hasValidKeyField}>
+                        <thead>
+                            <!-- Column Header Row -->
+                            <tr class="slds-line-height_reset"
+                                onprivateresizestart={handleResizeStart}
+                                onprivateresizeend={handleResizeEnd}>
+                                <template for:each={state.columns} for:item="def" for:index="colIndex">
+                                    <!-- Column Header -->
+                                    <th style={def.style}
+                                        scope="col"
+                                        tabindex={def.tabIndex}
+                                        aria-label={def.ariaLabel}
+                                        aria-sort={def.sortAriaLabel}
+                                        key={def.colKeyValue}>
+
+                                        <template if:true={def.fixedWidth}>
+                                            <!-- Fixed Width Columns: Non-resizable -->
+                                            <lightning-primitive-header-factory
+                                                style={def.style}
+                                                def={def}
+                                                dt-context-id={_datatableId}
+                                                key={def.colKeyValue}
+                                                row-key-value="HEADER"
+                                                col-key-value={def.colKeyValue}
+                                                col-index={colIndex}
+                                                has-focus={def.hasFocus}
+                                                actions={def.actions}
+                                                sortable={def.sortable}
+                                                sorted={def.sorted}
+                                                sorted-direction={def.sortedDirection}
+                                                column-width={def.columnWidth}
+                                                show-checkbox={showSelectAllCheckbox}
+                                                hide-header={hideTableHeader}>
+                                            </lightning-primitive-header-factory>
+                                        </template>
+                                        <template if:false={def.fixedWidth}>
+                                            <!-- Resizable Columns (Non-Fixed-Width) -->
+                                            <lightning-primitive-header-factory
+                                                style={def.style}
+                                                def={def}
+                                                dt-context-id={_datatableId}
+                                                key={def.colKeyValue}
+                                                row-key-value="HEADER"
+                                                col-key-value={def.colKeyValue}
+                                                col-index={colIndex}
+                                                has-focus={def.hasFocus}
+                                                actions={def.actions}
+                                                sortable={def.sortable}
+                                                sorted={def.sorted}
+                                                sorted-direction={def.sortedDirection}
+                                                column-width={def.columnWidth}
+                                                resizable={hasResizebleColumns}
+                                                resizestep={widthsData.resizeStep}
+                                                hide-header={hideTableHeader}>
+                                            </lightning-primitive-header-factory>
+                                        </template>
+                                    </th>
+                                </template>
+                            </tr>
+                        </thead>
+                        <tbody style={computedTbodyStyle}>
+                            <template for:each={renderedRows} for:item="row" for:index="rowIndex">
+                                <!-- Data Rows -->
+                                <tr class={row.classnames}
+                                    onkeydown={handleKeydownOnDataRow}
+                                    key={row.key}
+                                    data-row-key-value={row.key}
+                                    aria-selected={row.ariaSelected}
+                                    aria-level={row.level}
+                                    aria-expanded={row.isExpanded}
+                                    aria-setsize={row.setSize}
+                                    aria-posinset={row.posInSet}
+                                    tabindex={row.tabIndex}>
+                                    <template for:each={row.cells} for:item="cell">
+                                        <template if:true={cell.isCheckbox}>
+                                            <!-- Checkbox Cell -->
+                                            <td class={cell.class}
+                                                role="gridcell"
+                                                tabindex={cell.tabIndex}
+                                                data-label={cell.dataLabel}
+                                                key={cell.colKeyValue}>
+                                                <lightning-primitive-cell-checkbox
+                                                    dt-context-id={_datatableId}
+                                                    has-focus={cell.hasFocus}
+                                                    data-label={cell.dataLabel}
+                                                    key={cell.key}
+                                                    row-key-value={row.key}
+                                                    col-key-value={cell.colKeyValue}
+                                                    row-index={rowIndex}
+                                                    type={row.inputType}
+                                                    is-selected={row.isSelected}
+                                                    is-disabled={row.isDisabled}
+                                                    column-header-id={computedCheckboxColumnHeaderId}>
+                                                </lightning-primitive-cell-checkbox>
+                                            </td>
+                                        </template>
+                                        <template if:true={cell.isDataTypeScope}>
+                                            <!-- Row Header Cell -->
+                                            <th class={cell.class}
+                                                style={cell.style}
+                                                aria-selected={cell.ariaSelected}
+                                                aria-readonly={cell.ariaReadOnly}
+                                                scope="row"
+                                                tabindex={cell.tabIndex}
+                                                data-label={cell.dataLabel}
+                                                key={cell.colKeyValue}>
+                                                <lightning-primitive-cell-factory
+                                                    types={privateTypes}
+                                                    aria-selected={cell.ariaSelected}
+                                                    data-label={cell.dataLabel}
+                                                    alignment={cell.alignment}
+                                                    has-error={cell.hasError}
+                                                    has-focus={cell.hasFocus}
+                                                    column-label={cell.dataLabel}
+                                                    column-type={cell.columnType}
+                                                    column-sub-type={cell.columnSubType}
+                                                    wrap-text={cell.wrapText}
+                                                    wrap-text-max-lines={cell.wrapTextMaxLines}
+                                                    key={cell.columnType}
+                                                    row-key-value={row.key}
+                                                    col-key-value={cell.colKeyValue}
+                                                    value={cell.value}
+                                                    icon-name={cell.iconName}
+                                                    icon-label={cell.iconLabel}
+                                                    icon-position={cell.iconPosition}
+                                                    icon-alternative-text={cell.iconAlternativeText}
+                                                    editable={cell.editable}
+                                                    display-read-only-icon={cell.displayReadOnlyIcon}
+                                                    type-attribute-0={cell.typeAttribute0}
+                                                    type-attribute-1={cell.typeAttribute1}
+                                                    type-attribute-2={cell.typeAttribute2}
+                                                    type-attribute-3={cell.typeAttribute3}
+                                                    type-attribute-4={cell.typeAttribute4}
+                                                    type-attribute-5={cell.typeAttribute5}
+                                                    type-attribute-6={cell.typeAttribute6}
+                                                    type-attribute-7={cell.typeAttribute7}
+                                                    type-attribute-8={cell.typeAttribute8}
+                                                    type-attribute-9={cell.typeAttribute9}
+                                                    type-attribute-10={cell.typeAttribute10}
+                                                    type-attribute-21={cell.typeAttribute21}
+                                                    type-attribute-22={cell.typeAttribute22}>
+                                                </lightning-primitive-cell-factory>
+                                            </th>
+                                        </template>
+                                        <template if:true={cell.isDataType}>
+                                            <!-- Non-Header Cells (Regular Data Cells) -->
+                                            <td class={cell.class}
+                                                role="gridcell"
+                                                style={cell.style}
+                                                aria-selected={cell.ariaSelected}
+                                                aria-readonly={cell.ariaReadOnly}
+                                                tabindex={cell.tabIndex}
+                                                data-label={cell.dataLabel}
+                                                key={cell.colKeyValue}>
+                                                <lightning-primitive-cell-factory
+                                                    types={privateTypes}
+                                                    aria-selected={cell.ariaSelected}
+                                                    data-label={cell.dataLabel}
+                                                    alignment={cell.alignment}
+                                                    has-error={cell.hasError}
+                                                    has-focus={cell.hasFocus}
+                                                    column-label={cell.dataLabel}
+                                                    column-type={cell.columnType}
+                                                    column-sub-type={cell.columnSubType}
+                                                    wrap-text={cell.wrapText}
+                                                    wrap-text-max-lines={cell.wrapTextMaxLines}
+                                                    key={cell.columnType}
+                                                    row-key-value={row.key}
+                                                    col-key-value={cell.colKeyValue}
+                                                    value={cell.value}
+                                                    icon-name={cell.iconName}
+                                                    icon-label={cell.iconLabel}
+                                                    icon-position={cell.iconPosition}
+                                                    icon-alternative-text={cell.iconAlternativeText}
+                                                    editable={cell.editable}
+                                                    display-read-only-icon={cell.displayReadOnlyIcon}
+                                                    type-attribute-0={cell.typeAttribute0}
+                                                    type-attribute-1={cell.typeAttribute1}
+                                                    type-attribute-2={cell.typeAttribute2}
+                                                    type-attribute-3={cell.typeAttribute3}
+                                                    type-attribute-4={cell.typeAttribute4}
+                                                    type-attribute-5={cell.typeAttribute5}
+                                                    type-attribute-6={cell.typeAttribute6}
+                                                    type-attribute-7={cell.typeAttribute7}
+                                                    type-attribute-8={cell.typeAttribute8}
+                                                    type-attribute-9={cell.typeAttribute9}
+                                                    type-attribute-10={cell.typeAttribute10}
+                                                    type-attribute-21={cell.typeAttribute21}
+                                                    type-attribute-22={cell.typeAttribute22}>
+                                                </lightning-primitive-cell-factory>
+                                            </td>
+                                        </template>
+                                    </template>
+                                </tr>
+                            </template>
+                            <!-- Loading Indicator -->
+                            <template if:true={isLoading}>
+                                <tr>
+                                    <td colspan={numberOfColumns} class="slds-is-relative">
+                                        <lightning-primitive-datatable-loading-indicator></lightning-primitive-datatable-loading-indicator>
+                                    </td>
+                                </tr>
+                            </template>
+                        </tbody>
+                    </template>
+                </table>
+            </div>
+        </div>
+        <!-- Status Bar:
+            Displays a bar at the bottom with Save and Cancel buttons
+            when inline edit is complete. Also shows errors if present.
+        -->
+        <template if:true={showStatusBar}>
+            <lightning-primitive-datatable-status-bar
+                error={tableError}
+                onprivatesave={handleInlineEditSave}
+                onprivatecancel={handleInlineEditCancel}
+            ></lightning-primitive-datatable-status-bar>
+        </template>
+    </div>
+</template>

package/src/lightning/datatable/widthManagerShared.js

@@ -44,6 +44,6 @@ export function getColumnWidthFromDef(column) {
     return column.fixedWidth || resizedWidth || column.initialWidth;
 }
 
-export function getWidthStyle(pixels) {
+export function buildCSSWidthStyle(pixels) {
     return pixels > 0 ? `width:${pixels}px` : '';
 }

package/src/lightning/datepicker/datepicker.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-size_1-of-1">
+    <div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-size_1-of-1" role="group">
         <template if:false={hasExternalLabel}>
             <label class={computedLabelClass} for="input">
                 <template if:true={required}>
@@ -36,8 +36,8 @@
                                 onfocusin={onFocusIn}
                                 onfocusout={onFocusOut}
                                 disabled={computedIconDisabledState}
-                                title={i18n.selectDate}
-                                alternative-text={i18n.selectDate}>
+                                title={computedSelectDateLabel}
+                                alternative-text={computedSelectDateLabel}>
             </lightning-button-icon>
             <template if:true={isCalendarVisible}>
                 <lightning-calendar

package/src/lightning/datepicker/datepicker.js

@@ -5,7 +5,7 @@ import labelMinRangeMessage from '@salesforce/label/LightningDateTimePicker.minR
 import labelMaxRangeMessage from '@salesforce/label/LightningDateTimePicker.maxRangeMessage';
 import labelMinAndMaxRangeMessage from '@salesforce/label/LightningDateTimePicker.minAndMaxRangeMessage';
 import labelRequired from '@salesforce/label/LightningControl.required';
-import labelSelectDate from '@salesforce/label/LightningDateTimePicker.selectDate';
+import labelSelectDateFor from '@salesforce/label/LightningDateTimePicker.selectDateFor';
 import shortDateFormat from '@salesforce/i18n/dateTime.shortDateFormat';
 import mediumDateFormat from '@salesforce/i18n/dateTime.mediumDateFormat';
 import longDateFormat from '@salesforce/i18n/dateTime.longDateFormat';
@@ -48,7 +48,7 @@ const i18n = {
     maxRangeMessage: labelMaxRangeMessage,
     minAndMaxRangeMessage: labelMinAndMaxRangeMessage,
     required: labelRequired,
-    selectDate: labelSelectDate,
+    selectDateFor: labelSelectDateFor,
 };
 
 const ARIA_CONTROLS = 'aria-controls';
@@ -430,6 +430,10 @@ export default class LightningDatePicker extends LightningElement {
         return '';
     }
 
+    get computedSelectDateLabel() {
+        return formatLabel(this.i18n.selectDateFor, this.label);
+    }
+
     get rangeMessage() {
         if (this.min && !this.max) {
             // If only min is set