Fixed mobile tabmenu, add focus visuals, updated texts

assets/styles/layout/_doc.scss

@@ -1,13 +1,25 @@
 .doc-tabmenu {
     list-style: none;
-    margin: 0 17rem 0 0;
+    margin: 0;
     padding: 0;
     display: flex;
     margin-bottom: 2rem;
+    overflow: auto;
+    position: relative;
+
+    &:after {
+        display: block;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
         border-bottom: 1px solid var(--surface-border);
-    overflow: visible;
+        content: '';
+    }
 
     li {
+        position: relative;
+        z-index: 1;
+        
         button {
             background-color: transparent;
             border: 0 none;
@@ -19,7 +31,6 @@
             letter-spacing: 1px;
             cursor: pointer;
             margin: 0;
-            margin: 0 0 -1px 0;
             transition: all 0.2s;
             border-bottom: 1px solid transparent;
             border-top-right-radius: var(--border-round);
@@ -39,8 +50,8 @@
 
         &.doc-tabmenu-active {
             button {
-                color: var(--primary-color);
                 border-bottom-color: var(--primary-color);
+                color: var(--primary-color);
             }
         }
     }
@@ -82,7 +93,9 @@
         opacity: 0.7;
         margin-left: 1rem;
         display: none;
-        transition: opacity .3s, color .3s;
+        transition: all .2s;
+        border-radius: var(--border-radius);
+        @include focus-visible();
     }
 
     &:hover {
@@ -114,6 +127,9 @@
         a {
             color: var(--primary-color);
             font-weight: 600;
+            transition: all .2s;
+            border-radius: var(--border-radius);
+            @include focus-visible();
 
             &:hover {
                 text-decoration: underline;

assets/styles/layout/_responsive.scss

@@ -93,10 +93,6 @@
         display: none;
     }
 
-    .doc-tabmenu {
-        margin-right: 0;
-    }
-
     .video-container {
         position: relative;
         width: 100%;

doc/rating/ReadOnlyDoc.vue

@@ -3,7 +3,7 @@
         <p>When <i>readOnly</i> present, value cannot be edited.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Rating v-model="value" readonly />
+        <Rating v-model="value" readonly :cancel="false" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,15 +12,15 @@
 export default {
     data() {
         return {
-            value: 5,
+            value: 3,
             code: {
                 basic: `
-<Rating v-model="value" readonly />
+<Rating v-model="value" readonly :cancel="false" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Rating v-model="value" readonly />
+        <Rating v-model="value" readonly :cancel="false" />
     </div>
 </template>
 
@@ -28,7 +28,7 @@ export default {
 export default {
     data() {
         return {
-            value: null
+            value: 3
         }
     }
 };
@@ -37,14 +37,14 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Rating v-model="value" readonly />
+        <Rating v-model="value" readonly :cancel="false" />
     </div>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 
-const value = ref(null);
+const value = ref(3);
 <\/script>
 `
             }

pages/configuration/index.vue

@@ -69,7 +69,7 @@ export default {
                 },
                 {
                     id: 'csp',
-                    label: 'Content Security Policy (CSP)',
+                    label: 'CSP',
                     children: [
                         {
                             id: 'nonce',

pages/inputgroup/index.vue

@@ -29,7 +29,7 @@ export default {
                 },
                 {
                     id: 'checkbox',
-                    label: 'Checkbox & RadioButton',
+                    label: 'Check & Radio',
                     component: CheckboxDoc
                 }
             ]