fix: focus

libs/theme-core/src/theming/theming.scss

@@ -139,6 +139,13 @@
   }
 }
 
+@mixin focusable-within() {
+  html.keyboard-mode &:has(:focus-visible) {
+    outline: 5px solid var(--focus-color);
+    z-index: 1;
+  }
+}
+
 @function modifier-hover($color: accent, $palette: bg) {
   @return rgba(var(--color-#{$palette}-#{$color}-rgb), var(--hover-opacity));
 }

libs/theme-default/src/date-picker/date-picker.scss

@@ -4,12 +4,17 @@
 
 @mixin theme() {
   xui-date-picker {
-    display: flex;
+    width: fit-content;
   }
 
   .x-datepicker {
+    @include core.focusable();
     @include input-base.input($border-radius);
 
+    .x-icon {
+      font-size: 20px;
+    }
+
     &-popup {
       width: fit-content;
       display: flex;

libs/theme-default/src/input/input.scss

@@ -1,8 +1,10 @@
 @use 'variables' as *;
 @use '../mixins/input-base';
+@use '@xui/theme-core' as core;
 
 @mixin theme() {
   .x-input {
+    @include core.focusable-within();
     @include input-base.input($border-radius);
     @include input-base.error();
   }

libs/theme-default/src/mixins/input-base.scss

@@ -8,7 +8,6 @@
   box-sizing: border-box;
 
   @include core.border-radius($border-radius);
-  @include core.focusable();
 
   input {
     margin: 0;

libs/theme-default/src/select/select.scss

@@ -47,6 +47,10 @@
       border: 1px solid var(--color-bg-tertiary);
       border-top: none;
 
+      &:focus-visible {
+        outline: none;
+      }
+
       @include core.border-bottom-radius-only($border-radius);
       @include core.fill(primary);
     }

libs/theme-default/src/textarea/textarea.scss

@@ -8,7 +8,7 @@
     position: relative;
 
     @include core.border-radius($border-radius);
-    @include core.focusable();
+    @include core.focusable-within();
 
     textarea {
       width: 100%;

libs/xui/src/button/button.module.ts

@@ -2,9 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { XuiButton } from './button';
 import { XuiButtonGroup } from './button-group';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, XuiFocusModule],
   declarations: [XuiButton, XuiButtonGroup],
   exports: [XuiButton, XuiButtonGroup]
 })

libs/xui/src/checkbox/checkbox.ts

@@ -4,10 +4,11 @@ import { convertToBoolean } from '../utils';
 import { CheckboxColor } from './checkbox.types';
 import { CHECKBOX_MODULE, XuiConfigService } from '../config';
 import { CommonModule } from '@angular/common';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @Component({
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, XuiFocusModule],
   selector: 'xui-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<div class="x-checkbox-box" [tabindex]="_disabled() ? -1 : 0" [class.x-checkbox-checked]="_value()">

libs/xui/src/context-menu/context-menu.module.ts

@@ -5,10 +5,11 @@ import { CdkMenuModule } from '@angular/cdk/menu';
 import { A11yModule } from '@angular/cdk/a11y';
 import { XuiMenuTriggerFor } from './menu-trigger-for';
 import { XuiContextMenuTriggerFor } from './context-menu-trigger-for';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
   declarations: [XuiContextMenu, XuiMenuTriggerFor, XuiContextMenuTriggerFor],
-  imports: [CommonModule, CdkMenuModule, A11yModule],
+  imports: [CommonModule, CdkMenuModule, A11yModule, XuiFocusModule],
   exports: [XuiContextMenu, CdkMenuModule, XuiMenuTriggerFor, XuiContextMenuTriggerFor]
 })
 export class XuiContextMenuModule {}

libs/xui/src/date-picker/date-picker.html

@@ -1,5 +1,5 @@
 <div [ngClass]="_styles()" [tabindex]="_disabled() ? -1 : 0" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
-  <xui-input
+  <input
     tabindex="-1"
     type="text"
     readOnly

libs/xui/src/date-picker/date-picker.ts

@@ -19,10 +19,11 @@ import { CommonModule } from '@angular/common';
 import { XuiIcon } from '../icon';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { A11yModule } from '@angular/cdk/a11y';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @Component({
   standalone: true,
-  imports: [CommonModule, XuiIcon, XuiInputModule, OverlayModule, A11yModule, ReactiveFormsModule],
+  imports: [CommonModule, XuiIcon, XuiInputModule, OverlayModule, A11yModule, ReactiveFormsModule, XuiFocusModule],
   selector: 'xui-date-picker',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: 'date-picker.html',

libs/xui/src/drawer/drawer.module.ts

@@ -6,10 +6,11 @@ import { XuiDrawerHeaderTemplate } from './drawer-header-template';
 import { XuiDrawerFooterTemplate } from './drawer-footer-template';
 import { PortalModule } from '@angular/cdk/portal';
 import { XuiIcon } from '../icon';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
   declarations: [XuiDrawer, XuiDrawerItemTemplate, XuiDrawerHeaderTemplate, XuiDrawerFooterTemplate],
-  imports: [CommonModule, PortalModule, XuiIcon],
+  imports: [CommonModule, PortalModule, XuiIcon, XuiFocusModule],
   exports: [XuiDrawer, XuiDrawerItemTemplate, XuiDrawerHeaderTemplate, XuiDrawerFooterTemplate]
 })
 export class XuiDrawerModule {}

libs/xui/src/image-upload/image-upload.module.ts

@@ -7,10 +7,19 @@ import { XuiButtonModule } from '../button';
 import { TranslateModule } from '@ngx-translate/core';
 import { XuiImageUploadCropper } from './image-upload-cropper';
 import { XuiIcon } from '../icon';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
   declarations: [XuiImageUpload, XuiImageUploadCropper],
-  imports: [CommonModule, ImageCropperComponent, DialogModule, XuiIcon, XuiButtonModule, TranslateModule.forChild()],
+  imports: [
+    CommonModule,
+    ImageCropperComponent,
+    DialogModule,
+    XuiIcon,
+    XuiButtonModule,
+    TranslateModule.forChild(),
+    XuiFocusModule
+  ],
   exports: [XuiImageUpload]
 })
 export class XuiImageUploadModule {}

libs/xui/src/input/input.html

@@ -1,7 +1,7 @@
-<div [ngClass]="_styles()" [tabindex]="_disabled() ? -1 : 0">
+<div [ngClass]="_styles()">
   <ng-content select="[xuiPrefix]" />
   <input
-    tabindex="-1"
+    [tabindex]="_disabled() ? -1 : 0"
     [disabled]="_disabled()"
     [readOnly]="readOnly()"
     [type]="type()"

libs/xui/src/input/input.module.ts

@@ -5,9 +5,10 @@ import { XuiInputGroup } from './input-group';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormsModule } from '@angular/forms';
 import { XuiInputAddon } from './input-addon';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, TranslateModule.forChild()],
