@fluid-topics/ftds-table 2.2.0 → 2.2.1

package/build/ftds-table.d.ts

@@ -19,6 +19,7 @@ export declare class FtdsTable<T extends Record<string, any>> extends FtLitEleme
     highlightedRowIndex: number;
     private activeRowIndex;
     private rows?;
+    get isEmptyState(): boolean;
     static DEFAULT_RENDER: (v: any) => TemplateResult<1>;
     static DEFAULT_COMPARATOR: (a: any, b: any) => number;
     focusRow(rowIndex: number): void;
@@ -30,11 +31,11 @@ export declare class FtdsTable<T extends Record<string, any>> extends FtLitEleme
     protected renderSortButton(sortIcon: FtdsIcons, label: string, sort: () => void, index: number): TemplateResult<1>;
     protected renderCell(column: ColumnConfiguration<T>, columnIndex: number, row: T, rowIndex: number): TemplateResult<1>;
     protected renderColumnSort(column: ColumnConfiguration<T>, index: number): typeof nothing | TemplateResult<1>;
-    private renderEmptyStateTable;
     protected getSortIcon(isSorted: boolean | undefined): FtdsIcons;
     protected update(props: PropertyValues): void;
     protected columnPart(prefix: string, index: number): string;
     protected getValue(column: ColumnConfiguration<T>, row: T): any;
+    private renderEmptyStateTable;
     private sortData;
     private getOppositeSortOrder;
     private getSortOrderText;

package/build/ftds-table.js

@@ -31,6 +31,9 @@ export class FtdsTable extends FtLitElement {
         this.highlightedRowIndex = -1;
         this.activeRowIndex = -1;
     }
