@seamly/web-ui 25.1.0 → 25.2.0-beta.2

package/build/dist/lib/index.debug.js

@@ -78,10 +78,16 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+// src/immerImports.ts
+
+
+// src/index.ts
 
-// src/createDraftSafeSelector.ts
 
+// src/reselectImports.ts
 
+
+// src/createDraftSafeSelector.ts
 var createDraftSafeSelectorCreator = (...args) => {
   const createSelector2 = (0,reselect__WEBPACK_IMPORTED_MODULE_2__.createSelectorCreator)(...args);
   const createDraftSafeSelector2 = Object.assign((...args2) => {
@@ -96,11 +102,10 @@ var createDraftSafeSelectorCreator = (...args) => {
 };
 var createDraftSafeSelector = /* @__PURE__ */ createDraftSafeSelectorCreator(reselect__WEBPACK_IMPORTED_MODULE_2__.weakMapMemoize);
 
-// src/configureStore.ts
+// src/reduxImports.ts
 
 
 // src/devtoolsExtension.ts
-
 var composeWithDevTools = typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : function() {
   if (arguments.length === 0) return void 0;
   if (typeof arguments[0] === "object") return redux__WEBPACK_IMPORTED_MODULE_0__.compose;
@@ -115,9 +120,6 @@ var devToolsEnhancer = typeof window !== "undefined" && window.__REDUX_DEVTOOLS_
 // src/getDefaultMiddleware.ts
 
 
-// src/createAction.ts
-
-
 // src/tsHelpers.ts
 var hasMatchFunction = (v) => {
   return v && typeof v.match === "function";
@@ -185,7 +187,6 @@ function createActionCreatorInvariantMiddleware(options = {}) {
 }
 
 // src/utils.ts
-
 function getTimeMeasureUtils(maxDelay, fnName) {
   let elapsed = 0;
   return {
@@ -368,7 +369,6 @@ function createImmutableStateInvariantMiddleware(options = {}) {
 }
 
 // src/serializableStateInvariantMiddleware.ts
-
 function isPlain(val) {
   const type = typeof val;
   return val == null || type === "string" || type === "boolean" || type === "number" || Array.isArray(val) || (0,redux__WEBPACK_IMPORTED_MODULE_0__.isPlainObject)(val);
@@ -669,9 +669,6 @@ function configureStore(options) {
   return (0,redux__WEBPACK_IMPORTED_MODULE_0__.createStore)(rootReducer, preloadedState, composedEnhancer);
 }
 
-// src/createReducer.ts
-
-
 // src/mapBuilders.ts
 function executeReducerBuilderCallback(builderCallback) {
   const actionsMap = {};
@@ -739,6 +736,7 @@ function executeReducerBuilderCallback(builderCallback) {
 }
 
 // src/createReducer.ts
+(0,immer__WEBPACK_IMPORTED_MODULE_1__.setUseStrictIteration)(false);
 function isStateFunction(x) {
   return typeof x === "function";
 }
@@ -1414,7 +1412,6 @@ function createSelectorsFactory() {
 }
 
 // src/entities/state_adapter.ts
-
 var isDraftTyped = immer__WEBPACK_IMPORTED_MODULE_1__.isDraft;
 function createSingleArgumentStateOperator(mutator) {
   const operator = createStateOperator((_, state) => mutator(state));
@@ -1443,7 +1440,6 @@ function createStateOperator(mutator) {
 }
 
 // src/entities/utils.ts
-
 function selectIdValue(entity, selectId) {
   const key = selectId(entity);
   if ( true && key === void 0) {
@@ -1640,7 +1636,13 @@ function createSortedStateAdapter(selectId, comparer) {
   function addManyMutably(newEntities, state, existingIds) {
     newEntities = ensureEntitiesArray(newEntities);
     const existingKeys = new Set(existingIds ?? getCurrent(state.ids));
-    const models = newEntities.filter((model) => !existingKeys.has(selectIdValue(model, selectId)));
+    const addedKeys = /* @__PURE__ */ new Set();
+    const models = newEntities.filter((model) => {
+      const modelId = selectIdValue(model, selectId);
+      const notAdded = !addedKeys.has(modelId);
+      if (notAdded) addedKeys.add(modelId);
+      return !existingKeys.has(modelId) && notAdded;
+    });
     if (models.length !== 0) {
       mergeFunction(state, models);
     }
@@ -1649,11 +1651,15 @@ function createSortedStateAdapter(selectId, comparer) {
     return setManyMutably([entity], state);
   }
   function setManyMutably(newEntities, state) {
+    let deduplicatedEntities = {};
     newEntities = ensureEntitiesArray(newEntities);
     if (newEntities.length !== 0) {
       for (const item of newEntities) {
-        delete state.entities[selectId(item)];
+        const entityId = selectId(item);
+        deduplicatedEntities[entityId] = item;
+        delete state.entities[entityId];
       }
+      newEntities = ensureEntitiesArray(deduplicatedEntities);
       mergeFunction(state, newEntities);
     }
   }
@@ -1783,9 +1789,6 @@ function createEntityAdapter(options = {}) {
   };
 }
 
-// src/listenerMiddleware/index.ts
-
-
 // src/listenerMiddleware/exceptions.ts
 var task = "task";
 var listener = "listener";
@@ -2022,9 +2025,11 @@ var cancelActiveListeners = (entry) => {
     abortControllerWithReason(controller, listenerCancelled);
   });
 };
-var createClearListenerMiddleware = (listenerMap) => {
+var createClearListenerMiddleware = (listenerMap, executingListeners) => {
   return () => {
-    listenerMap.forEach(cancelActiveListeners);
+    for (const listener2 of executingListeners.keys()) {
+      cancelActiveListeners(listener2);
+    }
     listenerMap.clear();
   };
 };
@@ -2049,6 +2054,19 @@ var defaultErrorHandler = (...args) => {
 };
 var createListenerMiddleware = (middlewareOptions = {}) => {
   const listenerMap = /* @__PURE__ */ new Map();
+  const executingListeners = /* @__PURE__ */ new Map();
+  const trackExecutingListener = (entry) => {
+    const count = executingListeners.get(entry) ?? 0;
+    executingListeners.set(entry, count + 1);
+  };
+  const untrackExecutingListener = (entry) => {
+    const count = executingListeners.get(entry) ?? 1;
+    if (count === 1) {
+      executingListeners.delete(entry);
+    } else {
+      executingListeners.set(entry, count - 1);
+    }
+  };
   const {
     extra,
     onError = defaultErrorHandler
@@ -2090,6 +2108,7 @@ var createListenerMiddleware = (middlewareOptions = {}) => {
     const autoJoinPromises = [];
     try {
       entry.pending.add(internalTaskController);
+      trackExecutingListener(entry);
       await Promise.resolve(entry.effect(
         action,
         // Use assign() rather than ... to avoid extra helper functions added to bundle
@@ -2132,10 +2151,11 @@ var createListenerMiddleware = (middlewareOptions = {}) => {
     } finally {
       await Promise.all(autoJoinPromises);
       abortControllerWithReason(internalTaskController, listenerCompleted);
+      untrackExecutingListener(entry);
       entry.pending.delete(internalTaskController);
     }
   };
-  const clearListenerMiddleware = createClearListenerMiddleware(listenerMap);
+  const clearListenerMiddleware = createClearListenerMiddleware(listenerMap, executingListeners);
   const middleware = (api) => (next) => (action) => {
     if (!(0,redux__WEBPACK_IMPORTED_MODULE_0__.isAction)(action)) {
       return next(action);
@@ -2193,7 +2213,6 @@ var createListenerMiddleware = (middlewareOptions = {}) => {
 };
 
 // src/dynamicMiddleware/index.ts
-
 var createMiddlewareEntry = (middleware) => ({
   middleware,
   applied: /* @__PURE__ */ new Map()
@@ -5823,10 +5842,10 @@ var SHARED = '__core-js_shared__';
 var store = module.exports = globalThis[SHARED] || defineGlobalProperty(SHARED, {});
 
 (store.versions || (store.versions = [])).push({
-  version: '3.45.1',
+  version: '3.46.0',
   mode: IS_PURE ? 'pure' : 'global',
-  copyright: '© 2014-2025 Denis Pushkarev (zloirock.ru)',
-  license: 'https://github.com/zloirock/core-js/blob/v3.45.1/LICENSE',
+  copyright: '© 2014-2025 Denis Pushkarev (zloirock.ru), 2025 CoreJS Company (core-js.io)',
+  license: 'https://github.com/zloirock/core-js/blob/v3.46.0/LICENSE',
   source: 'https://github.com/zloirock/core-js'
 });
 
@@ -7301,7 +7320,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var tabbable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tabbable */ "./node_modules/tabbable/dist/index.esm.js");
 /*!
-* focus-trap 7.6.5
+* focus-trap 7.6.6
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
@@ -8320,6 +8339,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   produce: () => (/* binding */ produce),
 /* harmony export */   produceWithPatches: () => (/* binding */ produceWithPatches),
 /* harmony export */   setAutoFreeze: () => (/* binding */ setAutoFreeze),
+/* harmony export */   setUseStrictIteration: () => (/* binding */ setUseStrictIteration),
 /* harmony export */   setUseStrictShallowCopy: () => (/* binding */ setUseStrictShallowCopy)
 /* harmony export */ });
 // src/utils/env.ts
@@ -8380,26 +8400,34 @@ function isDraftable(value) {
   return isPlainObject(value) || Array.isArray(value) || !!value[DRAFTABLE] || !!value.constructor?.[DRAFTABLE] || isMap(value) || isSet(value);
 }
 var objectCtorString = Object.prototype.constructor.toString();
+var cachedCtorStrings = /* @__PURE__ */ new WeakMap();
 function isPlainObject(value) {
   if (!value || typeof value !== "object")
     return false;
-  const proto = getPrototypeOf(value);
-  if (proto === null) {
+  const proto = Object.getPrototypeOf(value);
+  if (proto === null || proto === Object.prototype)
     return true;
-  }
   const Ctor = Object.hasOwnProperty.call(proto, "constructor") && proto.constructor;
   if (Ctor === Object)
     return true;
-  return typeof Ctor == "function" && Function.toString.call(Ctor) === objectCtorString;
+  if (typeof Ctor !== "function")
+    return false;
+  let ctorString = cachedCtorStrings.get(Ctor);
+  if (ctorString === void 0) {
+    ctorString = Function.toString.call(Ctor);
+    cachedCtorStrings.set(Ctor, ctorString);
+  }
+  return ctorString === objectCtorString;
 }
 function original(value) {
   if (!isDraft(value))
     die(15, value);
   return value[DRAFT_STATE].base_;
 }
-function each(obj, iter) {
+function each(obj, iter, strict = true) {
   if (getArchtype(obj) === 0 /* Object */) {
-    Reflect.ownKeys(obj).forEach((key) => {
+    const keys = strict ? Reflect.ownKeys(obj) : Object.keys(obj);
+    keys.forEach((key) => {
       iter(key, obj[key], obj);
     });
   } else {
@@ -8486,10 +8514,10 @@ function freeze(obj, deep = false) {
     return obj;
   if (getArchtype(obj) > 1) {
     Object.defineProperties(obj, {
-      set: { value: dontMutateFrozenCollections },
-      add: { value: dontMutateFrozenCollections },
-      clear: { value: dontMutateFrozenCollections },
-      delete: { value: dontMutateFrozenCollections }
+      set: dontMutateMethodOverride,
+      add: dontMutateMethodOverride,
+      clear: dontMutateMethodOverride,
+      delete: dontMutateMethodOverride
     });
   }
   Object.freeze(obj);
@@ -8500,7 +8528,12 @@ function freeze(obj, deep = false) {
 function dontMutateFrozenCollections() {
   die(2);
 }
+var dontMutateMethodOverride = {
+  value: dontMutateFrozenCollections
+};
 function isFrozen(obj) {
+  if (obj === null || typeof obj !== "object")
+    return true;
   return Object.isFrozen(obj);
 }
 
@@ -8598,11 +8631,13 @@ function processResult(result, scope) {
 function finalize(rootScope, value, path) {
   if (isFrozen(value))
     return value;
+  const useStrictIteration = rootScope.immer_.shouldUseStrictIteration();
   const state = value[DRAFT_STATE];
   if (!state) {
     each(
       value,
-      (key, childValue) => finalizeProperty(rootScope, state, value, key, childValue, path)
+      (key, childValue) => finalizeProperty(rootScope, state, value, key, childValue, path),
+      useStrictIteration
     );
     return value;
   }
@@ -8625,7 +8660,16 @@ function finalize(rootScope, value, path) {
     }
     each(
       resultEach,
-      (key, childValue) => finalizeProperty(rootScope, state, result, key, childValue, path, isSet2)
+      (key, childValue) => finalizeProperty(
+        rootScope,
+        state,
+        result,
+        key,
+        childValue,
+        path,
+        isSet2
+      ),
+      useStrictIteration
     );
     maybeFreeze(rootScope, result, false);
     if (path && rootScope.patches_) {
@@ -8640,6 +8684,16 @@ function finalize(rootScope, value, path) {
   return state.copy_;
 }
 function finalizeProperty(rootScope, parentState, targetObject, prop, childValue, rootPath, targetIsSet) {
+  if (childValue == null) {
+    return;
+  }
+  if (typeof childValue !== "object" && !targetIsSet) {
+    return;
+  }
+  const childIsFrozen = isFrozen(childValue);
+  if (childIsFrozen && !targetIsSet) {
+    return;
+  }
   if ( true && childValue === targetObject)
     die(5);
   if (isDraft(childValue)) {
@@ -8654,10 +8708,13 @@ function finalizeProperty(rootScope, parentState, targetObject, prop, childValue
   } else if (targetIsSet) {
     targetObject.add(childValue);
   }
-  if (isDraftable(childValue) && !isFrozen(childValue)) {
+  if (isDraftable(childValue) && !childIsFrozen) {
     if (!rootScope.immer_.autoFreeze_ && rootScope.unfinalizedDrafts_ < 1) {
       return;
     }
+    if (parentState && parentState.base_ && parentState.base_[prop] === childValue && childIsFrozen) {
+      return;
+    }
     finalize(rootScope, childValue);
     if ((!parentState || !parentState.scope_.parent_) && typeof prop !== "symbol" && (isMap(targetObject) ? targetObject.has(prop) : Object.prototype.propertyIsEnumerable.call(targetObject, prop)))
       maybeFreeze(rootScope, childValue);
@@ -8858,6 +8915,7 @@ var Immer2 = class {
   constructor(config) {
     this.autoFreeze_ = true;
     this.useStrictShallowCopy_ = false;
+    this.useStrictIteration_ = true;
     /**
      * The `produce` function takes a value and a "recipe function" (whose
      * return value often depends on the base state). The recipe function is
@@ -8939,6 +8997,8 @@ var Immer2 = class {
       this.setAutoFreeze(config.autoFreeze);
     if (typeof config?.useStrictShallowCopy === "boolean")
       this.setUseStrictShallowCopy(config.useStrictShallowCopy);
+    if (typeof config?.useStrictIteration === "boolean")
+      this.setUseStrictIteration(config.useStrictIteration);
   }
   createDraft(base) {
     if (!isDraftable(base))
@@ -8975,6 +9035,18 @@ var Immer2 = class {
   setUseStrictShallowCopy(value) {
     this.useStrictShallowCopy_ = value;
   }
+  /**
+   * Pass false to use faster iteration that skips non-enumerable properties
+   * but still handles symbols for compatibility.
+   *
+   * By default, strict iteration is enabled (includes all own properties).
+   */
+  setUseStrictIteration(value) {
+    this.useStrictIteration_ = value;
+  }
+  shouldUseStrictIteration() {
+    return this.useStrictIteration_;
+  }
   applyPatches(base, patches) {
     let i;
     for (i = patches.length - 1; i >= 0; i--) {
@@ -9015,17 +9087,23 @@ function currentImpl(value) {
     return value;
   const state = value[DRAFT_STATE];
   let copy;
+  let strict = true;
   if (state) {
     if (!state.modified_)
       return state.base_;
     state.finalized_ = true;
     copy = shallowCopy(value, state.scope_.immer_.useStrictShallowCopy_);
+    strict = state.scope_.immer_.shouldUseStrictIteration();
   } else {
     copy = shallowCopy(value, true);
   }
-  each(copy, (key, childValue) => {
-    set(copy, key, currentImpl(childValue));
-  });
+  each(
+    copy,
+    (key, childValue) => {
+      set(copy, key, currentImpl(childValue));
+    },
+    strict
+  );
   if (state) {
     state.finalized_ = false;
   }
@@ -9528,6 +9606,9 @@ var setAutoFreeze = /* @__PURE__ */ immer.setAutoFreeze.bind(immer);
 var setUseStrictShallowCopy = /* @__PURE__ */ immer.setUseStrictShallowCopy.bind(
   immer
 );
+var setUseStrictIteration = /* @__PURE__ */ immer.setUseStrictIteration.bind(
+  immer
+);
 var applyPatches = /* @__PURE__ */ immer.applyPatches.bind(immer);
 var createDraft = /* @__PURE__ */ immer.createDraft.bind(immer);
 var finishDraft = /* @__PURE__ */ immer.finishDraft.bind(immer);
@@ -12671,7 +12752,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   tabbable: () => (/* binding */ tabbable)
 /* harmony export */ });
 /*!
-* tabbable 6.2.0
+* tabbable 6.3.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
 */
 // NOTE: separate `:not()` selectors has broader browser support than the newer
@@ -12698,7 +12779,7 @@ var getRootNode = !NoElement && Element.prototype.getRootNode ? function (elemen
  * @returns {boolean} True if inert itself or by way of being in an inert ancestor.
  *  False if `node` is falsy.
  */
-var isInert = function isInert(node, lookUp) {
+var _isInert = function isInert(node, lookUp) {
   var _node$getAttribute;
   if (lookUp === void 0) {
     lookUp = true;
@@ -12714,7 +12795,7 @@ var isInert = function isInert(node, lookUp) {
   //  code works for any kind of node
   // CAREFUL: JSDom does not appear to support certain selectors like `:not([inert] *)`
   //  so it likely would not support `:is([inert] *)` either...
-  var result = inert || lookUp && node && isInert(node.parentNode); // recursive
+  var result = inert || lookUp && node && _isInert(node.parentNode); // recursive
 
   return result;
 };
@@ -12742,7 +12823,7 @@ var isContentEditable = function isContentEditable(node) {
 var getCandidates = function getCandidates(el, includeContainer, filter) {
   // even if `includeContainer=false`, we still have to check it for inertness because
   //  if it's inert, all its children are inert
-  if (isInert(el)) {
+  if (_isInert(el)) {
     return [];
   }
   var candidates = Array.prototype.slice.apply(el.querySelectorAll(candidateSelector));
@@ -12787,12 +12868,12 @@ var getCandidates = function getCandidates(el, includeContainer, filter) {
  * @param {IterativeOptions} options
  * @returns {Array.<Element|CandidateScope>}
  */
-var getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {
+var _getCandidatesIteratively = function getCandidatesIteratively(elements, includeContainer, options) {
   var candidates = [];
   var elementsToCheck = Array.from(elements);
   while (elementsToCheck.length) {
     var element = elementsToCheck.shift();
-    if (isInert(element, false)) {
+    if (_isInert(element, false)) {
       // no need to look up since we're drilling down
       // anything inside this container will also be inert
       continue;
@@ -12801,7 +12882,7 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
       // add shadow dom slot scope (slot itself cannot be focusable)
       var assigned = element.assignedElements();
       var content = assigned.length ? assigned : element.children;
-      var nestedCandidates = getCandidatesIteratively(content, true, options);
+      var nestedCandidates = _getCandidatesIteratively(content, true, options);
       if (options.flatten) {
         candidates.push.apply(candidates, nestedCandidates);
       } else {
@@ -12825,7 +12906,7 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
       // no inert look up because we're already drilling down and checking for inertness
       //  on the way down, so all containers to this root node should have already been
       //  vetted as non-inert
-      var validShadowRoot = !isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
+      var validShadowRoot = !_isInert(shadowRoot, false) && (!options.shadowRootFilter || options.shadowRootFilter(element));
       if (shadowRoot && validShadowRoot) {
         // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
         //  shadow exists, so look at light dom children as fallback BUT create a scope for any
@@ -12833,7 +12914,7 @@ var getCandidatesIteratively = function getCandidatesIteratively(elements, inclu
         //  children of the web component element (which has the shadow), in the light dom, but
         //  slotted somewhere _inside_ the undisclosed shadow) -- the scope is created below,
         //  _after_ we return from this recursive call
-        var _nestedCandidates = getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);
+        var _nestedCandidates = _getCandidatesIteratively(shadowRoot === true ? element.children : shadowRoot.children, true, options);
         if (options.flatten) {
           candidates.push.apply(candidates, _nestedCandidates);
         } else {
@@ -13010,6 +13091,28 @@ var isZeroArea = function isZeroArea(node) {
 var isHidden = function isHidden(node, _ref) {
   var displayCheck = _ref.displayCheck,
     getShadowRoot = _ref.getShadowRoot;
+  if (displayCheck === 'full-native') {
+    if ('checkVisibility' in node) {
+      // Chrome >= 105, Edge >= 105, Firefox >= 106, Safari >= 17.4
+      // @see https://developer.mozilla.org/en-US/docs/Web/API/Element/checkVisibility#browser_compatibility
+      var visible = node.checkVisibility({
+        // Checking opacity might be desirable for some use cases, but natively,
+        // opacity zero elements _are_ focusable and tabbable.
+        checkOpacity: false,
+        opacityProperty: false,
+        contentVisibilityAuto: true,
+        visibilityProperty: true,
+        // This is an alias for `visibilityProperty`. Contemporary browsers
+        // support both. However, this alias has wider browser support (Chrome
+        // >= 105 and Firefox >= 106, vs. Chrome >= 121 and Firefox >= 122), so
+        // we include it anyway.
+        checkVisibilityCSS: true
+      });
+      return !visible;
+    }
+    // Fall through to manual visibility checks
+  }
+
   // NOTE: visibility will be `undefined` if node is detached from the document
   //  (see notes about this further down), which means we will consider it visible
   //  (this is legacy behavior from a very long way back)
@@ -13023,7 +13126,10 @@ var isHidden = function isHidden(node, _ref) {
   if (matches.call(nodeUnderDetails, 'details:not([open]) *')) {
     return true;
   }
-  if (!displayCheck || displayCheck === 'full' || displayCheck === 'legacy-full') {
+  if (!displayCheck || displayCheck === 'full' ||
+  // full-native can run this branch when it falls through in case
+  // Element#checkVisibility is unsupported
+  displayCheck === 'full-native' || displayCheck === 'legacy-full') {
     if (typeof getShadowRoot === 'function') {
       // figure out if we should consider the node to be in an undisclosed shadow and use the
       //  'non-zero-area' fallback
@@ -13136,7 +13242,7 @@ var isNodeMatchingSelectorFocusable = function isNodeMatchingSelectorFocusable(o
   // we must do an inert look up to filter out any elements inside an inert ancestor
   //  because we're limited in the type of selectors we can use in JSDom (see related
   //  note related to `candidateSelectors`)
-  isInert(node) || isHiddenInput(node) || isHidden(node, options) ||
+  _isInert(node) || isHiddenInput(node) || isHidden(node, options) ||
   // For a details element with a summary, the summary element gets the focus
   isDetailsWithSummary(node) || isDisabledFromFieldset(node)) {
     return false;
@@ -13149,7 +13255,7 @@ var isNodeMatchingSelectorTabbable = function isNodeMatchingSelectorTabbable(opt
   }
   return true;
 };
-var isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNode) {
+var isShadowRootTabbable = function isShadowRootTabbable(shadowHostNode) {
   var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);
   if (isNaN(tabIndex) || tabIndex >= 0) {
     return true;
@@ -13163,14 +13269,14 @@ var isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNod
  * @param {Array.<Element|CandidateScope>} candidates
  * @returns Element[]
  */
-var sortByOrder = function sortByOrder(candidates) {
+var _sortByOrder = function sortByOrder(candidates) {
   var regularTabbables = [];
   var orderedTabbables = [];
   candidates.forEach(function (item, i) {
     var isScope = !!item.scopeParent;
     var element = isScope ? item.scopeParent : item;
     var candidateTabindex = getSortOrderTabIndex(element, isScope);
-    var elements = isScope ? sortByOrder(item.candidates) : element;
+    var elements = isScope ? _sortByOrder(item.candidates) : element;
     if (candidateTabindex === 0) {
       isScope ? regularTabbables.push.apply(regularTabbables, elements) : regularTabbables.push(element);
     } else {
@@ -13192,22 +13298,22 @@ var tabbable = function tabbable(container, options) {
   options = options || {};
   var candidates;
   if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([container], options.includeContainer, {
+    candidates = _getCandidatesIteratively([container], options.includeContainer, {
       filter: isNodeMatchingSelectorTabbable.bind(null, options),
       flatten: false,
       getShadowRoot: options.getShadowRoot,
-      shadowRootFilter: isValidShadowRootTabbable
+      shadowRootFilter: isShadowRootTabbable
     });
   } else {
     candidates = getCandidates(container, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
   }
-  return sortByOrder(candidates);
+  return _sortByOrder(candidates);
 };
 var focusable = function focusable(container, options) {
   options = options || {};
   var candidates;
   if (options.getShadowRoot) {
-    candidates = getCandidatesIteratively([container], options.includeContainer, {
+    candidates = _getCandidatesIteratively([container], options.includeContainer, {
       filter: isNodeMatchingSelectorFocusable.bind(null, options),
       flatten: true,
       getShadowRoot: options.getShadowRoot
@@ -14485,7 +14591,7 @@ class API {
     return {
       clientName: "@seamly/web-ui",
       clientVariant: this.#layoutMode,
-      clientVersion: "25.1.0",
+      clientVersion: "25.2.0-beta.2",
       currentUrl: window.location.toString(),
       screenResolution: `${window.screen.width}x${window.screen.height}`,
       timezone: (0,_utils__WEBPACK_IMPORTED_MODULE_13__.getTimeZone)(),
@@ -16643,6 +16749,7 @@ const initialStoreState = {
     subTitle: ''
   },
   historyLoaded: false,
+  skiplinkElementId: (0,lib_id__WEBPACK_IMPORTED_MODULE_10__.randomId)(),
   skiplinkTargetId: (0,lib_id__WEBPACK_IMPORTED_MODULE_10__.randomId)(),
   optionsButtonId: (0,lib_id__WEBPACK_IMPORTED_MODULE_10__.randomId)(),
   headerCollapseButtonId: (0,lib_id__WEBPACK_IMPORTED_MODULE_10__.randomId)(),
@@ -19664,7 +19771,8 @@ const Conversation = () => {
   const {
     isOpen
   } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_3__.useVisibility)();
-  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSkiplink)();
+  const skiplinkElementId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSkiplinkElement)();
+  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSkiplinkTarget)();
   const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSkiplinkTargetFocusing)();
   const onClickHandler = e => {
     e.preventDefault();
@@ -19672,6 +19780,7 @@ const Conversation = () => {
   };
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.Fragment, {
     children: [isOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("a", {
+      id: skiplinkElementId,
       className: (0,lib_css__WEBPACK_IMPORTED_MODULE_4__.className)('skip-link'),
       href: `#${skiplinkTargetId}`,
       onClick: onClickHandler,
@@ -21821,39 +21930,58 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
-/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lib/css */ "./src/javascripts/core/lib/css.ts");
-/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ "./src/javascripts/core/ui/hooks/seamly-hooks.ts");
-/* harmony import */ var _event_event_participant__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./event/event-participant */ "./src/javascripts/core/ui/components/conversation/event/event-participant.tsx");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/preact/compat/jsx-runtime.mjs");
+/* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! domains/i18n/hooks */ "./src/javascripts/core/domains/i18n/hooks.ts");
+/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lib/css */ "./src/javascripts/core/lib/css.ts");
+/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! preact/hooks */ "preact/hooks");
+/* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(preact_hooks__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/hooks/seamly-hooks */ "./src/javascripts/core/ui/hooks/seamly-hooks.ts");
+/* harmony import */ var _event_event_participant__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./event/event-participant */ "./src/javascripts/core/ui/components/conversation/event/event-participant.tsx");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/preact/compat/jsx-runtime.mjs");
+
+
 
 
 
 
 const Loader = () => {
   const {
-    id
-  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSeamlyCurrentAgent)() || {};
-  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("li", {
-    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('conversation__item', 'conversation__item--source-agent'),
-    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div", {
-      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('message', 'message--source-agent', 'message--type-loading'),
-      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_event_event_participant__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    t
+  } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_0__.useI18n)();
+  const {
+    sendPolite
+  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useLiveRegion)();
+  const {
+    id,
+    name
+  } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_3__.useSeamlyCurrentAgent)() || {};
+  (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useEffect)(() => {
+    if (name) {
+      sendPolite(t('typing.srText', {
+        name
+      }));
+    }
+  }, [name, sendPolite, t]);
+  return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("li", {
+    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('conversation__item', 'conversation__item--source-agent'),
+    children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div", {
+      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message', 'message--source-agent', 'message--type-loading'),
+      children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_event_event_participant__WEBPACK_IMPORTED_MODULE_4__["default"], {
         eventPayload: {
           fromClient: false,
           participant: id
         }
-      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div", {
-        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('message__body'),
-        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("span", {
-          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('loader'),
-          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
-            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('loader__part', 'one')
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
-            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('loader__part', 'two')
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
-            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('loader__part', 'three')
-          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span", {
-            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_0__.className)('loader__part', 'four')
+      }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div", {
+        className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('message__body'),
+        children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("span", {
+          className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('loader'),
+          children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
+            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('loader__part', 'one')
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
+            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('loader__part', 'two')
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
+            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('loader__part', 'three')
+          }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("span", {
+            className: (0,lib_css__WEBPACK_IMPORTED_MODULE_1__.className)('loader__part', 'four')
           })]
         })
       })]
@@ -23578,7 +23706,7 @@ function TextEntry({
     isOpen,
     setVisibility
   } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_2__.useVisibility)();
-  const skipLinkId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSkiplink)();
+  const skipLinkId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSkiplinkTarget)();
   const focusSkipLinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_4__.useSkiplinkTargetFocusing)();
   const {
     sendMessage
@@ -23973,7 +24101,7 @@ const Upload = () => {
     sendPolite,
     sendAssertive
   } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useLiveRegion)();
-  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSkiplink)();
+  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSkiplinkTarget)();
   const focusSkiplinkTarget = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_6__.useSkiplinkTargetFocusing)();
   // This hook should be refactored at some point
   const {
@@ -24633,15 +24761,17 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/hooks */ "./src/javascripts/core/domains/config/hooks.ts");
 /* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n/hooks */ "./src/javascripts/core/domains/i18n/hooks.ts");
 /* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/visibility/hooks */ "./src/javascripts/core/domains/visibility/hooks.ts");
-/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/css */ "./src/javascripts/core/lib/css.ts");
-/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! preact/compat */ "preact/compat");
-/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(preact_compat__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var ui_components_suggestions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/components/suggestions */ "./src/javascripts/core/ui/components/suggestions/index.tsx");
-/* harmony import */ var ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/hooks/component-helper-hooks */ "./src/javascripts/core/ui/hooks/component-helper-hooks.ts");
-/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ "./src/javascripts/core/ui/hooks/focus-helper-hooks.ts");
-/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ "./src/javascripts/core/ui/hooks/seamly-state-hooks.ts");
-/* harmony import */ var ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/hooks/utility-hooks */ "./src/javascripts/core/ui/hooks/utility-hooks.ts");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/preact/compat/jsx-runtime.mjs");
+/* harmony import */ var focus_trap__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! focus-trap */ "./node_modules/focus-trap/dist/focus-trap.esm.js");
+/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/css */ "./src/javascripts/core/lib/css.ts");
+/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! preact/compat */ "preact/compat");
+/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(preact_compat__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var ui_components_suggestions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/components/suggestions */ "./src/javascripts/core/ui/components/suggestions/index.tsx");
+/* harmony import */ var ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/hooks/component-helper-hooks */ "./src/javascripts/core/ui/hooks/component-helper-hooks.ts");
+/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ "./src/javascripts/core/ui/hooks/focus-helper-hooks.ts");
+/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ "./src/javascripts/core/ui/hooks/seamly-state-hooks.ts");
+/* harmony import */ var ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ui/hooks/utility-hooks */ "./src/javascripts/core/ui/hooks/utility-hooks.ts");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/preact/compat/jsx-runtime.mjs");
+
 
 
 
@@ -24655,25 +24785,27 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const Chat = (0,preact_compat__WEBPACK_IMPORTED_MODULE_6__.forwardRef)(({
+const Chat = (0,preact_compat__WEBPACK_IMPORTED_MODULE_7__.forwardRef)(({
   children,
   className: givenClassName = ''
 }, forwardedRef) => {
+  const focusTrap = (0,preact_compat__WEBPACK_IMPORTED_MODULE_7__.useRef)(null);
   const {
     closeChat,
     isOpen,
     isVisible
   } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_4__.useVisibility)();
-  const focusWindowOpenButton = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_9__.useWindowOpenButtonFocusing)();
+  const focusWindowOpenButton = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_10__.useWindowOpenButtonFocusing)();
   const {
     namespace,
     layoutMode
   } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__.useConfig)();
   const {
     isInline
-  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_10__.useSeamlyLayoutMode)();
-  const appContainerClassNames = (0,ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_8__.useSeamlyAppContainerClassNames)();
-  const headingId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_11__.useGeneratedId)();
+  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_11__.useSeamlyLayoutMode)();
+  const appContainerClassNames = (0,ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_9__.useSeamlyAppContainerClassNames)();
+  const chatSectionId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_12__.useGeneratedId)();
+  const headingId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_12__.useGeneratedId)();
   const userHasResponded = (0,domains_app_hooks__WEBPACK_IMPORTED_MODULE_1__.useUserHasResponded)();
   const {
     t
@@ -24695,21 +24827,36 @@ const Chat = (0,preact_compat__WEBPACK_IMPORTED_MODULE_6__.forwardRef)(({
       focusWindowOpenButton();
     }
   };
-  return isVisible && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("section", {
-    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)(classNames),
+  (0,preact_compat__WEBPACK_IMPORTED_MODULE_7__.useEffect)(() => {
+    if (isVisible && layoutMode === 'window') {
+      focusTrap.current = (0,focus_trap__WEBPACK_IMPORTED_MODULE_5__.createFocusTrap)(`#${chatSectionId}`, {
+        // We set the initialFocus to false, as the `WindowOpenButton` takes care of that
+        initialFocus: false
+      });
+      focusTrap.current.activate();
+    }
+    return () => {
+      if (focusTrap.current) {
+        focusTrap.current.deactivate();
+      }
+    };
+  }, [chatSectionId, isVisible, layoutMode]);
+  return isVisible && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("section", {
+    id: chatSectionId,
+    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)(classNames),
     onKeyDown: onKeyDownHandler,
     tabIndex: -1,
     ref: forwardedRef,
     role: layoutMode === 'window' ? 'dialog' : undefined,
     "aria-labelledby": headingId,
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("h2", {
-      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('chat__title', 'visually-hidden'),
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("h2", {
+      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('chat__title', 'visually-hidden'),
       id: headingId,
       children: t('window.srModalLayoutLabel')
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", {
-      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('chat-wrapper'),
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("div", {
+      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('chat-wrapper'),
       children: children
-    }), layoutMode === 'inline' && isOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_suggestions__WEBPACK_IMPORTED_MODULE_7__["default"], {
+    }), layoutMode === 'inline' && isOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(ui_components_suggestions__WEBPACK_IMPORTED_MODULE_8__["default"], {
       isAside: true
     })]
   });
@@ -26538,6 +26685,7 @@ const WindowOpenButton = ({
     t
   } = (0,domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_1__.useI18n)();
   const ariaLabel = hasConversation() ? t('window.openButton.srContinue') : t('window.openButton.srStart');
+  const focusSkipLinkELement = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_9__.useSkiplinkElementFocusing)();
   const focusSkiplinkTarget = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_9__.useSkiplinkTargetFocusing)();
   const {
     isOpen
@@ -26546,10 +26694,17 @@ const WindowOpenButton = ({
     windowOpenButtonId
   } = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_11__.useSeamlyStateContext)();
   const count = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_12__.useSeamlyUnreadCount)();
-  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_5__.useCallback)(() => {
+  const handleClick = (0,preact_hooks__WEBPACK_IMPORTED_MODULE_5__.useCallback)(event => {
     onClick();
-    focusSkiplinkTarget();
-  }, [focusSkiplinkTarget, onClick]);
+    if (event.detail > 0) {
+      // Mouse was used: focus the input element
+      focusSkiplinkTarget();
+    } else {
+      // Keyboard was used: focus the skiplink element instead to improve
+      // accessibility for keyboard users.
+      focusSkipLinkELement();
+    }
+  }, [focusSkipLinkELement, focusSkiplinkTarget, onClick]);
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__["default"], {
     isActive: !isOpen,
     transitionStartState: ui_components_widgets_in_out_transition__WEBPACK_IMPORTED_MODULE_8__.transitionStartStates.rendered,
@@ -26689,7 +26844,7 @@ const Prompt = ({
   children,
   title
 }) => {
-  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSkiplink)();
+  const skiplinkTargetId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useSkiplinkTarget)();
   const containerHeadingId = (0,ui_hooks_seamly_hooks__WEBPACK_IMPORTED_MODULE_1__.useGeneratedId)();
   return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("section", {
     id: skiplinkTargetId,
@@ -27399,6 +27554,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useElementFocusingById: () => (/* binding */ useElementFocusingById),
 /* harmony export */   useFocusIfSeamlyContainedFocus: () => (/* binding */ useFocusIfSeamlyContainedFocus),
 /* harmony export */   useSeamlyContainerElement: () => (/* binding */ useSeamlyContainerElement),
+/* harmony export */   useSkiplinkElementFocusing: () => (/* binding */ useSkiplinkElementFocusing),
 /* harmony export */   useSkiplinkTargetFocusing: () => (/* binding */ useSkiplinkTargetFocusing),
 /* harmony export */   useWindowOpenButtonFocusing: () => (/* binding */ useWindowOpenButtonFocusing)
 /* harmony export */ });
@@ -27436,8 +27592,12 @@ const useSeamlyContainerElement = () => {
 const useElementFocusingById = elementId => (0,preact_hooks__WEBPACK_IMPORTED_MODULE_2__.useCallback)(() => {
   focusWithRaf(elementId);
 }, [elementId]);
+const useSkiplinkElementFocusing = () => {
+  const skiplinkElementId = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useSkiplinkElement)();
+  return useElementFocusingById(skiplinkElementId);
+};
 const useSkiplinkTargetFocusing = () => {
-  const skiplinkTargetId = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useSkiplink)();
+  const skiplinkTargetId = (0,_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_4__.useSkiplinkTarget)();
   return useElementFocusingById(skiplinkTargetId);
 };
 const useWindowOpenButtonFocusing = () => {
@@ -27726,7 +27886,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useSeamlyServiceInfo: () => (/* reexport safe */ _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_8__.useSeamlyServiceInfo),
 /* harmony export */   useSeamlyStateContext: () => (/* reexport safe */ _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_8__.useSeamlyStateContext),
 /* harmony export */   useSeamlyUnreadCount: () => (/* reexport safe */ _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_8__.useSeamlyUnreadCount),
-/* harmony export */   useSkiplink: () => (/* reexport safe */ _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_8__.useSkiplink),
+/* harmony export */   useSkiplinkElement: () => (/* reexport safe */ _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_8__.useSkiplinkElement),
+/* harmony export */   useSkiplinkTarget: () => (/* reexport safe */ _seamly_state_hooks__WEBPACK_IMPORTED_MODULE_8__.useSkiplinkTarget),
 /* harmony export */   useSkiplinkTargetFocusing: () => (/* reexport safe */ ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_2__.useSkiplinkTargetFocusing)
 /* harmony export */ });
 /* harmony import */ var preact_hooks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! preact/hooks */ "preact/hooks");
@@ -27945,7 +28106,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   useSeamlyServiceInfo: () => (/* binding */ useSeamlyServiceInfo),
 /* harmony export */   useSeamlyStateContext: () => (/* binding */ useSeamlyStateContext),
 /* harmony export */   useSeamlyUnreadCount: () => (/* binding */ useSeamlyUnreadCount),
-/* harmony export */   useSkiplink: () => (/* binding */ useSkiplink)
+/* harmony export */   useSkiplinkElement: () => (/* binding */ useSkiplinkElement),
+/* harmony export */   useSkiplinkTarget: () => (/* binding */ useSkiplinkTarget)
 /* harmony export */ });
 /* harmony import */ var core_js_modules_esnext_iterator_constructor_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/esnext.iterator.constructor.js */ "./node_modules/core-js/modules/esnext.iterator.constructor.js");
 /* harmony import */ var core_js_modules_esnext_iterator_constructor_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_esnext_iterator_constructor_js__WEBPACK_IMPORTED_MODULE_0__);
@@ -28035,7 +28197,8 @@ const useSeamlyIsLoading = () => useSeamlyStateContext().isLoading;
 const useSeamlyHeaderData = () => useSeamlyStateContext().headerTitles;
 const useSeamlyUnreadCount = () => useSeamlyStateContext().unreadEvents;
 const useLoadedImageEventIds = () => useSeamlyStateContext().loadedImageEventIds;
-const useSkiplink = () => useSeamlyStateContext().skiplinkTargetId;
+const useSkiplinkElement = () => useSeamlyStateContext().skiplinkElementId;
+const useSkiplinkTarget = () => useSeamlyStateContext().skiplinkTargetId;
 const useSeamlyParticipant = participantId => useSeamlyStateContext().participantInfo.participants[participantId];
 const useSeamlyServiceInfo = () => useSeamlyStateContext().serviceInfo;
 const selectLastMessageEventId = (0,_reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_3__.createSelector)(selectEvents, events => {