+  imports: [CommonModule, FormsModule, TranslateModule.forChild(), XuiFocusModule],
   declarations: [XuiInput, XuiInputGroup, XuiInputAddon],
   exports: [XuiInput, XuiInputGroup, XuiInputAddon]
 })

libs/xui/src/menu/menu.module.ts

@@ -6,9 +6,10 @@ import { XuiMenuGroup } from './menu-group';
 import { XuiMenuItem } from './menu-item';
 import { RouterModule } from '@angular/router';
 import { XuiIcon } from '../icon';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
-  imports: [CommonModule, RouterModule, XuiIcon],
+  imports: [CommonModule, RouterModule, XuiIcon, XuiFocusModule],
   declarations: [XuiMenu, XuiSubmenu, XuiMenuGroup, XuiMenuItem],
   exports: [XuiMenu, XuiSubmenu, XuiMenuGroup, XuiMenuItem]
 })

libs/xui/src/panelbar/panelbar.module.ts

@@ -7,10 +7,11 @@ import { PortalModule } from '@angular/cdk/portal';
 import { XuiPanelBarItemTitle } from './panelbar-item-title';
 import { XuiPanelBarItemContent } from './panelbar-item-content';
 import { XuiIcon } from '../icon';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
   declarations: [XuiPanelBar, XuiPanelBarItem, XuiPanelBarItemTemplate, XuiPanelBarItemTitle, XuiPanelBarItemContent],
   exports: [XuiPanelBar, XuiPanelBarItem, XuiPanelBarItemTemplate, XuiPanelBarItemTitle, XuiPanelBarItemContent],