+    get isEmptyState() {
+        return this.data.length === 0;
+    }
     focusRow(rowIndex) {
         if (this.rows) {
             this.rows[rowIndex].focus();
@@ -46,8 +49,8 @@ export class FtdsTable extends FtLitElement {
             >
                 ${this.renderHeaderRow()}
                 <tbody>
-                ${data.length > 0 ? html `
-                    ${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => this.renderRow(row, rowIndex))}` : this.renderEmptyStateTable()}
+                ${this.isEmptyState ? this.renderEmptyStateTable() : html `
+                    ${repeat(data, (_, rowIndex) => "row-" + rowIndex, (row, rowIndex) => this.renderRow(row, rowIndex))}`}
                 </tbody>
             </table>
         `;
@@ -115,6 +118,7 @@ export class FtdsTable extends FtLitElement {
             "row--clickable": this.clickableRows,
             "row--active": rowIndex === this.activeRowIndex,
             "row--highlighted": rowIndex === this.highlightedRowIndex,
+            "row--has-content": !this.isEmptyState,
         };
         return html `
             <tr class="${classMap(classes)}" role="row" tabindex="${this.clickableRows ? "0" : nothing}"
@@ -177,19 +181,6 @@ export class FtdsTable extends FtLitElement {
         const label = `Sort ${titleText} in ${sortOrderText} order`;
         return ((_c = column.sortable) !== null && _c !== void 0 ? _c : true) ? this.renderSortButton(sortIcon, label, sort, index) : nothing;
     }
-    renderEmptyStateTable() {
-        var _a, _b;
-        return html `
-            <tr class="row" role="row">
-                <td colspan="${this.columns.length}" class="cell no-content" role="cell">
-                    ${((_a = this.emptyState) === null || _a === void 0 ? void 0 : _a.noImage) ? nothing : cactusSvg}
-                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}">
-                        ${(_b = this.emptyState) === null || _b === void 0 ? void 0 : _b.content}
-                    </ftds-typography>
-                </td>
-            </tr>
-        `;
-    }
     getSortIcon(isSorted) {
         return isSorted ? (this.currentSort.order === "asc" ? FtdsIcons.SORT_UP : FtdsIcons.SORT_DOWN) : FtdsIcons.SORT;
     }
@@ -205,6 +196,19 @@ export class FtdsTable extends FtLitElement {
     getValue(column, row) {
         return typeof column.getter === "string" ? row[column.getter] : column.getter(row);
     }
+    renderEmptyStateTable() {
+        var _a, _b;
+        return html `
+            <tr class="row" role="row">
+                <td colspan="${this.columns.length}" class="cell no-content" role="cell">
+                    ${((_a = this.emptyState) === null || _a === void 0 ? void 0 : _a.noImage) ? nothing : cactusSvg}
+                    <ftds-typography variant="${FtdsTypographyVariants.body2medium}">
+                        ${(_b = this.emptyState) === null || _b === void 0 ? void 0 : _b.content}
+                    </ftds-typography>
+                </td>
+            </tr>
+        `;
+    }
     sortData(data) {
         var _a, _b;
         if (this.currentSort && !this.disableDataManipulation) {

package/build/ftds-table.light.js

@@ -2010,11 +2010,11 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
         border-right: ${U.dataRowBorderWidth} solid ${U.dataRowBorderColor};
     }
 
-    .row:hover {
+    .row:hover.row--has-content {
         background-color: ${U.dataRowDefaultHoverBackgroundColor};
     }
 
-    .row.row--clickable:hover {
+    .row.row--clickable:hover.row--has-content {
         background-color: ${U.dataRowClickableHoverBackgroundColor};
         cursor: pointer;
     }
@@ -2206,15 +2206,15 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
             </clipPath>
         </defs>
     </svg>
-`;var Ae=function(e,t,n,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,n):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,n,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(i=(a<3?s(i):a>3?s(t,n,i):s(t,n))||i);return a>3&&i&&Object.defineProperty(t,n,i),i},te=class e extends De.FtLitElement{constructor(){super(...arguments),this.data=[],this.columns=[],this.stickyHeaders=!1,this.disableDataManipulation=!1,this.ariaLabel=null,this.clickableRows=!1,this.highlightedRowIndex=-1,this.activeRowIndex=-1}focusRow(t){this.rows&&this.rows[t].focus()}render(){var t;let n=this.sortData(this.data);return q.html`
+`;var Ae=function(e,t,n,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,n):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,n,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(i=(a<3?s(i):a>3?s(t,n,i):s(t,n))||i);return a>3&&i&&Object.defineProperty(t,n,i),i},te=class e extends De.FtLitElement{constructor(){super(...arguments),this.data=[],this.columns=[],this.stickyHeaders=!1,this.disableDataManipulation=!1,this.ariaLabel=null,this.clickableRows=!1,this.highlightedRowIndex=-1,this.activeRowIndex=-1}get isEmptyState(){return this.data.length===0}focusRow(t){this.rows&&this.rows[t].focus()}render(){var t;let n=this.sortData(this.data);return q.html`
             <table class="table"
                    role="table"
                    aria-label="${(t=this.ariaLabel)!==null&&t!==void 0?t:q.nothing}"
             >
                 ${this.renderHeaderRow()}
                 <tbody>
-                ${n.length>0?q.html`
-                    ${(0,Co.repeat)(n,(o,a)=>"row-"+a,(o,a)=>this.renderRow(o,a))}`:this.renderEmptyStateTable()}
+                ${this.isEmptyState?this.renderEmptyStateTable():q.html`
+                    ${(0,Co.repeat)(n,(o,a)=>"row-"+a,(o,a)=>this.renderRow(o,a))}`}
                 </tbody>
             </table>
         `}optWrapWithFtTypography(t,n){return typeof t=="string"?q.html`
@@ -2239,7 +2239,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                 ${(0,Co.repeat)(this.columns,(n,o)=>"header-cell-"+o,(n,o)=>this.renderHeader(n,o))}
             </tr>
             </thead>
-        `}renderRow(t,n){let o={row:!0,"row--clickable":this.clickableRows,"row--active":n===this.activeRowIndex,"row--highlighted":n===this.highlightedRowIndex};return q.html`
+        `}renderRow(t,n){let o={row:!0,"row--clickable":this.clickableRows,"row--active":n===this.activeRowIndex,"row--highlighted":n===this.highlightedRowIndex,"row--has-content":!this.isEmptyState};return q.html`
             <tr class="${(0,pr.classMap)(o)}" role="row" tabindex="${this.clickableRows?"0":q.nothing}"
                 part="table-row-${n}"
                 @keydown=${this.clickableRows?a=>this.handleRowKeyDown(a,t):q.nothing}
@@ -2264,7 +2264,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                 part="${this.columnPart("cell",n)} cell-row-${a} cell-column-${n}-row-${a}">
                 ${f(this.getValue(t,o))}
             </td>
-        `}renderColumnSort(t,n){var o,a,i;let s=((o=this.currentSort)===null||o===void 0?void 0:o.column)===n,l=this.getSortIcon(s),f=()=>{var b,x;let E=(b=t.defaultSortOrder)!==null&&b!==void 0?b:"asc";this.currentSort={column:n,order:s&&((x=this.currentSort)===null||x===void 0?void 0:x.order)===E?this.getOppositeSortOrder(E):E},this.dispatchChangeEvent()},m=this.getSortOrderText(s,t),g=`Sort ${(a=t.titleText)!==null&&a!==void 0?a:t.title} in ${m} order`;return!((i=t.sortable)!==null&&i!==void 0)||i?this.renderSortButton(l,g,f,n):q.nothing}renderEmptyStateTable(){var t,n;return q.html`
+        `}renderColumnSort(t,n){var o,a,i;let s=((o=this.currentSort)===null||o===void 0?void 0:o.column)===n,l=this.getSortIcon(s),f=()=>{var b,x;let E=(b=t.defaultSortOrder)!==null&&b!==void 0?b:"asc";this.currentSort={column:n,order:s&&((x=this.currentSort)===null||x===void 0?void 0:x.order)===E?this.getOppositeSortOrder(E):E},this.dispatchChangeEvent()},m=this.getSortOrderText(s,t),g=`Sort ${(a=t.titleText)!==null&&a!==void 0?a:t.title} in ${m} order`;return!((i=t.sortable)!==null&&i!==void 0)||i?this.renderSortButton(l,g,f,n):q.nothing}getSortIcon(t){return t?this.currentSort.order==="asc"?p.SORT_UP:p.SORT_DOWN:p.SORT}update(t){super.update(t),t.has("sort")&&(this.currentSort=this.sort)}columnPart(t,n){return`${t} ${t}-column-${n}`}getValue(t,n){return typeof t.getter=="string"?n[t.getter]:t.getter(n)}renderEmptyStateTable(){var t,n;return q.html`
             <tr class="row" role="row">
                 <td colspan="${this.columns.length}" class="cell no-content" role="cell">
                     ${!((t=this.emptyState)===null||t===void 0)&&t.noImage?q.nothing:A0}
@@ -2273,7 +2273,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                     </ftds-typography>
                 </td>
             </tr>
-        `}getSortIcon(t){return t?this.currentSort.order==="asc"?p.SORT_UP:p.SORT_DOWN:p.SORT}update(t){super.update(t),t.has("sort")&&(this.currentSort=this.sort)}columnPart(t,n){return`${t} ${t}-column-${n}`}getValue(t,n){return typeof t.getter=="string"?n[t.getter]:t.getter(n)}sortData(t){var n,o;if(this.currentSort&&!this.disableDataManipulation){let a=this.columns[this.currentSort.column],i=(n=a.comparator)!==null&&n!==void 0?n:e.DEFAULT_COMPARATOR,s=(o=a.descComparator)!==null&&o!==void 0?o:((f,m)=>-i(f,m)),l=this.currentSort.order==="asc"?i:s;return[...t].sort((f,m)=>l(this.getValue(a,f),this.getValue(a,m)))}return t}getOppositeSortOrder(t){return t==="asc"?"desc":"asc"}getSortOrderText(t,n){return t?this.currentSort.order==="asc"?"descending":"ascending":n.defaultSortOrder==="desc"?"descending":"ascending"}dispatchChangeEvent(){this.dispatchEvent(new vo({sort:this.currentSort}))}handleRowKeyDown(t,n){(t.key==="Enter"||t.key===" ")&&this.dispatchRowClickEvent(n)}dispatchRowClickEvent(t){this.dispatchEvent(new xo(t))}handleRowMouseDown(t){this.activeRowIndex=t}handleRowMouseUp(){this.activeRowIndex=-1}};te.styles=C0;te.DEFAULT_RENDER=e=>q.html`
+        `}sortData(t){var n,o;if(this.currentSort&&!this.disableDataManipulation){let a=this.columns[this.currentSort.column],i=(n=a.comparator)!==null&&n!==void 0?n:e.DEFAULT_COMPARATOR,s=(o=a.descComparator)!==null&&o!==void 0?o:((f,m)=>-i(f,m)),l=this.currentSort.order==="asc"?i:s;return[...t].sort((f,m)=>l(this.getValue(a,f),this.getValue(a,m)))}return t}getOppositeSortOrder(t){return t==="asc"?"desc":"asc"}getSortOrderText(t,n){return t?this.currentSort.order==="asc"?"descending":"ascending":n.defaultSortOrder==="desc"?"descending":"ascending"}dispatchChangeEvent(){this.dispatchEvent(new vo({sort:this.currentSort}))}handleRowKeyDown(t,n){(t.key==="Enter"||t.key===" ")&&this.dispatchRowClickEvent(n)}dispatchRowClickEvent(t){this.dispatchEvent(new xo(t))}handleRowMouseDown(t){this.activeRowIndex=t}handleRowMouseUp(){this.activeRowIndex=-1}};te.styles=C0;te.DEFAULT_RENDER=e=>q.html`
         <ftds-typography variant="${he.caption1medium}">
             ${e}
         </ftds-typography>

package/build/ftds-table.min.js

@@ -2090,11 +2090,11 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
         border-right: ${j.dataRowBorderWidth} solid ${j.dataRowBorderColor};
     }
 
-    .row:hover {
+    .row:hover.row--has-content {
         background-color: ${j.dataRowDefaultHoverBackgroundColor};
     }
 
-    .row.row--clickable:hover {
+    .row.row--clickable:hover.row--has-content {
         background-color: ${j.dataRowClickableHoverBackgroundColor};
         cursor: pointer;
     }
@@ -2286,15 +2286,15 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
             </clipPath>
         </defs>
     </svg>
-`;var Te=function(t,e,r,o){var a=arguments.length,i=a<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(t,e,r,o);else for(var c=t.length-1;c>=0;c--)(s=t[c])&&(i=(a<3?s(i):a>3?s(e,r,i):s(e,r))||i);return a>3&&i&&Object.defineProperty(e,r,i),i},ce=class t extends Z{constructor(){super(...arguments),this.data=[],this.columns=[],this.stickyHeaders=!1,this.disableDataManipulation=!1,this.ariaLabel=null,this.clickableRows=!1,this.highlightedRowIndex=-1,this.activeRowIndex=-1}focusRow(e){this.rows&&this.rows[e].focus()}render(){var e;let r=this.sortData(this.data);return $`
+`;var Te=function(t,e,r,o){var a=arguments.length,i=a<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(t,e,r,o);else for(var c=t.length-1;c>=0;c--)(s=t[c])&&(i=(a<3?s(i):a>3?s(e,r,i):s(e,r))||i);return a>3&&i&&Object.defineProperty(e,r,i),i},ce=class t extends Z{constructor(){super(...arguments),this.data=[],this.columns=[],this.stickyHeaders=!1,this.disableDataManipulation=!1,this.ariaLabel=null,this.clickableRows=!1,this.highlightedRowIndex=-1,this.activeRowIndex=-1}get isEmptyState(){return this.data.length===0}focusRow(e){this.rows&&this.rows[e].focus()}render(){var e;let r=this.sortData(this.data);return $`
             <table class="table"
                    role="table"
                    aria-label="${(e=this.ariaLabel)!==null&&e!==void 0?e:G}"
             >
                 ${this.renderHeaderRow()}
                 <tbody>
-                ${r.length>0?$`
-                    ${mt(r,(o,a)=>"row-"+a,(o,a)=>this.renderRow(o,a))}`:this.renderEmptyStateTable()}
+                ${this.isEmptyState?this.renderEmptyStateTable():$`
+                    ${mt(r,(o,a)=>"row-"+a,(o,a)=>this.renderRow(o,a))}`}
                 </tbody>
             </table>
         `}optWrapWithFtTypography(e,r){return typeof e=="string"?$`
@@ -2319,7 +2319,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                 ${mt(this.columns,(r,o)=>"header-cell-"+o,(r,o)=>this.renderHeader(r,o))}
             </tr>
             </thead>
-        `}renderRow(e,r){let o={row:!0,"row--clickable":this.clickableRows,"row--active":r===this.activeRowIndex,"row--highlighted":r===this.highlightedRowIndex};return $`
+        `}renderRow(e,r){let o={row:!0,"row--clickable":this.clickableRows,"row--active":r===this.activeRowIndex,"row--highlighted":r===this.highlightedRowIndex,"row--has-content":!this.isEmptyState};return $`
             <tr class="${be(o)}" role="row" tabindex="${this.clickableRows?"0":G}"
                 part="table-row-${r}"
                 @keydown=${this.clickableRows?a=>this.handleRowKeyDown(a,e):G}
@@ -2344,7 +2344,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                 part="${this.columnPart("cell",r)} cell-row-${a} cell-column-${r}-row-${a}">
                 ${d(this.getValue(e,o))}
             </td>
-        `}renderColumnSort(e,r){var o,a,i;let s=((o=this.currentSort)===null||o===void 0?void 0:o.column)===r,c=this.getSortIcon(s),d=()=>{var y,v;let C=(y=e.defaultSortOrder)!==null&&y!==void 0?y:"asc";this.currentSort={column:r,order:s&&((v=this.currentSort)===null||v===void 0?void 0:v.order)===C?this.getOppositeSortOrder(C):C},this.dispatchChangeEvent()},f=this.getSortOrderText(s,e),m=`Sort ${(a=e.titleText)!==null&&a!==void 0?a:e.title} in ${f} order`;return!((i=e.sortable)!==null&&i!==void 0)||i?this.renderSortButton(c,m,d,r):G}renderEmptyStateTable(){var e,r;return $`
+        `}renderColumnSort(e,r){var o,a,i;let s=((o=this.currentSort)===null||o===void 0?void 0:o.column)===r,c=this.getSortIcon(s),d=()=>{var y,v;let C=(y=e.defaultSortOrder)!==null&&y!==void 0?y:"asc";this.currentSort={column:r,order:s&&((v=this.currentSort)===null||v===void 0?void 0:v.order)===C?this.getOppositeSortOrder(C):C},this.dispatchChangeEvent()},f=this.getSortOrderText(s,e),m=`Sort ${(a=e.titleText)!==null&&a!==void 0?a:e.title} in ${f} order`;return!((i=e.sortable)!==null&&i!==void 0)||i?this.renderSortButton(c,m,d,r):G}getSortIcon(e){return e?this.currentSort.order==="asc"?h.SORT_UP:h.SORT_DOWN:h.SORT}update(e){super.update(e),e.has("sort")&&(this.currentSort=this.sort)}columnPart(e,r){return`${e} ${e}-column-${r}`}getValue(e,r){return typeof e.getter=="string"?r[e.getter]:e.getter(r)}renderEmptyStateTable(){var e,r;return $`
             <tr class="row" role="row">
                 <td colspan="${this.columns.length}" class="cell no-content" role="cell">
                     ${!((e=this.emptyState)===null||e===void 0)&&e.noImage?G:Xd}
@@ -2353,7 +2353,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
                     </ftds-typography>
                 </td>
             </tr>
-        `}getSortIcon(e){return e?this.currentSort.order==="asc"?h.SORT_UP:h.SORT_DOWN:h.SORT}update(e){super.update(e),e.has("sort")&&(this.currentSort=this.sort)}columnPart(e,r){return`${e} ${e}-column-${r}`}getValue(e,r){return typeof e.getter=="string"?r[e.getter]:e.getter(r)}sortData(e){var r,o;if(this.currentSort&&!this.disableDataManipulation){let a=this.columns[this.currentSort.column],i=(r=a.comparator)!==null&&r!==void 0?r:t.DEFAULT_COMPARATOR,s=(o=a.descComparator)!==null&&o!==void 0?o:((d,f)=>-i(d,f)),c=this.currentSort.order==="asc"?i:s;return[...e].sort((d,f)=>c(this.getValue(a,d),this.getValue(a,f)))}return e}getOppositeSortOrder(e){return e==="asc"?"desc":"asc"}getSortOrderText(e,r){return e?this.currentSort.order==="asc"?"descending":"ascending":r.defaultSortOrder==="desc"?"descending":"ascending"}dispatchChangeEvent(){this.dispatchEvent(new ra({sort:this.currentSort}))}handleRowKeyDown(e,r){(e.key==="Enter"||e.key===" ")&&this.dispatchRowClickEvent(r)}dispatchRowClickEvent(e){this.dispatchEvent(new ta(e))}handleRowMouseDown(e){this.activeRowIndex=e}handleRowMouseUp(){this.activeRowIndex=-1}};ce.styles=Yd;ce.DEFAULT_RENDER=t=>$`
+        `}sortData(e){var r,o;if(this.currentSort&&!this.disableDataManipulation){let a=this.columns[this.currentSort.column],i=(r=a.comparator)!==null&&r!==void 0?r:t.DEFAULT_COMPARATOR,s=(o=a.descComparator)!==null&&o!==void 0?o:((d,f)=>-i(d,f)),c=this.currentSort.order==="asc"?i:s;return[...e].sort((d,f)=>c(this.getValue(a,d),this.getValue(a,f)))}return e}getOppositeSortOrder(e){return e==="asc"?"desc":"asc"}getSortOrderText(e,r){return e?this.currentSort.order==="asc"?"descending":"ascending":r.defaultSortOrder==="desc"?"descending":"ascending"}dispatchChangeEvent(){this.dispatchEvent(new ra({sort:this.currentSort}))}handleRowKeyDown(e,r){(e.key==="Enter"||e.key===" ")&&this.dispatchRowClickEvent(r)}dispatchRowClickEvent(e){this.dispatchEvent(new ta(e))}handleRowMouseDown(e){this.activeRowIndex=e}handleRowMouseUp(){this.activeRowIndex=-1}};ce.styles=Yd;ce.DEFAULT_RENDER=t=>$`
         <ftds-typography variant="${Oe.caption1medium}">
             ${t}
         </ftds-typography>

package/build/ftds-table.styles.js

@@ -28,11 +28,11 @@ export const designSystemStyles = css `
         border-right: ${table.dataRowBorderWidth} solid ${table.dataRowBorderColor};
     }
 
-    .row:hover {
+    .row:hover.row--has-content {
         background-color: ${table.dataRowDefaultHoverBackgroundColor};
     }
 
-    .row.row--clickable:hover {
+    .row.row--clickable:hover.row--has-content {
         background-color: ${table.dataRowClickableHoverBackgroundColor};
         cursor: pointer;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ftds-table",
-    "version": "2.2.0",
+    "version": "2.2.1",
     "description": "The design system table component",
     "keywords": [
         "Lit"
@@ -20,15 +20,15 @@
     },
     "dependencies": {
         "@fluid-topics/design-system-variables": "3.6.0",
-        "@fluid-topics/ft-assets": "2.2.0",
-        "@fluid-topics/ft-wc-utils": "2.2.0",
-        "@fluid-topics/ftds-button": "2.2.0",
-        "@fluid-topics/ftds-icon": "2.2.0",
-        "@fluid-topics/ftds-typography": "2.2.0",
+        "@fluid-topics/ft-assets": "2.2.1",
+        "@fluid-topics/ft-wc-utils": "2.2.1",
+        "@fluid-topics/ftds-button": "2.2.1",
+        "@fluid-topics/ftds-icon": "2.2.1",
+        "@fluid-topics/ftds-typography": "2.2.1",
         "lit": "3.3.3"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "2.2.0"
+        "@fluid-topics/ft-wc-test-utils": "2.2.1"
     },
-    "gitHead": "524448c19965dfe37c04bfb9a6d0e7d084fa12ce"
+    "gitHead": "25fd63f06bb81a168e9dbd9356d8e3d86a925ad9"
 }