@fluid-topics/ft-search-bar 1.2.60 → 1.2.62

package/build/ft-search-bar.properties.d.ts

@@ -14,6 +14,8 @@ export interface FtSearchBarLabels extends ParametrizedLabels {
     presetsSelector?: string;
     removeRecentSearch?: string;
     back?: string;
+    ariaLiveSuggestions?: string;
+    suggestionsAriaLabel?: string;
 }
 export type DisplayMode = "auto" | "mobile" | "desktop";
 export interface FtSearchBarProperties {

package/build/ft-search-bar.styles.d.ts

@@ -16,6 +16,7 @@ export declare const FtSearchBarCssVariables: {
     elevation02: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     buttonColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
     buttonRippleColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+    activeItemBorderColor: import("@fluid-topics/ft-wc-utils").FtCssVariable;
 };
 export declare const searchBarCss: import("lit").CSSResult;
 export declare const facetsCss: import("lit").CSSResult;

package/build/ft-search-bar.styles.js

@@ -26,6 +26,7 @@ export const FtSearchBarCssVariables = {
     elevation02: FtCssVariableFactory.external(designSystemVariables.elevation02, "Design system"),
     buttonColor: FtCssVariableFactory.external(FtButtonCssVariables.color, "Button"),
     buttonRippleColor: FtCssVariableFactory.external(FtButtonCssVariables.rippleColor, "Button"),
+    activeItemBorderColor: FtCssVariableFactory.extend("--ft-search-bar-active-border-color", "", designSystemVariables.colorPrimary),
 };
 //language=css
 export const searchBarCss = css `
@@ -386,4 +387,11 @@ export const facetsCss = css `
     .ft-search-bar--desktop-menu .ft-search-bar--launch-search {
         margin: 0;
     }
+
+    .ft-search-bar--aria-live {
+        position: absolute;
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
 `;

package/build/managers/DesktopSearchBarManager.d.ts

@@ -12,4 +12,6 @@ export declare class DesktopSearchBarManager {
     private renderDesktopSearchBarButtons;
     private onSearchBarKeyDown;
     private onInput;
+    private onClick;
+    private onFocus;
 }

package/build/managers/DesktopSearchBarManager.js

@@ -10,13 +10,13 @@ class DesktopSearchBarManager {
         this.suggestManager = suggestManager !== null && suggestManager !== void 0 ? suggestManager : new SuggestManager(searchBar);
     }
     render() {
+        var _a;
         const rootClasses = {
             "ft-search-bar--container": true,
             "ft-search-bar--dense": this.searchBar.dense,
             "ft-search-bar--desktop": true,
             "ft-search-bar--floating-panel-open": this.searchBar.displayFacets && !this.searchBar.forceMenuOpen,
             "ft-search-bar--forced-open": this.searchBar.forceMenuOpen,
-            "ft-search-bar--react-to-focus": this.searchBar.reactToFocus
         };
         return html `
             <div class="${classMap(rootClasses)}" part="container" tabindex="-1">
@@ -26,10 +26,17 @@ class DesktopSearchBarManager {
                         <div class="ft-search-bar--input-outline" part="input-outline">
                             ${this.searchBar.dense ? this.selectedFacetsManager.render() : nothing}
                             <input class="ft-search-bar--input ft-typography--body2"
+                                   role="combobox"
+                                   aria-autocomplete="list"
+                                   aria-controls="${this.suggestManager.listboxId}"
+                                   aria-expanded="${this.searchBar.displaySuggestListbox}"
+                                   aria-activedescendant="${(_a = this.searchBar.ariaActiveDescendent) !== null && _a !== void 0 ? _a : nothing}"
                                    part="input"
                                    type="search"
                                    placeholder="${this.searchBar.labelResolver.resolve("inputPlaceHolder")}"
                                    value="${this.searchBar.query}"
+                                   @click="${() => this.onClick()}"
+                                   @focus="${() => this.onFocus()}"
                                    @input=${(e) => this.onInput(e)}
                                    @keydown=${(e) => this.onSearchBarKeyDown(e)}>
                         </div>
@@ -116,19 +123,56 @@ class DesktopSearchBarManager {
         `;
     }
     onSearchBarKeyDown(e) {
-        var _a, _b;
+        var _a;
+        if (!["Escape", "Tab", "Shift"].includes(e.key)) {
+            this.searchBar.displaySuggestListbox = true;
+        }
         switch (e.key) {
+            case "Tab":
+                this.searchBar.displaySuggestListbox = false;
+                this.searchBar.selectedSuggestOptionId = undefined;
+                break;
             case "Escape":
+                if (this.suggestManager.shouldDisplaySuggestions) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.searchBar.displaySuggestListbox = false;
+                    this.searchBar.selectedSuggestOptionId = undefined;
+                }
                 this.searchBar.mobileMenuOpen = false;
-                (_a = this.searchBar.input) === null || _a === void 0 ? void 0 : _a.blur();
                 break;
             case "ArrowDown":
                 e.stopPropagation();
                 e.preventDefault();
-                this.suggestManager.focusFirstSuggestion();
+                this.suggestManager.focusNextSuggestion();
+                break;
+            case "ArrowUp":
+                e.stopPropagation();
+                e.preventDefault();
+                this.suggestManager.focusPreviousSuggestion();
+                break;
+            case "ArrowLeft":
+                if (this.searchBar.selectedSuggestOptionId) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.suggestManager.focusArrowLeft();
+                }
+                break;
+            case "ArrowRight":
+                if (this.searchBar.selectedSuggestOptionId) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.suggestManager.focusArrowRight();
+                }
                 break;
             case "Enter":
-                (_b = this.searchBar.launchSearchButton) === null || _b === void 0 ? void 0 : _b.click();
+                if (this.searchBar.selectedSuggestRemoveRecent) {
+                    (_a = this.suggestManager.selectedSuggestRemoveRecentButton) === null || _a === void 0 ? void 0 : _a.click();
+                }
+                else {
+                    const elementToClick = this.suggestManager.selectedSuggestOptionLink || this.searchBar.launchSearchButton;
+                    elementToClick === null || elementToClick === void 0 ? void 0 : elementToClick.click();
+                }
                 break;
         }
     }
@@ -136,6 +180,14 @@ class DesktopSearchBarManager {
         const input = e.composedPath()[0];
         this.searchBar.query = input.value;
     }
+    onClick() {
+        this.onFocus();
+    }
+    onFocus() {
+        if (this.searchBar.reactToFocus) {
+            this.searchBar.displaySuggestListbox = true;
+        }
+    }
 }
 //language=css
 DesktopSearchBarManager.styles = css `

package/build/managers/MobileSearchBarManager.js

@@ -9,6 +9,7 @@ class MobileSearchBarManager {
         this.suggestManager = suggestManager !== null && suggestManager !== void 0 ? suggestManager : new SuggestManager(searchBar);
     }
     render() {
+        var _a;
         const rootClasses = {
             "ft-search-bar--container": true,
             "ft-search-bar--mobile": true,
@@ -21,6 +22,11 @@ class MobileSearchBarManager {
                     <div class="ft-search-bar--input-container" part="input-container">
                         <div class="ft-search-bar--input-outline" part="input-outline">
                             <input class="ft-search-bar--input ft-typography--body2"
+                                   role="combobox"
+                                   aria-autocomplete="list"
+                                   aria-controls="${this.suggestManager.listboxId}"
+                                   aria-expanded="${this.searchBar.displaySuggestListbox}"
+                                   aria-activedescendant="${(_a = this.searchBar.ariaActiveDescendent) !== null && _a !== void 0 ? _a : nothing}"
                                    part="input"
                                    type="search"
                                    placeholder="${this.searchBar.labelResolver.resolve("inputPlaceHolder")}"
@@ -91,8 +97,40 @@ class MobileSearchBarManager {
     }
     onSearchBarKeyDown(e) {
         var _a;
-        if (e.key === "Enter") {
-            (_a = this.searchBar.launchSearchButton) === null || _a === void 0 ? void 0 : _a.click();
+        switch (e.key) {
+            case "ArrowDown":
+                e.stopPropagation();
+                e.preventDefault();
+                this.suggestManager.focusNextSuggestion();
+                break;
+            case "ArrowUp":
+                e.stopPropagation();
+                e.preventDefault();
+                this.suggestManager.focusPreviousSuggestion();
+                break;
+            case "ArrowLeft":
+                if (this.searchBar.selectedSuggestOptionId) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.suggestManager.focusArrowLeft();
+                }
+                break;
+            case "ArrowRight":
+                if (this.searchBar.selectedSuggestOptionId) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.suggestManager.focusArrowRight();
+                }
+                break;
+            case "Enter":
+                if (this.searchBar.selectedSuggestRemoveRecent) {
+                    (_a = this.suggestManager.selectedSuggestRemoveRecentButton) === null || _a === void 0 ? void 0 : _a.click();
+                }
+                else {
+                    const elementToClick = this.suggestManager.selectedSuggestOptionLink || this.searchBar.launchSearchButton;
+                    elementToClick === null || elementToClick === void 0 ? void 0 : elementToClick.click();
+                }
+                break;
         }
     }
     onInput(e) {

package/build/managers/SuggestManager.d.ts

@@ -1,20 +1,30 @@
 import type { FtSearchBar } from "../ft-search-bar";
 export declare class SuggestManager {
+    listboxId: string;
     private searchBar;
     private updateDebouncer;
     constructor(searchBar: FtSearchBar, debounceTime?: number);
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
+    private recentSearchId;
+    private suggestionId;
     private getRequestWithQuery;
     update(): Promise<void>;
-    private onSuggestKeyDown;
-    private nextSuggestionElement;
-    private previousSuggestionElement;
     private onSuggestClick;
     private removeRecentSearch;
     private getIcon;
-    private getFocusedSuggestionElement;
-    private getLastSuggestionElement;
+    focusNextSuggestion(): void;
+    focusPreviousSuggestion(): void;
+    private nextSuggestionElement;
     private getFirstSuggestionElement;
-    focusFirstSuggestion(): void;
+    private previousSuggestionElement;
+    private get selectedSuggestOption();
+    get selectedSuggestOptionLink(): HTMLElement | null;
+    get selectedSuggestRemoveRecentButton(): HTMLElement | null;
+    private getLastSuggestionElement;
+    private selectSuggestion;
+    focusArrowLeft(): void;
+    focusArrowRight(): void;
+    get shouldDisplaySuggestions(): boolean;
+    get recentSearchesMatchingQuery(): string[];
 }

package/build/managers/SuggestManager.js

@@ -1,27 +1,37 @@
-import { css, html } from "lit";
+import { css, html, nothing } from "lit";
 import { repeat } from "lit/directives/repeat.js";
 import { FtIcons, FtIconVariants, resolveFileFormatIcon } from "@fluid-topics/ft-icon";
-import { Debouncer, wordWrap } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, setVariable, wordWrap } from "@fluid-topics/ft-wc-utils";
 import { FtSearchBarCssVariables } from "../ft-search-bar.styles";
+import { FtRippleCssVariables } from "@fluid-topics/ft-ripple";
 class SuggestManager {
     constructor(searchBar, debounceTime = 300) {
+        this.listboxId = "suggestManager";
         this.searchBar = searchBar;
         this.updateDebouncer = new Debouncer(debounceTime);
     }
     render() {
-        const filteredRecentSearches = this.searchBar.recentSearches.filter(q => q.toLowerCase().includes(this.searchBar.query.toLowerCase()));
-        const shouldDisplaySuggestions = this.searchBar.suggestions.length > 0 || filteredRecentSearches.length > 0;
+        const filteredRecentSearches = this.recentSearchesMatchingQuery;
         return html `
-            <div class="ft-search-bar--suggestions ft-word-wrap ${shouldDisplaySuggestions ? "ft-search-bar--suggestions-not-empty" : ""}"
-                 part="suggestions-container"
-                 @keydown=${(e) => this.onSuggestKeyDown(e)}>
-                ${repeat(filteredRecentSearches.slice(0, 5), query => query, query => html `
-                        <div part="suggestion-container">
+            <div class="ft-search-bar--suggestions ft-word-wrap ${this.shouldDisplaySuggestions ? "ft-search-bar--suggestions-not-empty" : ""}"
+                 id="${this.listboxId}"
+                 role="listbox"
+                 aria-label="${this.searchBar.labelResolver.resolve("suggestionsAriaLabel")}"
+                 part="suggestions-container">
+                ${repeat(filteredRecentSearches.slice(0, 5), query => query, (query, index) => html `
+                        <div part="suggestion-container"
+                             class=${this.searchBar.selectedSuggestOptionId === this.recentSearchId(index) ? "ft-search-bar--suggestions-selected" : nothing}>
                             <a href="${this.getRequestWithQuery(query)}"
                                part="suggestions"
                                class="ft-search-bar--suggestion ft-search-bar--recent-search"
+                               role="option"
+                               id="${this.recentSearchId(index)}"
+                               aria-selected="${this.searchBar.selectedSuggestOptionId === this.recentSearchId(index)}"
+                               tabindex="-1"
+                               aria-label="${query}"
                                @click=${(e) => this.onSuggestClick(e, query)}>
-                                <ft-ripple></ft-ripple>
+                                <ft-ripple ?activated=${this.searchBar.selectedSuggestOptionId === this.recentSearchId(index)
+            && !this.searchBar.selectedSuggestRemoveRecent}></ft-ripple>
                                 <ft-icon variant="material" value="history" part="suggestion-icon"></ft-icon>
                                 <ft-typography variant="body1">${query}</ft-typography>
                             </a>
@@ -29,19 +39,28 @@ class SuggestManager {
                                        round
                                        part="remove-suggestion"
                                        ?dense=${!this.searchBar.isMobile}
+                                       id="remove-${this.recentSearchId(index)}"
                                        label="${this.searchBar.labelResolver.resolve("removeRecentSearch", query)}"
                                        tooltipPosition="left"
+                                       tabindex="-1"
+                                       ?activated=${this.searchBar.selectedSuggestOptionId === this.recentSearchId(index)
+            && this.searchBar.selectedSuggestRemoveRecent}
                                        @click=${(e) => this.removeRecentSearch(e, query)}>
                             </ft-button>
                         </div>
                     `)}
-                ${repeat(this.searchBar.suggestions, suggest => suggest.value, suggest => html `
-                        <div part="suggestion-container">
+                ${repeat(this.searchBar.suggestions, suggest => suggest.value, (suggest, index) => html `
+                        <div part="suggestion-container"
+                             class=${this.searchBar.selectedSuggestOptionId === this.suggestionId(index) ? "ft-search-bar--suggestions-selected" : nothing}>
                             <a href="${(this.getRequestWithQuery(suggest.value))}"
                                part="suggestions"
                                class="ft-search-bar--suggestion"
+                               id="${this.suggestionId(index)}"
+                               aria-selected="${this.searchBar.selectedSuggestOptionId === this.suggestionId(index)}"
+                               role="option"
+                               tabindex="-1"
                                @click=${(e) => this.onSuggestClick(e, suggest.value)}>
-                                <ft-ripple></ft-ripple>
+                                <ft-ripple ?activated=${this.searchBar.selectedSuggestOptionId === this.suggestionId(index)}></ft-ripple>
                                 ${this.getIcon(suggest)}
                                 <ft-typography variant="body1">${suggest.value}</ft-typography>
                             </a>
@@ -50,6 +69,12 @@ class SuggestManager {
             </div>
         `;
     }
+    recentSearchId(index) {
+        return this.listboxId + "-recent-" + index;
+    }
+    suggestionId(index) {
+        return this.listboxId + "-suggest-" + index;
+    }
     getRequestWithQuery(query) {
         return this.searchBar.searchRequestSerializer({
             ...this.searchBar.request,
@@ -67,44 +92,14 @@ class SuggestManager {
             });
         });
     }
-    onSuggestKeyDown(e) {
-        var _a, _b;
-        switch (e.key) {
-            case "ArrowUp":
-                (_a = this.previousSuggestionElement()) === null || _a === void 0 ? void 0 : _a.focus();
-                e.preventDefault();
-                e.stopPropagation();
-                break;
-            case "ArrowDown":
-                (_b = this.nextSuggestionElement()) === null || _b === void 0 ? void 0 : _b.focus();
-                e.preventDefault();
-                e.stopPropagation();
-                break;
-        }
-    }
-    nextSuggestionElement() {
-        var _a, _b;
-        const divElement = (_a = this.getFocusedSuggestionElement()) === null || _a === void 0 ? void 0 : _a.parentElement;
-        const nextDivElement = (_b = divElement === null || divElement === void 0 ? void 0 : divElement.nextElementSibling) === null || _b === void 0 ? void 0 : _b.querySelector("[part=suggestions]");
-        return nextDivElement !== null && nextDivElement !== void 0 ? nextDivElement : this.getFirstSuggestionElement();
-    }
-    previousSuggestionElement() {
-        var _a, _b;
-        const divElement = (_a = this.getFocusedSuggestionElement()) === null || _a === void 0 ? void 0 : _a.parentElement;
-        const nextDivElement = (_b = divElement === null || divElement === void 0 ? void 0 : divElement.previousElementSibling) === null || _b === void 0 ? void 0 : _b.querySelector("[part=suggestions]");
-        return nextDivElement !== null && nextDivElement !== void 0 ? nextDivElement : this.getLastSuggestionElement();
-    }
     onSuggestClick(e, suggest) {
         this.searchBar.setQuery(suggest);
         this.searchBar.onLaunchSearch();
     }
     removeRecentSearch(e, query) {
-        var _a, _b, _c, _d;
         e.preventDefault();
         e.stopPropagation();
-        let currentFocusElement = e.target.closest("[part='suggestion-container']");
-        const thingToFocus = (_d = (_b = (_a = currentFocusElement === null || currentFocusElement === void 0 ? void 0 : currentFocusElement.previousElementSibling) === null || _a === void 0 ? void 0 : _a.querySelector("[part='remove-suggestion']")) !== null && _b !== void 0 ? _b : (_c = currentFocusElement === null || currentFocusElement === void 0 ? void 0 : currentFocusElement.nextElementSibling) === null || _c === void 0 ? void 0 : _c.querySelector("[part='remove-suggestion']")) !== null && _d !== void 0 ? _d : this.searchBar.input;
-        thingToFocus === null || thingToFocus === void 0 ? void 0 : thingToFocus.focus();
+        this.selectSuggestion(null);
         this.searchBar.recentSearches = this.searchBar.recentSearches.filter(q => q.toLowerCase() !== query.toLowerCase());
         this.searchBar.saveRecentSearches();
     }
@@ -126,19 +121,75 @@ class SuggestManager {
             <ft-icon .variant="${iconVariant}" .value="${icon}" part="suggestion-icon"></ft-icon>
         `;
     }
-    getFocusedSuggestionElement() {
-        return this.searchBar.querySelector(".ft-search-bar--suggestion:focus-within");
+    focusNextSuggestion() {
+        this.selectSuggestion(this.nextSuggestionElement());
     }
-    getLastSuggestionElement() {
-        let suggestions = this.searchBar.querySelectorAll(".ft-search-bar--suggestion");
-        return suggestions.length > 0 ? suggestions[suggestions.length - 1] : null;
+    focusPreviousSuggestion() {
+        this.selectSuggestion(this.previousSuggestionElement());
+    }
+    nextSuggestionElement() {
+        const divElement = this.selectedSuggestOption;
+        if (!divElement) {
+            return this.getFirstSuggestionElement();
+        }
+        return divElement === null || divElement === void 0 ? void 0 : divElement.nextElementSibling;
     }
     getFirstSuggestionElement() {
-        return this.searchBar.querySelector(".ft-search-bar--suggestion");
+        return this.searchBar.querySelector("[part=suggestion-container]");
+    }
+    previousSuggestionElement() {
+        const divElement = this.selectedSuggestOption;
+        if (!divElement) {
+            return this.getLastSuggestionElement();
+        }
+        return divElement === null || divElement === void 0 ? void 0 : divElement.previousElementSibling;
     }
-    focusFirstSuggestion() {
+    get selectedSuggestOption() {
         var _a;
-        (_a = this.getFirstSuggestionElement()) === null || _a === void 0 ? void 0 : _a.focus();
+        return (_a = this.searchBar.querySelector("[id='" + this.searchBar.selectedSuggestOptionId + "']")) === null || _a === void 0 ? void 0 : _a.parentElement;
+    }
+    get selectedSuggestOptionLink() {
+        return this.searchBar.querySelector("[id='" + this.searchBar.selectedSuggestOptionId + "']");
+    }
+    get selectedSuggestRemoveRecentButton() {
+        var _a;
+        return (_a = this.selectedSuggestOption) === null || _a === void 0 ? void 0 : _a.querySelector("[part=remove-suggestion]");
+    }
+    getLastSuggestionElement() {
+        let suggestions = this.searchBar.querySelectorAll("[part=suggestion-container]");
+        return suggestions.length > 0 ? suggestions[suggestions.length - 1] : null;
+    }
+    selectSuggestion(element) {
+        var _a;
+        this.searchBar.selectedSuggestRemoveRecent = false;
+        if (element) {
+            this.searchBar.selectedSuggestOptionId = (_a = element.querySelector("[part=suggestions]")) === null || _a === void 0 ? void 0 : _a.id;
+        }
+        else {
+            this.searchBar.selectedSuggestOptionId = undefined;
+        }
+    }
+    focusArrowLeft() {
+        if (this.searchBar.selectedSuggestRemoveRecent) {
+            this.searchBar.selectedSuggestRemoveRecent = false;
+        }
+        else {
+            this.selectSuggestion(null);
+        }
+    }
+    focusArrowRight() {
+        if (!this.searchBar.selectedSuggestRemoveRecent && this.selectedSuggestRemoveRecentButton) {
+            this.searchBar.selectedSuggestRemoveRecent = true;
+        }
+        else {
+            this.selectSuggestion(null);
+        }
+    }
+    get shouldDisplaySuggestions() {
+        return this.searchBar.displaySuggestListbox && (this.searchBar.suggestions.length > 0 || this.recentSearchesMatchingQuery.length > 0);
+    }
+    get recentSearchesMatchingQuery() {
+        return this.searchBar.recentSearches.filter(q => q.toLowerCase().includes(this.searchBar.query.toLowerCase()));
     }
 }
 //language=css
@@ -179,7 +230,7 @@ SuggestManager.styles = [
                 top: calc(100% + 2px);
             }
 
-            .ft-search-bar--react-to-focus .ft-search-bar--input-container:focus-within .ft-search-bar--suggestions-not-empty {
+            .ft-search-bar--input-container .ft-search-bar--suggestions-not-empty {
                 display: block;
             }
 
@@ -188,6 +239,14 @@ SuggestManager.styles = [
                 align-items: center;
             }
 
+            [part~="suggestion-container"].ft-search-bar--suggestions-selected {
+                outline: none;
+                box-shadow: inset 3px 0 0 ${FtSearchBarCssVariables.activeItemBorderColor};
+            }
+            [part~="suggestion-container"]:hover {
+                box-shadow: inset 3px 0 0 ${FtSearchBarCssVariables.activeItemBorderColor};
+            }
+
             [part~="remove-suggestion"] {
                 margin-left: auto;
             }
@@ -213,10 +272,6 @@ SuggestManager.styles = [
                 min-height: 44px;
             }
 
-            .ft-search-bar--suggestion:focus {
-                outline: none;
-            }
-
             .ft-search-bar--recent-search + .ft-search-bar--suggestion:not(.ft-search-bar--recent-search) {
                 border-top: 1px solid ${FtSearchBarCssVariables.colorOutline};
             }
@@ -226,6 +281,10 @@ SuggestManager.styles = [
                 flex-grow: 1;
                 flex-shrink: 1;
             }
+
+            ft-ripple {
+                ${setVariable(FtRippleCssVariables.opacityContentOnSurfaceHover, FtRippleCssVariables.opacityContentOnSurfaceSelected)}
+            }
         `,
 ];
 export { SuggestManager };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-search-bar",
-  "version": "1.2.60",
+  "version": "1.2.62",
   "description": "Search bar component using Fluid Topics public API",
   "keywords": [
     "Lit"
@@ -19,23 +19,23 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-accordion": "1.2.60",
-    "@fluid-topics/ft-app-context": "1.2.60",
-    "@fluid-topics/ft-button": "1.2.60",
-    "@fluid-topics/ft-chip": "1.2.60",
-    "@fluid-topics/ft-filter": "1.2.60",
-    "@fluid-topics/ft-icon": "1.2.60",
-    "@fluid-topics/ft-select": "1.2.60",
-    "@fluid-topics/ft-size-watcher": "1.2.60",
-    "@fluid-topics/ft-skeleton": "1.2.60",
-    "@fluid-topics/ft-snap-scroll": "1.2.60",
-    "@fluid-topics/ft-tooltip": "1.2.60",
-    "@fluid-topics/ft-typography": "1.2.60",
-    "@fluid-topics/ft-wc-utils": "1.2.60",
+    "@fluid-topics/ft-accordion": "1.2.62",
+    "@fluid-topics/ft-app-context": "1.2.62",
+    "@fluid-topics/ft-button": "1.2.62",
+    "@fluid-topics/ft-chip": "1.2.62",
+    "@fluid-topics/ft-filter": "1.2.62",
+    "@fluid-topics/ft-icon": "1.2.62",
+    "@fluid-topics/ft-select": "1.2.62",
+    "@fluid-topics/ft-size-watcher": "1.2.62",
+    "@fluid-topics/ft-skeleton": "1.2.62",
+    "@fluid-topics/ft-snap-scroll": "1.2.62",
+    "@fluid-topics/ft-tooltip": "1.2.62",
+    "@fluid-topics/ft-typography": "1.2.62",
+    "@fluid-topics/ft-wc-utils": "1.2.62",
     "lit": "3.1.0"
   },
   "devDependencies": {
-    "@fluid-topics/public-api": "1.0.94"
+    "@fluid-topics/public-api": "1.0.95"
   },
-  "gitHead": "5acbf0235057ab34c306052ddba1e8f500f710bc"
+  "gitHead": "6d62bc761fc79063b748e91a4580734fd1329077"
 }