-  imports: [CommonModule, PortalModule, XuiIcon]
+  imports: [CommonModule, PortalModule, XuiIcon, XuiFocusModule]
 })
 export class XuiPanelBarModule {}

libs/xui/src/popover/popover.module.ts

@@ -4,10 +4,11 @@ import { XuiPopover } from './popover';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { XuiPopoverTriggerFor } from './popover-trigger-for';
 import { A11yModule } from '@angular/cdk/a11y';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
   declarations: [XuiPopover, XuiPopoverTriggerFor],
   exports: [XuiPopover, XuiPopoverTriggerFor],
-  imports: [CommonModule, OverlayModule, A11yModule]
+  imports: [CommonModule, OverlayModule, A11yModule, XuiFocusModule]
 })
 export class XuiPopoverModule {}

libs/xui/src/radio-list/radio-list.module.ts

@@ -3,10 +3,11 @@ import { CommonModule } from '@angular/common';
 import { XuiRadioList } from './radio-list';
 import { XuiRadioOption } from './radio-option';
 import { XuiIcon } from '../icon';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
   declarations: [XuiRadioList, XuiRadioOption],
-  imports: [CommonModule, XuiIcon],
+  imports: [CommonModule, XuiIcon, XuiFocusModule],
   exports: [XuiRadioList, XuiRadioOption]
 })
 export class XuiRadioListModule {}

libs/xui/src/radio/radio.module.ts

@@ -4,10 +4,11 @@ import { XuiRadio } from './radio';
 import { XuiRadioGroup } from './radio-group';
 import { TranslateModule } from '@ngx-translate/core';
 import { XuiIcon } from '../icon';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
   declarations: [XuiRadio, XuiRadioGroup],
-  imports: [CommonModule, XuiIcon, TranslateModule.forChild()],
+  imports: [CommonModule, XuiIcon, TranslateModule.forChild(), XuiFocusModule],
   exports: [XuiRadio, XuiRadioGroup]
 })
 export class XuiRadioModule {}

libs/xui/src/select/option.ts

@@ -21,7 +21,6 @@ import { XUI_SELECT_ACCESSOR, SelectAccessor, SelectValue } from './select.types
     '[class]': '"x-select-option-" + _select.color',
     '[class.x-select-option-selected]': '_isSelected()',
     '[class.x-select-option-disabled]': 'disabled()',
-    '[tabIndex]': 'disabled() ? -1 : 0',
     '(click)': '_click()'
   }
 })

libs/xui/src/select/select.html

@@ -3,7 +3,6 @@
   [tabindex]="_disabled() ? -1 : 0"
   (click)="open()"
   cdkOverlayOrigin
-  [cdkTrapFocus]="_isOpened()"
   #trigger="cdkOverlayOrigin"
   (keydown.enter)="_isOpened.set(true)"
   (keydown.space)="_isOpened.set(true)"
@@ -15,14 +14,15 @@
 <ng-template
   cdkConnectedOverlay
   cdkConnectedOverlayHasBackdrop
+  [cdkConnectedOverlayLockPosition]="true"
   [cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent'"
   [cdkConnectedOverlayOrigin]="trigger"
   [cdkConnectedOverlayOpen]="_isOpened()"
   [cdkConnectedOverlayWidth]="_width"
   (backdropClick)="_isOpened.set(false)"
   (detach)="_isOpened.set(false)"
 >
-  <div class="x-select-options">
+  <div class="x-select-options" [tabindex]="0" [cdkTrapFocus]="_isOpened()" [cdkTrapFocusAutoCapture]="true">
     @for (item of items(); track item.value) {
       <xui-option [value]="item.value">{{ item.label | translate }}</xui-option>
     }

libs/xui/src/select/select.module.ts

@@ -8,9 +8,19 @@ import { XuiOption } from './option';
 import { XuiIcon } from '../icon';
 import { XuiDecagram } from '../decagram';
 import { A11yModule } from '@angular/cdk/a11y';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, A11yModule, OverlayModule, XuiIcon, XuiDecagram, TranslateModule.forChild()],
