kasy-cli 1.23.0 → 1.25.0

package/bin/kasy.js

@@ -463,9 +463,15 @@ function buildProgram(language) {
           if (p[p.length - 1] === 'lib') p = p.slice(0, -1);
           prefix = p.join(path.sep) || null;
         }
-        const args = ['install', '-g', 'kasy-cli@latest'];
-        if (prefix) args.push('--prefix', prefix);
-        const result = spawnSync('npm', args, { stdio: 'inherit', shell: true });
+        // Build a single, pre-quoted command string. Passing a quoted string
+        // (instead of an args array) with shell:true keeps a prefix that contains
+        // spaces intact — e.g. C:\Users\John Silva\.kasy — which the array form
+        // splits into a broken path (npm reads "Silva\.kasy" as a second package).
+        // It also avoids Node's DEP0190 arg-concatenation warning.
+        const quote = (s) => `"${s}"`;
+        let cmd = 'npm install -g kasy-cli@latest';
+        if (prefix) cmd += ` --prefix ${quote(prefix)}`;
+        const result = spawnSync(cmd, { stdio: 'inherit', shell: true });
         if (result.status === 0) {
           const after = readVersion();
           let msg;
@@ -486,9 +492,25 @@ function buildProgram(language) {
       .description(t('cli.command.uninstall.description'))
       .action(() => {
         const { spawnSync } = require('node:child_process');
+        const path = require('node:path');
         printCompactHeader(t);
         console.log(kleur.cyan(t('cli.command.uninstall.running')) + '\n');
-        const result = spawnSync('npm', ['uninstall', '-g', 'kasy-cli'], { stdio: 'inherit', shell: true });
+        // Remove from the SAME prefix the CLI was installed into (~/.kasy), the
+        // way `kasy upgrade` derives it — otherwise npm targets its default global
+        // prefix and leaves the real copy in place. Quote it so a path with
+        // spaces (C:\Users\John Silva\.kasy) survives shell:true.
+        const segs = __dirname.split(path.sep);
+        const nm = segs.lastIndexOf('node_modules');
+        let prefix = null;
+        if (nm > 0) {
+          let p = segs.slice(0, nm);
+          if (p[p.length - 1] === 'lib') p = p.slice(0, -1);
+          prefix = p.join(path.sep) || null;
+        }
+        const quote = (s) => `"${s}"`;
+        let cmd = 'npm uninstall -g kasy-cli';
+        if (prefix) cmd += ` --prefix ${quote(prefix)}`;
+        const result = spawnSync(cmd, { stdio: 'inherit', shell: true });
         if (result.status === 0) {
           console.log('\n' + kleur.green('✓ ' + t('cli.command.uninstall.done')) + '\n');
         } else {

package/lib/utils/flutter-install.js

@@ -43,12 +43,24 @@ $ProgressPreference = 'SilentlyContinue'
 $dest = Join-Path $env:LOCALAPPDATA 'flutter'
 $bin = Join-Path $dest 'bin'
 
+function Sync-Path {
+  # Pull the persistent PATH (Machine + User) into THIS session so a tool just
+  # installed by winget (Git) becomes visible right away.
+  $m = [Environment]::GetEnvironmentVariable('Path', 'Machine')
+  $u = [Environment]::GetEnvironmentVariable('Path', 'User')
+  $env:Path = (@($m, $u) | Where-Object { $_ }) -join ';'
+}
+
 # 1. Git — Flutter uses it internally and won't run without it.
 if (-not (Get-Command git -ErrorAction SilentlyContinue)) {
   if (Get-Command winget -ErrorAction SilentlyContinue) {
     winget install --id Git.Git -e --source winget --silent --accept-source-agreements --accept-package-agreements --disable-interactivity | Out-Null
+    Sync-Path
   }
 }
+if (-not (Get-Command git -ErrorAction SilentlyContinue)) {
+  throw 'Git is required for Flutter but is not available. Install Git and run this again.'
+}
 
 # 2. Flutter SDK — download + unzip, unless it's already there.
 if (-not (Test-Path (Join-Path $bin 'flutter.bat'))) {
@@ -67,8 +79,21 @@ if (-not (Test-Path (Join-Path $bin 'flutter.bat'))) {
   [System.IO.Compression.ZipFile]::ExtractToDirectory($zip, $env:LOCALAPPDATA)
   Remove-Item $zip -Force -ErrorAction SilentlyContinue
 }
+if (-not (Test-Path (Join-Path $bin 'flutter.bat'))) {
+  throw 'Flutter download/extract did not produce flutter.bat.'
+}
+
+# 3. Make flutter usable in THIS session and warm it up. The very first flutter
+#    command downloads the bundled Dart SDK (a few hundred MB), which can take
+#    minutes — doing it here, inside the installer, keeps the caller's follow-up
+#    "flutter --version" check fast instead of timing out on the cold first run.
+if ($env:Path -notlike "*$bin*") { $env:Path = "$bin;$env:Path" }
+& (Join-Path $bin 'flutter.bat') --version 2>&1 | Out-Null
+if ($LASTEXITCODE -ne 0) {
+  throw 'Flutter was installed but its first run failed (Dart SDK bootstrap). Check your internet connection and run this again.'
+}
 
-# 3. Persist flutter\\bin on the User PATH so every future terminal finds it.
+# 4. Persist flutter\\bin on the User PATH so every future terminal finds it.
 $userPath = [Environment]::GetEnvironmentVariable('Path', 'User')
 if (-not $userPath) { $userPath = '' }
 if (($userPath -split ';') -notcontains $bin) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kasy-cli",
-  "version": "1.23.0",
+  "version": "1.25.0",
   "description": "CLI for scaffolding production-ready Flutter SaaS apps with Firebase, Supabase, or API REST backends.",
   "bin": {
     "kasy": "./bin/kasy.js"

package/templates/firebase/lib/components/kasy_card.dart

@@ -119,6 +119,10 @@ class KasyCard extends StatelessWidget {
         onPressed: onTap!,
         semanticLabel: semanticLabel ?? 'Card',
         clipBorderRadius: resolvedRadius,
+        // A tappable card is an actionable control, so make it a keyboard
+        // tab-stop with the standard focus ring (matches buttons/links).
+        focusable: true,
+        focusBorderRadius: resolvedRadius,
         child: margined,
       );
     }

package/templates/firebase/lib/components/kasy_sidebar.dart

@@ -579,6 +579,8 @@ class _KasySidebarState extends State<KasySidebar> {
       borderRadius: BorderRadius.circular(_kToggleSize / 2),
       hoverColor: c.activeBg,
       pressColor: c.textActive,
+      focusable: true,
+      focusGapColor: c.bg,
       onTap: _toggleCollapse,
       child: Container(
         width: _kToggleSize,
@@ -746,6 +748,7 @@ class _KasySidebarState extends State<KasySidebar> {
         hoverColor: c.activeBg,
         pressColor: c.textActive,
         focusable: true,
+        focusGapColor: c.bg,
         onTap: widget.onProfileTap ?? () {},
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 8),
@@ -877,6 +880,7 @@ class _KasySidebarState extends State<KasySidebar> {
         hoverColor: c.activeBg,
         pressColor: c.textActive,
         focusable: true,
+        focusGapColor: c.bg,
         onTap: onTap,
         child: Container(
           constraints: const BoxConstraints(minHeight: _kItemMinH),
@@ -947,6 +951,7 @@ class _KasySidebarState extends State<KasySidebar> {
           hoverColor: c.activeBg,
           pressColor: c.textActive,
           focusable: true,
+          focusGapColor: c.bg,
           onTap: () => _activateItem(item.id),
           child: Container(
             constraints: const BoxConstraints(minHeight: _kItemMinH),
@@ -1068,6 +1073,8 @@ class _KasySidebarState extends State<KasySidebar> {
             borderRadius: BorderRadius.circular(_kItemRadius),
             hoverColor: c.activeBg,
             pressColor: c.textActive,
+            focusable: true,
+            focusGapColor: c.bg,
             onTap: () => _activateSubItem(label),
             child: Container(
               height: _kSubItemH,
@@ -1295,6 +1302,8 @@ class _ProTooltipIconState extends State<_ProTooltipIcon> {
             borderRadius: BorderRadius.circular(_kItemRadius),
             hoverColor: widget.activeBg,
             pressColor: widget.activeBg,
+            focusable: true,
+            focusGapColor: widget.colors.bg,
             onTap: widget.onTap,
             child: Container(
               padding: const EdgeInsets.symmetric(

package/templates/firebase/lib/components/kasy_tabs.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Data model

package/templates/firebase/lib/core/bottom_menu/bottom_menu.dart

@@ -152,20 +152,27 @@ class BottomMenu extends StatelessWidget {
   }
 }
 
-/// Owns the sidebar's keyboard [FocusScope] and keeps the initial Tab focus
-/// anchored on the sidebar — on every screen, like Stripe/Linear.
+/// Keeps the initial keyboard Tab focus anchored on the sidebar — on every
+/// screen, like Stripe/Linear.
 ///
 /// Why this exists: Bart renders each page inside a nested [Navigator]
 /// (see bart's nested_navigator.dart), which has its OWN FocusScope and claims
 /// the primary focus the moment a route mounts. A plain `autofocus` on a sidebar
 /// item loses that race — the Navigator overwrites it in the same frame.
 ///
-/// The fix is a post-frame callback (runs AFTER the Navigator has claimed focus)
-/// that hands focus back to this sidebar scope. We focus the SCOPE, not a
-/// specific item, so the very first Tab lands on the first item (no item is
-/// skipped). It re-runs whenever [currentItem] changes (a tab navigation) so a
-/// fresh screen also starts at the sidebar. The ring still only paints during
-/// keyboard navigation, so this is invisible to mouse/touch users.
+/// The fix is a tiny non-traversable [Focus] anchor inside the sidebar. A
+/// post-frame callback (runs AFTER the Navigator has claimed focus) moves focus
+/// to that anchor, pulling the primary focus out of the Navigator's scope and
+/// back onto the sidebar. Because the anchor sets `skipTraversal: true`, it is
+/// skipped by Tab, so the very first Tab lands on the first real sidebar item
+/// and then flows on to the header and content — nothing is trapped. (A
+/// [FocusScope] would have worked for the anchoring, but it adds a traversal
+/// boundary that wraps Tab back to the sidebar's start instead of moving on to
+/// the content, which is the opposite of what we want.)
+///
+/// It re-anchors whenever [currentItem] changes (a tab navigation) so a fresh
+/// screen also starts at the sidebar. The ring still only paints during keyboard
+/// navigation, so this is invisible to mouse/touch users.
 class _FocusableSidebar extends StatefulWidget {
   final Widget child;
   final ValueNotifier<int> currentItem;
@@ -177,7 +184,10 @@ class _FocusableSidebar extends StatefulWidget {
 }
 
 class _FocusableSidebarState extends State<_FocusableSidebar> {
-  final FocusScopeNode _scope = FocusScopeNode(debugLabel: 'sidebarScope');
+  final FocusNode _anchor = FocusNode(
+    debugLabel: 'sidebarFocusAnchor',
+    skipTraversal: true,
+  );
 
   @override
   void initState() {
@@ -199,26 +209,28 @@ class _FocusableSidebarState extends State<_FocusableSidebar> {
   // which claims focus for its own scope while the route is mounting.
   void _anchorFocus() {
     WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (!mounted) return;
-      // Only seize focus when nothing inside the sidebar already holds it, so a
-      // keyboard user mid-navigation in the sidebar isn't yanked back to start.
-      if (_scope.hasFocus) return;
-      _scope.requestFocus();
+      if (mounted) _anchor.requestFocus();
     });
   }
 
   @override
   void dispose() {
     widget.currentItem.removeListener(_anchorFocus);
-    _scope.dispose();
+    _anchor.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
-    return FocusScope(
-      node: _scope,
-      child: FocusTraversalGroup(child: widget.child),
+    return FocusTraversalGroup(
+      // The anchor is a zero-size sibling so it never affects the sidebar's
+      // layout; it exists only to hold the initial keyboard focus (see above).
+      child: Stack(
+        children: [
+          widget.child,
+          Focus(focusNode: _anchor, child: const SizedBox.shrink()),
+        ],
+      ),
     );
   }
 }

package/templates/firebase/lib/core/widgets/kasy_focus_ring.dart

@@ -27,12 +27,20 @@ class KasyFocusRing extends StatefulWidget {
   /// When false the ring never takes focus or paints (disabled controls).
   final bool enabled;
 
+  /// Colour of the hair-line gap between the control and the ring. Defaults to
+  /// [KasyColors.background] (correct on full-page backgrounds). Pass the actual
+  /// surface colour the control sits on (e.g. the sidebar/header `surface`) so
+  /// the gap blends in instead of painting a visible halo — this matters in dark
+  /// mode, where `background` is darker than `surface`.
+  final Color? gapColor;
+
   const KasyFocusRing({
     super.key,
     required this.child,
     required this.borderRadius,
     this.onActivate,
     this.enabled = true,
+    this.gapColor,
   });
 
   @override
@@ -57,7 +65,7 @@ class _KasyFocusRingState extends State<KasyFocusRing> {
     // A hair-line gap in the canvas colour lifts the ring just off the control
     // so it reads as a crisp outline (same focus language as KasyTextField) and
     // stays visible even on primary-coloured buttons (e.g. the chat send orb).
-    final Color gapColor = context.colors.background;
+    final Color gapColor = widget.gapColor ?? context.colors.background;
     final VoidCallback? onActivate = widget.onActivate;
 
     return FocusableActionDetector(

package/templates/firebase/lib/core/widgets/kasy_hover.dart

@@ -50,6 +50,7 @@ class KasyHover extends ConsumerStatefulWidget {
     this.hoverColor,
     this.pressColor,
     this.focusable = false,
+    this.focusGapColor,
   });
 
   final Widget child;
@@ -112,6 +113,12 @@ class KasyHover extends ConsumerStatefulWidget {
   /// call sites stay plain, non-focusable rows.
   final bool focusable;
 
+  /// Gap colour forwarded to the focus ring (only used when [focusable]). Pass
+  /// the surface colour the row sits on so the keyboard ring's hair-line gap
+  /// blends in instead of showing a darker halo (notably in dark mode). When
+  /// null the ring falls back to [KasyColors.background].
+  final Color? focusGapColor;
+
   @override
   ConsumerState<KasyHover> createState() => _KasyHoverState();
 }
@@ -209,6 +216,7 @@ class _KasyHoverState extends ConsumerState<KasyHover> {
         ? KasyFocusRing(
             borderRadius: widget.borderRadius,
             onActivate: widget.onTap,
+            gapColor: widget.focusGapColor,
             child: content,
           )
         : content;

package/templates/firebase/lib/core/widgets/kasy_pressable_depth.dart

@@ -6,6 +6,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/core/haptics/haptic_feedback_notifier.dart';
+import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 
 /// Press-in with slight overshoot-back (same tactility as [KasyAlert] actions).
 ///
@@ -26,6 +28,22 @@ class KasyPressableDepth extends ConsumerStatefulWidget {
   /// If false, does not call [HapticFeedback.lightImpact] on tap.
   final bool hapticFeedbackEnabled;
 
+  /// When true, the control becomes a keyboard tab-stop: it is wrapped in a
+  /// [KasyFocusRing] so Tab shows the focus outline and Enter/Space activate it.
+  /// Defaults to false because [KasyButton] already wraps its own ring around
+  /// the child — turning this on there would paint a second ring. Use it for
+  /// direct, standalone uses (e.g. a text link) that need keyboard access.
+  final bool focusable;
+
+  /// Corner radius for the focus ring (only used when [focusable]). Defaults to
+  /// [clipBorderRadius] when set, otherwise a small radius hugging the visual.
+  final BorderRadius? focusBorderRadius;
+
+  /// Gap colour for the focus ring (only used when [focusable]). Pass the
+  /// surface the control sits on so the ring's hair-line gap blends in instead
+  /// of showing a halo (notably in dark mode). Null falls back to `background`.
+  final Color? focusGapColor;
+
   const KasyPressableDepth({
     super.key,
     required this.child,
@@ -34,6 +52,9 @@ class KasyPressableDepth extends ConsumerStatefulWidget {
     this.pressOverlayColor,
     this.clipBorderRadius,
     this.hapticFeedbackEnabled = true,
+    this.focusable = false,
+    this.focusBorderRadius,
+    this.focusGapColor,
   });
 
   @override
@@ -142,6 +163,21 @@ class _KasyPressableDepthState extends ConsumerState<KasyPressableDepth>
 
   @override
   Widget build(BuildContext context) {
+    // The ring wraps the scaled visual (not the 44px tap target) so it hugs the
+    // control's shape, and sits outside Transform.scale so it doesn't pulse with
+    // the press. Keyboard activation is wired to the same handler as the tap.
+    Widget visual = _wrapScaledChild(widget.child);
+    if (widget.focusable) {
+      visual = KasyFocusRing(
+        onActivate: _handleTap,
+        borderRadius: widget.focusBorderRadius ??
+            widget.clipBorderRadius ??
+            BorderRadius.circular(KasyRadius.sm),
+        gapColor: widget.focusGapColor,
+        child: visual,
+      );
+    }
+
     final Widget inner = Semantics(
       button: true,
       enabled: true,
@@ -153,7 +189,7 @@ class _KasyPressableDepthState extends ConsumerState<KasyPressableDepth>
         onTap: _handleTap,
         child: ConstrainedBox(
           constraints: const BoxConstraints(minWidth: 44, minHeight: 44),
-          child: Center(child: _wrapScaledChild(widget.child)),
+          child: Center(child: visual),
         ),
       ),
     );

package/templates/firebase/lib/features/authentication/ui/recover_password_page.dart

@@ -124,6 +124,7 @@ class _BackToSigninPrompt extends StatelessWidget {
                   context.go('/signin');
                 }
               },
+              focusable: true,
               child: Text(
                 t.auth.recover.signin_link,
                 style: context.textTheme.bodyMedium?.copyWith(

package/templates/firebase/lib/features/authentication/ui/signin_page.dart

@@ -98,11 +98,15 @@ class SigninPage extends ConsumerWidget {
                                 FocusScope.of(context).unfocus();
                                 ref.read(signinStateProvider.notifier).signin();
                               },
-                        labelTrailing: GestureDetector(
-                          onTap: () => context.push('/recover_password'),
-                          child: Text(
-                            t.auth.signin.forgot_password,
-                            style: forgotPasswordStyle,
+                        labelTrailing: KasyFocusRing(
+                          onActivate: () => context.push('/recover_password'),
+                          borderRadius: BorderRadius.circular(KasyRadius.sm),
+                          child: GestureDetector(
+                            onTap: () => context.push('/recover_password'),
+                            child: Text(
+                              t.auth.signin.forgot_password,
+                              style: forgotPasswordStyle,
+                            ),
                           ),
                         ),
                         validator: (value) {
@@ -191,6 +195,7 @@ class _SignupPrompt extends StatelessWidget {
             KasyPressableDepth(
               semanticLabel: t.auth.signin.signup_link,
               onPressed: () => context.pushReplacement('/signup'),
+              focusable: true,
               child: Text(
                 t.auth.signin.signup_link,
                 style: context.textTheme.bodyMedium?.copyWith(

package/templates/firebase/lib/features/authentication/ui/signup_page.dart

@@ -180,6 +180,7 @@ class _SigninPrompt extends StatelessWidget {
             KasyPressableDepth(
               semanticLabel: t.auth.signup.signin_link,
               onPressed: () => context.pushReplacement('/signin'),
+              focusable: true,
               child: Text(
                 t.auth.signup.signin_link,
                 style: context.textTheme.bodyMedium?.copyWith(

package/templates/firebase/lib/features/settings/settings_page.dart

@@ -12,6 +12,7 @@ import 'package:kasy_kit/core/security/biometric_ui_bundle.dart';
 import 'package:kasy_kit/core/states/logout_action.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/features/settings/ui/components/avatar_component.dart';
 import 'package:kasy_kit/features/settings/ui/components/delete_user_component.dart';
@@ -329,7 +330,18 @@ class ProfileTile extends StatelessWidget {
       child: ClipRRect(
         borderRadius: KasyRadius.smBorderRadius,
         child: onTap != null
-            ? InkWell(onTap: onTap, child: content)
+            ? KasyFocusRing(
+                onActivate: onTap,
+                borderRadius: KasyRadius.smBorderRadius,
+                gapColor: context.colors.surface,
+                // The InkWell keeps its tap ripple but yields focus to the ring,
+                // so the keyboard outline matches every other Kasy control.
+                child: InkWell(
+                  canRequestFocus: false,
+                  onTap: onTap,
+                  child: content,
+                ),
+              )
             : content,
       ),
     );
@@ -547,6 +559,8 @@ class _NavTile extends StatelessWidget {
       borderRadius: KasyRadius.smBorderRadius,
       hoverColor: c.surfaceNeutralSoft,
       pressColor: c.onSurface,
+      focusable: true,
+      focusGapColor: c.surface,
       onTap: onTap,
       child: Container(
         padding: const EdgeInsets.symmetric(
@@ -770,6 +784,8 @@ class _LogoutRow extends StatelessWidget {
     return KasyHover(
       borderRadius: KasyRadius.smBorderRadius,
       pressColor: context.colors.error,
+      focusable: true,
+      focusGapColor: context.colors.surface,
       onTap: onTap,
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),

package/templates/firebase/lib/features/settings/ui/components/language_switcher.dart

@@ -5,6 +5,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:kasy_kit/core/home_widgets/home_widget_mywidget_service.dart';
 import 'package:kasy_kit/core/shared_preferences/shared_preferences.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
+import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
 import 'package:kasy_kit/i18n/app_locale_display.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
@@ -17,31 +18,40 @@ class LanguageSwitcher extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final AppLocale current = TranslationProvider.of(context).locale;
-    return InkWell(
-      onTap: () => _showLanguagePicker(context, ref, current),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
-        child: Row(
-          children: <Widget>[
-            Icon(KasyIcons.language, size: 21, color: context.colors.onSurface),
-            const SizedBox(width: KasySpacing.sm),
-            Expanded(
-              child: Text(
-                context.t.settings.language_title,
-                style: context.textTheme.titleMedium?.copyWith(
-                  color: context.colors.onSurface,
+    return KasyFocusRing(
+      onActivate: () => _showLanguagePicker(context, ref, current),
+      borderRadius: KasyRadius.smBorderRadius,
+      child: InkWell(
+        canRequestFocus: false,
+        onTap: () => _showLanguagePicker(context, ref, current),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+          child: Row(
+            children: <Widget>[
+              Icon(
+                KasyIcons.language,
+                size: 21,
+                color: context.colors.onSurface,
+              ),
+              const SizedBox(width: KasySpacing.sm),
+              Expanded(
+                child: Text(
+                  context.t.settings.language_title,
+                  style: context.textTheme.titleMedium?.copyWith(
+                    color: context.colors.onSurface,
+                  ),
                 ),
               ),
-            ),
-            Text(
-              current.nativeName,
-              style: context.textTheme.bodyMedium?.copyWith(
-                color: context.colors.muted,
+              Text(
+                current.nativeName,
+                style: context.textTheme.bodyMedium?.copyWith(
+                  color: context.colors.muted,
+                ),
               ),
-            ),
-            const SizedBox(width: KasySpacing.xs),
-            const SettingsListChevron(),
-          ],
+              const SizedBox(width: KasySpacing.xs),
+              const SettingsListChevron(),
+            ],
+          ),
         ),
       ),
     );
@@ -147,36 +157,41 @@ class _LocaleOptionTile extends StatelessWidget {
     final Color primary = context.colors.primary;
     final Color fg = isSelected ? primary : context.colors.onSurface;
 
-    return InkWell(
-      onTap: onTap,
+    return KasyFocusRing(
+      onActivate: onTap,
       borderRadius: BorderRadius.circular(KasyRadius.sm),
-      child: Padding(
-        padding: const EdgeInsets.symmetric(
-          horizontal: KasySpacing.xs,
-          vertical: KasySpacing.smd,
-        ),
-        child: Row(
-          children: <Widget>[
-            Expanded(
-              child: Text(
-                locale.nativeName,
-                style: context.textTheme.bodyLarge?.copyWith(
-                  color: fg,
-                  fontWeight:
-                      isSelected ? FontWeight.w600 : FontWeight.w400,
+      child: InkWell(
+        canRequestFocus: false,
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(KasyRadius.sm),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(
+            horizontal: KasySpacing.xs,
+            vertical: KasySpacing.smd,
+          ),
+          child: Row(
+            children: <Widget>[
+              Expanded(
+                child: Text(
+                  locale.nativeName,
+                  style: context.textTheme.bodyLarge?.copyWith(
+                    color: fg,
+                    fontWeight:
+                        isSelected ? FontWeight.w600 : FontWeight.w400,
+                  ),
                 ),
               ),
-            ),
-            if (isSelected)
-              Container(
-                width: 10,
-                height: 10,
-                decoration: BoxDecoration(
-                  color: primary,
-                  shape: BoxShape.circle,
+              if (isSelected)
+                Container(
+                  width: 10,
+                  height: 10,
+                  decoration: BoxDecoration(
+                    color: primary,
+                    shape: BoxShape.circle,
+                  ),
                 ),
-              ),
-          ],
+            ],
+          ),
         ),
       ),
     );

package/templates/firebase/lib/features/settings/ui/widgets/settings_tile.dart

@@ -157,6 +157,8 @@ class SettingsTile extends StatelessWidget {
       onTap: onTap,
       hoverEnabled: false,
       pressEnabled: false,
+      focusable: true,
+      borderRadius: KasyRadius.smBorderRadius,
       semanticLabel: title,
       padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
       child: Row(