fix(panel, flow-item): hide focus-outline when scrolling via mouse to…

… align with browsers (#10242)

**Related Issue:** #10238

## Summary

Fixes a regression caused by #10141 where clicks on scrollers would show
the focus outline.

### Notes

* this behavior aligns with Chrome/Firefox's latest default focus on
scrolling content behavior
* `:focus-visible` [isn’t supported in Safari 15.0 -
15.3](https://caniuse.com/?search=focus-visible), but given Safari 18 is
expected this year, this is a minor visual inconsistency for unsupported
versions.
* cleans up focus styles that should have been updated by #10141.
* no tests were added as we currently don't cover interactive
focus-related styling

packages/calcite-components/src/components/panel/panel.scss

@@ -73,17 +73,13 @@
 }
 
 .container {
-  @apply focus-base relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;
+  @apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;
 
   transition:
     max-block-size var(--calcite-animation-timing),
     inline-size var(--calcite-animation-timing);
 }
 
-.container:focus {
-  @apply focus-inset;
-}
-
 .container[hidden] {
   @apply hidden;
 }
@@ -164,6 +160,7 @@
   flex-auto
   flex-col
   flex-nowrap
+  focus-base
   items-stretch
   bg-background
   overflow-auto
@@ -173,7 +170,7 @@
   padding: var(--calcite-panel-content-space, 0);
 }
 
-.content-wrapper:focus {
+.content-wrapper:focus-visible {
   @apply focus-inset;
 }