+  imports: [
+    CommonModule,
+    FormsModule,
+    A11yModule,
+    OverlayModule,
+    XuiIcon,
+    XuiDecagram,
+    TranslateModule.forChild(),
+    XuiFocusModule
+  ],
   declarations: [XuiSelect, XuiOption],
   exports: [XuiSelect, XuiOption]
 })

libs/xui/src/settings/settings.module.ts

@@ -7,10 +7,19 @@ import { XuiButtonModule } from '../button';
 import { A11yModule } from '@angular/cdk/a11y';
 import { XuiIcon } from '../icon';
 import { SaveResetSnackbar } from './settings-snackbar';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
   declarations: [XuiSettings, SaveResetSnackbar],
-  imports: [CommonModule, XuiIcon, XuiButtonModule, PortalModule, A11yModule, TranslateModule.forChild()],
+  imports: [
+    CommonModule,
+    XuiIcon,
+    XuiButtonModule,
+    PortalModule,
+    A11yModule,
+    TranslateModule.forChild(),
+    XuiFocusModule
+  ],
   exports: [XuiSettings]
 })
 export class XuiSettingsModule {}

libs/xui/src/slider/slider.ts

@@ -17,10 +17,11 @@ import { SliderColor, SliderMark } from './slider.types';
 import { CommonModule } from '@angular/common';
 import { XuiTooltip, XuiTooltipModule } from '../tooltip';
 import { DragDropModule } from '@angular/cdk/drag-drop';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @Component({
   standalone: true,
-  imports: [CommonModule, FormsModule, XuiTooltipModule, DragDropModule],
+  imports: [CommonModule, FormsModule, XuiTooltipModule, DragDropModule, XuiFocusModule],
   selector: 'xui-slider',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: 'slider.html',

libs/xui/src/snack-bar/snack-bar.module.ts

@@ -6,9 +6,18 @@ import { SimpleSnackBar } from './simple-snack-bar';
 import { XuiButtonModule } from '../button';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { XuiSnackBar } from './snack-bar';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
-  imports: [CommonModule, XuiButtonModule, OverlayModule, PortalModule, SimpleSnackBar, TranslateModule.forChild()],
+  imports: [
+    CommonModule,
+    XuiButtonModule,
+    OverlayModule,
+    PortalModule,
+    SimpleSnackBar,
+    TranslateModule.forChild(),
+    XuiFocusModule
+  ],
   providers: [XuiSnackBar]
 })
 export class XuiSnackbarModule {}

libs/xui/src/switch/switch.ts

@@ -4,10 +4,11 @@ import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { SwitchColor } from './switch.types';
 import { CommonModule } from '@angular/common';
 import { XuiIcon } from '../icon';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @Component({
   standalone: true,
-  imports: [CommonModule, XuiIcon],
+  imports: [CommonModule, XuiIcon, XuiFocusModule],
   selector: 'xui-switch',
   changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: 'switch.html',

libs/xui/src/tabs/tab.module.ts

@@ -3,10 +3,11 @@ import { CommonModule } from '@angular/common';
 import { XuiTab } from './tab';
 import { XuiTabGroup } from './tab-group';
 import { TranslateModule } from '@ngx-translate/core';
+import { XuiFocusModule } from '../utils/focus.service';
 
 @NgModule({
   declarations: [XuiTab, XuiTabGroup],
-  imports: [CommonModule, TranslateModule.forChild()],
+  imports: [CommonModule, TranslateModule.forChild(), XuiFocusModule],
   exports: [XuiTab, XuiTabGroup]
 })
 export class XuiTabModule {}

libs/xui/src/textarea/textarea.html

@@ -1,4 +1,4 @@
-<div [ngClass]="_styles()" [class.x-textarea-error]="showError" [tabindex]="_disabled() ? -1 : 0">
+<div [ngClass]="_styles()" [class.x-textarea-error]="showError">
   <textarea
     [disabled]="_disabled()"
     [readOnly]="readOnly()"
@@ -7,6 +7,7 @@
     [rows]="rows()"
     [placeholder]="placeholder() ?? ''"
     [maxLength]="maxLength() ?? 524288"
+    [tabindex]="_disabled() ? -1 : 0"
   ></textarea>
 
   <div *ngIf="maxLength()" class="x-textarea-word-counter">{{ _worldCount() }}</div>