feat(tab-title): enhance component's interactivity states (#11493)

**Related Issue:**
[#10003](#10003)

## Summary

- Increase `bottom-border` to `4px` on `focus` when `selected=true`.
- Change `text-color-3` to `text-color-1` on `hover` and `active` when
`bordered=false` and `selected=false`.
- When `bordered=true`:
    - Remove `hover` and `active` states when `selected=true`.
- Change `text-color-3` to `text-color-1` on `hover` and `active` when
`selected=false`.

packages/calcite-components/src/components/tab-title/tab-title.scss

@@ -117,6 +117,13 @@
   border-block-end: 1px solid transparent;
 }
 
+:host(:not([bordered])) .container {
+  &:hover,
+  &:active {
+    @apply text-color-1;
+  }
+}
+
 :host([bordered]:not([selected]):hover) .container:not(.container--bottom) {
   border-block-end: 1px solid var(--calcite-color-border-1);
 }
@@ -151,10 +158,6 @@
   inset-block-start: -1px;
 }
 
-:host([bordered][selected]:hover) .container::after {
-  background: var(--calcite-color-foreground-2);
-}
-
 :host([bordered][selected]:focus) .container::after {
   background: transparent;
 }
@@ -178,6 +181,12 @@
   background-color: var(--calcite-color-brand);
 }
 
+:host([selected]:focus) {
+  .selected-indicator {
+    block-size: 4px;
+  }
+}
+
 @media (forced-colors: active) {
   .selected-indicator {
     background-color: highlight;
@@ -285,6 +294,11 @@
 
 // bordered styles
 :host([bordered]) .container {
+  &:hover,
+  &:active {
+    @apply text-color-1;
+  }
+
   &:not(.container--bottom) .close-button {
     block-size: calc(100% - var(--calcite-spacing-px));
     margin-block-start: -1px;
@@ -334,6 +348,10 @@
 
 :host([selected][bordered]) .container {
   border-inline-color: var(--calcite-color-border-1);
+  &:hover,
+  &:active {
+    background: transparent;
+  }
 }
 
 :host([layout="inline"][bordered]),