@foxeltech/angular-ui 0.2.0 → 0.3.0

package/index.d.ts

@@ -1,46 +1,46 @@
 import * as i0 from '@angular/core';
 import { OnDestroy, Injector, DestroyRef, ApplicationRef, OnInit, AfterViewInit, ChangeDetectorRef, Type, EventEmitter, Provider, ModuleWithProviders, TemplateRef, ViewContainerRef, ElementRef, RendererFactory2, OnChanges, SimpleChanges, AfterContentInit, QueryList, Renderer2, NgZone } from '@angular/core';
 import * as _foxeltech_angular_ui from '@foxeltech/angular-ui';
-import * as i52 from '@angular/material/paginator';
+import * as i53 from '@angular/material/paginator';
 import { MatPaginator } from '@angular/material/paginator';
-import * as i53 from '@angular/material/table';
+import * as i54 from '@angular/material/table';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { HttpClient, HttpEvent, HttpErrorResponse, HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
 import * as rxjs from 'rxjs';
 import { Observable, Subject } from 'rxjs';
-import * as i39 from '@angular/forms';
+import * as i40 from '@angular/forms';
 import { NgForm, ValidationErrors, NgControl, ControlValueAccessor } from '@angular/forms';
-import * as i55 from '@angular/material/dialog';
+import * as i56 from '@angular/material/dialog';
 import { MatDialogRef, MatDialog } from '@angular/material/dialog';
-import * as i40 from '@angular/router';
+import * as i41 from '@angular/router';
 import { ActivatedRouteSnapshot, RouterStateSnapshot, ResolveFn, CanActivate, Router } from '@angular/router';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
 import { EChartsOption, ECharts } from 'echarts';
-import * as i46 from 'ngx-vflow';
+import * as i47 from 'ngx-vflow';
 import { Node, Edge, Connection } from 'ngx-vflow';
-import * as i65 from '@angular/cdk/drag-drop';
+import * as i66 from '@angular/cdk/drag-drop';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import * as i38 from '@angular/common';
-import * as i41 from '@danielmoncada/angular-datetime-picker';
-import * as i42 from '@danielmoncada/angular-datetime-picker-moment-adapter';
-import * as i45 from '@dimaslz/ng-heroicons';
-import * as i47 from 'ngx-echarts';
-import * as i48 from '@angular/material/select';
-import * as i49 from '@angular/material/radio';
-import * as i50 from '@angular/material/button';
-import * as i51 from '@angular/material/icon';
-import * as i54 from '@angular/material/snack-bar';
-import * as i56 from '@angular/material/checkbox';
-import * as i57 from '@angular/material/card';
-import * as i58 from '@angular/material/datepicker';
-import * as i59 from '@angular/material/timepicker';
-import * as i60 from '@angular/material/badge';
-import * as i61 from '@angular/material/expansion';
-import * as i62 from '@angular/material/form-field';
-import * as i63 from '@angular/material/menu';
-import * as i64 from '@angular/material/tooltip';
+import * as i39 from '@angular/common';
+import * as i42 from '@danielmoncada/angular-datetime-picker';
+import * as i43 from '@danielmoncada/angular-datetime-picker-moment-adapter';
+import * as i46 from '@dimaslz/ng-heroicons';
+import * as i48 from 'ngx-echarts';
+import * as i49 from '@angular/material/select';
+import * as i50 from '@angular/material/radio';
+import * as i51 from '@angular/material/button';
+import * as i52 from '@angular/material/icon';
+import * as i55 from '@angular/material/snack-bar';
+import * as i57 from '@angular/material/checkbox';
+import * as i58 from '@angular/material/card';
+import * as i59 from '@angular/material/datepicker';
+import * as i60 from '@angular/material/timepicker';
+import * as i61 from '@angular/material/badge';
+import * as i62 from '@angular/material/expansion';
+import * as i63 from '@angular/material/form-field';
+import * as i64 from '@angular/material/menu';
+import * as i65 from '@angular/material/tooltip';
 
 declare abstract class BaseComponent implements OnDestroy {
     protected injector: Injector;
@@ -131,6 +131,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
         create?: {
             dialog?: Type<{}>;
             size?: string;
+            disableClose?: boolean;
             label?: string;
             title?: string;
             message?: string;
@@ -138,6 +139,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
         update?: {
             dialog?: Type<{}>;
             size?: string;
+            disableClose?: boolean;
             label?: string;
             title?: string;
             message?: string;
@@ -145,6 +147,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
         view?: {
             dialog?: Type<{}>;
             size?: string;
+            disableClose?: boolean;
             label?: string;
             title?: string;
             message?: string;
@@ -201,6 +204,40 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
     static ɵdir: i0.ɵɵDirectiveDeclaration<BaseTableComponent<any>, never, never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * List + detail-pane counterpart of BaseTableComponent: the page keeps a
+ * selectable row list on one side and a lazily fetched, per-id-cached detail
+ * on the other. Pair it with `<fx-ui-master-detail>` which renders the
+ * two-column shell from this state.
+ *
+ * Subclasses declare where ids and details come from:
+ *   protected override idKey = 'licenseId';
+ *   protected override detailUrl(id: string) { return `/license/${id}`; }
+ * `detailUrl` returning null (the default) means the selected row itself is
+ * the detail and no request is made.
+ */
+declare class BaseMasterDetailComponent<T = any> extends BaseTableComponent<T> {
+    selectedId: string | null;
+    selected: T | null;
+    detailMap: Map<string, any>;
+    detailLoading: Set<string>;
+    constructor(injector: Injector, api: HttpWrapper, modal: any, ref: ChangeDetectorRef);
+    /** Key the row id is read from. Override idOf() instead for composite ids. */
+    protected idKey: string;
+    idOf(row: any): string | null;
+    protected detailUrl(id: string): string | null;
+    /** What the detail pane shows: the fetched detail when cached, else the row. */
+    get detail(): any;
+    get detailBusy(): boolean;
+    setDataSource(result: any): void;
+    /** Keep the previous selection when it survived the new page, else pick row 0. */
+    autoSelectFirst(): void;
+    selectItem(row: T): void;
+    fetchDetail(id: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseMasterDetailComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseMasterDetailComponent<any>, never, never, {}, {}, never, never, true, never>;
+}
+
 declare class BaseDialogComponent<T = any> extends BaseComponent implements AfterViewInit, OnInit {
     ref: MatDialogRef<any>;
     bindings: any;
@@ -508,9 +545,9 @@ declare class FxUtils {
  * helpers return `null` for "no meaningful value" and the `toneText` /
  * `toneBg` / `toneBadge` wrappers fall back to a neutral class.
  *
- * The emitted Tailwind utilities are guaranteed by the safelist in the shared
- * tailwind preset (tailwind.config.js) — do not rely on content scanning for
- * these dynamic strings.
+ * Every emitted utility must appear below as a WHOLE literal string — the
+ * Tailwind content scanner (v4 has no safelist) only sees complete class
+ * names. Never rebuild these with string interpolation.
  */
 type Tone = 'critical' | 'danger' | 'warning' | 'success' | 'information';
 /** Severity / risk-level string → tone (Critical & High → danger, Medium → warning, Low → success). */
@@ -784,6 +821,9 @@ declare class InputComponent extends FxComponent<string> implements AfterViewIni
     blurred: EventEmitter<void>;
     focused: EventEmitter<void>;
     suffixClick: EventEmitter<void>;
+    /** Accessible name for the suffix icon button (it renders no text). */
+    suffixAriaLabel: string;
+    readonly fieldId: string;
     showPassword: boolean;
     validateError: ValidationErrors | null;
     constructor(ref: ChangeDetectorRef);
@@ -796,7 +836,7 @@ declare class InputComponent extends FxComponent<string> implements AfterViewIni
     onSuffixClick(): void;
     get displayType(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "fx-ui-input", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; }, { "blurred": "blurred"; "focused": "focused"; "suffixClick": "suffixClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "fx-ui-input", never, { "label": { "alias": "label"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; "suffixAriaLabel": { "alias": "suffixAriaLabel"; "required": false; }; }, { "blurred": "blurred"; "focused": "focused"; "suffixClick": "suffixClick"; }, never, never, false, never>;
 }
 
 declare class SelectComponent extends FxComponent<string | string[]> implements AfterViewInit, OnInit, OnChanges {
@@ -819,6 +859,7 @@ declare class SelectComponent extends FxComponent<string | string[]> implements
     }[]>;
     /** Emits the current value when the select panel closes (useful for multiple mode). */
     closed: EventEmitter<string | string[]>;
+    readonly fieldId: string;
     searchTerm: string;
     filteredOptions: {
         label: string;
@@ -848,6 +889,7 @@ interface IRadioButton {
 }
 declare class RadioButtonComponent extends FxComponent<IRadioButton> implements AfterViewInit {
     private ref;
+    readonly groupId: string;
     label?: string;
     tooltip: string;
     required?: boolean;
@@ -926,14 +968,19 @@ declare class ButtonComponent {
     icon?: any;
     class?: any;
     loading: boolean;
+    /** Native button type. Defaults to 'button' so it never implicitly submits a form. */
+    type: 'button' | 'submit' | 'reset';
+    /** Accessible name for icon-only usage (icon set, no label). */
+    ariaLabel: string;
     clicked: EventEmitter<void>;
     onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "fx-ui-button", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; }, { "clicked": "clicked"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "fx-ui-button", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "buttonVariant": { "alias": "buttonVariant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "type": { "alias": "type"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "clicked": "clicked"; }, never, never, false, never>;
 }
 
 declare class RadioButtonToggleComponent extends FxComponent<any> implements AfterViewInit {
     private ref;
+    readonly groupId: string;
     label?: string;
     required?: boolean;
     options: {
@@ -960,6 +1007,7 @@ declare class DatetimePicker extends FxComponent<any> implements AfterViewInit {
     maxDate?: any;
     errorMessages: ErrorMessages;
     validateFn: (date: string) => ValidationErrors | null;
+    readonly fieldId: string;
     startAt: any;
     constructor(ref: ChangeDetectorRef);
     ngAfterViewInit(): void;
@@ -1014,6 +1062,8 @@ declare class TabGroupComponent implements AfterContentInit {
     constructor(renderer: Renderer2);
     ngAfterContentInit(): void;
     selectTab(index: number): void;
+    /** Roving tablist keyboard nav: arrows move AND activate (selection follows focus). */
+    onTabKeydown(event: KeyboardEvent, index: number): void;
     private updateUnderlinePosition;
     private scrollToActiveTab;
     scroll(direction: 'left' | 'right'): void;
@@ -1157,12 +1207,14 @@ declare class SliderComponent extends FxComponent<any> implements AfterViewInit
 declare class SwitchComponent extends FxComponent<any> implements AfterViewInit {
     private cdr;
     onSwitch: EventEmitter<boolean>;
+    /** Accessible name — the switch renders no visible text of its own. */
+    ariaLabel: string;
     ngAfterViewInit(): void;
     constructor(cdr: ChangeDetectorRef);
     writeValue(value: any): void;
     toggle(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SwitchComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "fx-ui-switch", never, {}, { "onSwitch": "onSwitch"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "fx-ui-switch", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "onSwitch": "onSwitch"; }, never, never, false, never>;
 }
 
 declare class RichTextAreaComponent extends FxComponent<any> implements AfterViewInit {
@@ -1463,6 +1515,43 @@ declare class SeverityBadgesComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<SeverityBadgesComponent, "fx-ui-severity-badges", never, { "stats": { "alias": "stats"; "required": false; }; "showZero": { "alias": "showZero"; "required": false; }; "suffixed": { "alias": "suffixed"; "required": false; }; }, { "badgeClick": "badgeClick"; }, never, never, false, never>;
 }
 
+/**
+ * Two-column master-detail shell driven by a BaseMasterDetailComponent.
+ * The host page projects its own header/filters and supplies templates for
+ * the parts that vary per entity:
+ *
+ *   <fx-ui-master-detail [table]="this" [emptyMessage]="'noData' | translate">
+ *     <div mdHeader>…title / stat cards…</div>
+ *     <div mdFilters>…search bar / filter chips…</div>
+ *     <ng-template #row let-item let-selected="selected">…row body…</ng-template>
+ *     <ng-template #detail let-detail>…detail pane…</ng-template>
+ *   </fx-ui-master-detail>
+ *
+ * The list behaves as a single-select listbox: the selected option is the
+ * tab stop, ArrowUp/Down/Home/End move the selection.
+ */
+declare class MasterDetailComponent implements AfterViewInit {
+    table: BaseMasterDetailComponent<any>;
+    /** Fixed list-pane width on lg+ viewports (stacked full-width below). */
+    listWidth: string;
+    maxListHeight: string;
+    pageSizeOptions: number[];
+    /** Labels come in via inputs — the lib carries no i18n. */
+    emptyMessage: string;
+    listLabel: string;
+    skeletonCards: number;
+    rowTemplate: TemplateRef<any>;
+    detailTemplate: TemplateRef<any>;
+    paginator: MatPaginator;
+    readonly uid: string;
+    ngAfterViewInit(): void;
+    isSelected(row: any): boolean;
+    optionId(index: number): string;
+    onKeydown(event: KeyboardEvent, index: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MasterDetailComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MasterDetailComponent, "fx-ui-master-detail", never, { "table": { "alias": "table"; "required": false; }; "listWidth": { "alias": "listWidth"; "required": false; }; "maxListHeight": { "alias": "maxListHeight"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "listLabel": { "alias": "listLabel"; "required": false; }; "skeletonCards": { "alias": "skeletonCards"; "required": false; }; }, {}, ["rowTemplate", "detailTemplate"], ["[mdHeader]", "[mdFilters]"], false, never>;
+}
+
 declare class ConfirmationDialogComponent {
     private ref;
     bindings: any;
@@ -1489,9 +1578,9 @@ declare const MY_MOMENT_FORMATS: {
 };
 declare class UiModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UiModule, [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof ConfirmationDialogComponent], [typeof i38.CommonModule, typeof i39.FormsModule, typeof i39.ReactiveFormsModule, typeof i40.RouterModule, typeof i41.OwlDateTimeModule, typeof i41.OwlNativeDateTimeModule, typeof i42.OwlMomentDateTimeModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, typeof i45.NgHeroiconsModule, typeof i46.VflowComponent, typeof i46.HandleComponent, typeof i46.ResizableComponent, typeof i46.SelectableDirective, typeof i46.MiniMapComponent, typeof i46.NodeToolbarComponent, typeof i46.CustomTemplateEdgeComponent, typeof i46.DragHandleDirective, typeof i46.ConnectionControllerDirective, typeof i46.NodeHtmlTemplateDirective, typeof i46.NodeSvgTemplateDirective, typeof i46.GroupNodeTemplateDirective, typeof i46.EdgeLabelHtmlTemplateDirective, typeof i46.EdgeTemplateDirective, typeof i46.ConnectionTemplateDirective, typeof i46.HandleTemplateDirective, typeof i47.NgxEchartsModule, typeof i48.MatSelectModule, typeof i49.MatRadioModule, typeof i50.MatButtonModule, typeof i51.MatIconModule, typeof i52.MatPaginatorModule, typeof i53.MatTableModule, typeof i54.MatSnackBarModule, typeof i55.MatDialogModule, typeof i56.MatCheckboxModule, typeof i57.MatCardModule, typeof i58.MatDatepickerModule, typeof i59.MatTimepickerModule, typeof i60.MatBadgeModule, typeof i61.MatExpansionModule, typeof i62.MatFormFieldModule, typeof i63.MatMenuModule, typeof i64.MatTooltipModule, typeof i65.DragDropModule], [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof ConfirmationDialogComponent, typeof i39.FormsModule, typeof i39.ReactiveFormsModule, typeof i40.RouterModule, typeof i41.OwlDateTimeModule, typeof i41.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof i45.NgHeroiconsModule, typeof i48.MatSelectModule, typeof i49.MatRadioModule, typeof i50.MatButtonModule, typeof i51.MatIconModule, typeof i52.MatPaginatorModule, typeof i53.MatTableModule, typeof i54.MatSnackBarModule, typeof i55.MatDialogModule, typeof i56.MatCheckboxModule, typeof i57.MatCardModule, typeof i58.MatDatepickerModule, typeof i59.MatTimepickerModule, typeof i60.MatBadgeModule, typeof i61.MatExpansionModule, typeof i62.MatFormFieldModule, typeof i63.MatMenuModule, typeof i64.MatTooltipModule, typeof i65.DragDropModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UiModule, [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof MasterDetailComponent, typeof ConfirmationDialogComponent], [typeof i39.CommonModule, typeof i40.FormsModule, typeof i40.ReactiveFormsModule, typeof i41.RouterModule, typeof i42.OwlDateTimeModule, typeof i42.OwlNativeDateTimeModule, typeof i43.OwlMomentDateTimeModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, typeof i46.NgHeroiconsModule, typeof i47.VflowComponent, typeof i47.HandleComponent, typeof i47.ResizableComponent, typeof i47.SelectableDirective, typeof i47.MiniMapComponent, typeof i47.NodeToolbarComponent, typeof i47.CustomTemplateEdgeComponent, typeof i47.DragHandleDirective, typeof i47.ConnectionControllerDirective, typeof i47.NodeHtmlTemplateDirective, typeof i47.NodeSvgTemplateDirective, typeof i47.GroupNodeTemplateDirective, typeof i47.EdgeLabelHtmlTemplateDirective, typeof i47.EdgeTemplateDirective, typeof i47.ConnectionTemplateDirective, typeof i47.HandleTemplateDirective, typeof i48.NgxEchartsModule, typeof i49.MatSelectModule, typeof i50.MatRadioModule, typeof i51.MatButtonModule, typeof i52.MatIconModule, typeof i53.MatPaginatorModule, typeof i54.MatTableModule, typeof i55.MatSnackBarModule, typeof i56.MatDialogModule, typeof i57.MatCheckboxModule, typeof i58.MatCardModule, typeof i59.MatDatepickerModule, typeof i60.MatTimepickerModule, typeof i61.MatBadgeModule, typeof i62.MatExpansionModule, typeof i63.MatFormFieldModule, typeof i64.MatMenuModule, typeof i65.MatTooltipModule, typeof i66.DragDropModule], [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof FlowConnection, typeof CircleProgressBar, typeof TreeDiagram, typeof TableCell, typeof KanbanBoardComponent, typeof DrawerComponent, typeof SkeletonListComponent, typeof SkeletonDetailComponent, typeof StatCardsComponent, typeof EmptyStateComponent, typeof FilterChipsComponent, typeof MeterComponent, typeof SectionCardComponent, typeof InfoFieldComponent, typeof SeverityBadgesComponent, typeof MasterDetailComponent, typeof ConfirmationDialogComponent, typeof i40.FormsModule, typeof i40.ReactiveFormsModule, typeof i41.RouterModule, typeof i42.OwlDateTimeModule, typeof i42.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof i46.NgHeroiconsModule, typeof i49.MatSelectModule, typeof i50.MatRadioModule, typeof i51.MatButtonModule, typeof i52.MatIconModule, typeof i53.MatPaginatorModule, typeof i54.MatTableModule, typeof i55.MatSnackBarModule, typeof i56.MatDialogModule, typeof i57.MatCheckboxModule, typeof i58.MatCardModule, typeof i59.MatDatepickerModule, typeof i60.MatTimepickerModule, typeof i61.MatBadgeModule, typeof i62.MatExpansionModule, typeof i63.MatFormFieldModule, typeof i64.MatMenuModule, typeof i65.MatTooltipModule, typeof i66.DragDropModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<UiModule>;
 }
 
-export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FilterChipsComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, LoadingPanel, MY_MOMENT_FORMATS, MeterComponent, NotificationService, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RealtimeTableSync, RichTextAreaComponent, SearchBarComponent, SectionCardComponent, SelectComponent, SeverityBadgesComponent, SkeletonDetailComponent, SkeletonListComponent, SkeletonTableLoadingComponent, SliderComponent, StatCardsComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule, countTone, createApi, fxListResolver, scoreTone, severityTone, toneBadge, toneBg, toneColor, toneText };
+export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseMasterDetailComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, CircleProgressBar, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, DrawerComponent, EmptyStateComponent, FilterChipsComponent, FlowConnection, FxLoadingService, FxStorageService, FxToastrService, FxUtils, FxValidators, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InfoFieldComponent, InputComponent, KanbanBoardComponent, LoadingPanel, MY_MOMENT_FORMATS, MasterDetailComponent, MeterComponent, NotificationService, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RealtimeTableSync, RichTextAreaComponent, SearchBarComponent, SectionCardComponent, SelectComponent, SeverityBadgesComponent, SkeletonDetailComponent, SkeletonListComponent, SkeletonTableLoadingComponent, SliderComponent, StatCardsComponent, SwitchComponent, TabComponent, TabGroupComponent, TableCell, TagComponent, ThemeService, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TreeDiagram, TrimOnBlurDirective, UiModule, countTone, createApi, fxListResolver, scoreTone, severityTone, toneBadge, toneBg, toneColor, toneText };
 export type { Breadcrumb, ColumnChangedEvent, FxApiClass, FxFilterChipOption, FxListRequest, FxListResolverContext, FxSeverityBadge, FxStatCard, IChartType, IRadioButton, KanbanColumn, NotificationCallback, NotificationConnectOptions, RealtimeTableEvent, RealtimeTableSyncOptions, TableResult, TagType, ToastData, Tone, TreeNode, UploadResult };

package/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.0.0",
-    "autoprefixer": "^10.0.0",
-    "postcss": "^8.0.0",
+    "tailwindcss": "^4.0.0",
     "@angular/common": "^20.3.0",
     "@angular/animations": "^20.3.0",
     "@angular/core": "^20.3.0",
@@ -33,13 +31,14 @@
     "@microsoft/signalr": "^10.0.0"
   },
   "exports": {
-    "./tailwind-config": "./tailwind.config.js",
     "./tailwind.css": "./tailwind.css",
     "./theme.css": "./theme.css",
     "./components.css": "./components.css",
     "./dialogs.css": "./dialogs.css",
     "./fonts.css": "./fonts.css",
     "./animations.css": "./animations.css",
+    "./tokens.css": "./tokens.css",
+    "./utilities.css": "./utilities.css",
     "./package.json": {
       "default": "./package.json"
     },

package/src/lib/styles/components.css

@@ -296,9 +296,6 @@ input[type='password'] {
 .txt-card-info-description {
   @apply text-xs font-light text-text-secondary tracking-normal;
 }
-.txt-tag-common {
-  @apply font-semibold text-xs;
-}
 .txt-tag-default {
   @apply txt-tag-common text-text-secondary;
 }
@@ -330,9 +327,6 @@ input[type='password'] {
   @apply font-mono text-sm text-text-primary tracking-normal;
 }
 
-.btn-common {
-  @apply flex text-sm h-10 font-semibold px-xl py-normal items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
-}
 .btn-default {
   @apply btn-common bg-button-default hover:opacity-75 text-text-inverse;
 }
@@ -345,9 +339,6 @@ input[type='password'] {
 .btn-alternative {
   @apply btn-common hover:bg-bg-hover text-text-primary border border-border-default;
 }
-.btn-menu-common {
-  @apply flex flex-row items-center px-semi;
-}
 .btn-menu-top {
   @apply btn-menu-common border-b border-border-default pt-small pb-semi;
 }
@@ -359,7 +350,7 @@ input[type='password'] {
 }
 
 .input-default {
-  @apply block h-[36px] text-text-primary placeholder:text-text-placeholder bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out;
+  @apply block h-[36px] text-text-primary placeholder:text-text-placeholder bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-gradient-primary-start focus-visible:ring-2 focus-visible:ring-primary/50 text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out;
 }
 .input-invalid {
   @apply border-bg-error focus:ring-bg-error focus:border-bg-error;
@@ -368,12 +359,9 @@ input[type='password'] {
   @apply focus:border-2 focus:border-border-hover2 focus:bg-bg-hover2;
 }
 .input-otp {
-  @apply bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-gradient-primary-start text-text-primary ring-0 transition-colors duration-500 ease-in-out;
+  @apply bg-bg-primary w-full rounded-md border px-semi py-normal border-border-default focus:outline-none focus:border-2 focus:border-gradient-primary-start focus-visible:ring-2 focus-visible:ring-primary/50 text-text-primary ring-0 transition-colors duration-500 ease-in-out;
 }
 
-.card-common {
-  @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
-}
 .card-information {
   @apply card-common hover:opacity-70 hover:shadow-md hover:border-border-selected;
 }
@@ -384,9 +372,6 @@ input[type='password'] {
   @apply flex items-center justify-between rounded-md px-semi py-normal bg-bg-primary mb-normal last:mb-0;
 }
 
-.tag-common {
-  @apply flex min-w-7 px-[10px] py-[2px] leading-5 hover:opacity-70 items-center justify-center;
-}
 .tag-default {
   @apply tag-common bg-bg-hover;
 }

package/src/lib/styles/tailwind.css

@@ -1,18 +1,21 @@
+/* fonts.css is NOT imported here: Tailwind v4 inlines imports and rebases
+   font url()s against the entry file, which breaks webpack resolution.
+   Consumers add '@foxeltech/angular-ui/fonts.css' to their styles array. */
+@import 'tailwindcss';
+@import './tokens.css';
+@import './utilities.css';
 @import './theme.css';
-@import './components.css';
-@import './dialogs.css';
-@import './fonts.css';
+@import './components.css' layer(components);
+@import './dialogs.css' layer(components);
 @import './animations.css';
 @import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
 
-html, body {
+html,
+body {
   font-family: 'Roboto';
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
   background: rgb(var(--bg-primary));
-}
+}

package/src/lib/styles/tokens.css

@@ -0,0 +1,131 @@
+/*
+ * Tailwind v4 CSS-first theme for @foxeltech/angular-ui.
+ * Replaces the old JS preset (tailwind.config.js / lodash.merge sharing).
+ *
+ * Colour tokens point at the runtime RGB-triplet variables from theme.css
+ * (dark default on :root, light via .light_theme) so theme switching keeps
+ * working; opacity modifiers like bg-critical/10 are handled by v4's
+ * color-mix() and need no <alpha-value> plumbing.
+ */
+/* `inline` is load-bearing: without it the rgb(var(--x)) values are baked
+   into :root once, so .light_theme's runtime triplet overrides never reach
+   the utilities. inline makes every utility carry rgb(var(--x)) itself and
+   resolve at the element that uses it — same behavior as v3. */
+@theme inline {
+  /* Colours (names match the v3 preset so every existing class keeps working) */
+  --color-gradient-primary-start: rgb(var(--gradient-primary-start));
+  --color-gradient-primary-end: rgb(var(--gradient-primary-end));
+  --color-gradient-success-start: rgb(var(--gradient-success-start));
+  --color-gradient-success-end: rgb(var(--gradient-success-end));
+  --color-primary: rgb(var(--primary));
+  --color-success: rgb(var(--success));
+  --color-danger: rgb(var(--danger));
+  --color-warning: rgb(var(--warning));
+  --color-critical: rgb(var(--critical));
+  --color-discovery: rgb(var(--discovery));
+  --color-information: rgb(var(--information));
+  --color-bg-primary: rgb(var(--bg-primary));
+  --color-bg-canvas: rgb(var(--bg-canvas));
+  --color-bg-hover: rgb(var(--bg-primary-hover));
+  --color-bg-error: rgb(var(--bg-error-bold));
+  --color-bg-hover2: rgb(var(--bg-secondary-hover));
+  --color-text-primary: rgb(var(--text-primary));
+  --color-text-secondary: rgb(var(--text-secondary));
+  --color-text-placeholder: rgb(var(--text-placeholder));
+  --color-text-selected: rgb(var(--text-selected-primary));
+  --color-text-focus: rgb(var(--text-focus));
+  --color-text-inverse: rgb(var(--text-inverse));
+  --color-text-error: rgb(var(--text-error));
+  --color-text-link: rgb(var(--text-link-primary));
+  --color-border-default: rgb(var(--border-default));
+  --color-border-interactive: rgb(var(--border-interactive));
+  --color-border-selected: rgb(var(--border-selected));
+  --color-border-strong: rgb(var(--border-strong));
+  --color-border-hover2: rgb(var(--border-secondary-hover));
+  --color-button-default: rgb(var(--button-default));
+  --color-button-primary: rgb(var(--button-primary));
+
+  /* Breakpoints (v3 custom screens) */
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 720px;
+  --breakpoint-lg: 1080px;
+  --breakpoint-xl: 1920px;
+
+  /* Shadows — same scale as the v3 preset, incl. the DEFAULT key so the bare
+     `shadow` utility keeps its v3 meaning (no shadow→shadow-sm rename sweep). */
+  --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
+  --shadow: 0 1px 3px 0 rgb(var(--shadow-color) / 0.1), 0 1px 2px -1px rgb(var(--shadow-color) / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 10px 10px -5px rgb(var(--shadow-color) / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color) / 0.25);
+  --inset-shadow-sm: inset 0 2px 4px 0 rgb(var(--shadow-color) / 0.05);
+
+  /* v3 default border radii, incl. DEFAULT so bare `rounded` keeps working */
+  --radius-sm: 0.125rem;
+  --radius: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+
+  /* Named spacing scale (gap-small, p-semi, mb-large, …) */
+  --spacing-xs: 0.125rem;
+  --spacing-small: 0.25rem;
+  --spacing-normal: 0.5rem;
+  --spacing-semi: 0.75rem;
+  --spacing-large: 1rem;
+  --spacing-xl: 1.25rem;
+  --spacing-2xl: 1.5rem;
+
+  /* Font families */
+  --font-spmono: 'SpaceMonoRegular', monospace;
+  --font-dmsans: 'DMSans', sans-serif;
+  --font-orbitron: 'Orbitron', sans-serif;
+  --font-bevn: 'BeVietnamPro', sans-serif;
+  --font-roboto: 'Roboto', sans-serif;
+
+  /* Font-size overrides (v3 preset values) */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.625rem;
+  --text-3xl: 2rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+}
+
+/* v3 backgroundImage entries — v4 has no background-image theme namespace */
+@utility bg-gradient-primary {
+  background-image: linear-gradient(
+    135deg,
+    rgb(var(--gradient-primary-start)) 0%,
+    rgb(var(--gradient-primary-end)) 100%
+  );
+}
+@utility bg-gradient-success {
+  background-image: linear-gradient(
+    135deg,
+    rgb(var(--gradient-success-start)) 0%,
+    rgb(var(--gradient-success-end)) 100%
+  );
+}
+
+/* v3 behavior compat (per the official upgrade guide) */
+@layer base {
+  /* v4 defaults borders to currentColor; restore the theme default */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: rgb(var(--border-default));
+  }
+  /* v4 preflight switched buttons to cursor: default */
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}

package/src/lib/styles/utilities.css

@@ -0,0 +1,24 @@
+/*
+ * Shared composable utilities (v4 @utility) — kept OUT of components.css
+ * because that file is imported inside layer(components) and @utility must
+ * be top-level/unlayered. Usable both in markup and via @apply.
+ */
+@utility txt-tag-common {
+  @apply font-semibold text-xs;
+}
+
+@utility btn-common {
+  @apply flex text-sm h-10 font-semibold px-xl py-normal items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
+}
+
+@utility btn-menu-common {
+  @apply flex flex-row items-center px-semi;
+}
+
+@utility card-common {
+  @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
+}
+
+@utility tag-common {
+  @apply flex min-w-7 px-[10px] py-[2px] leading-5 hover:opacity-70 items-center justify-center;
+}

package/src/lib/ui/components/button/button.component.html

@@ -1,4 +1,7 @@
 <button
+  [attr.type]="type"
+  [attr.aria-label]="ariaLabel || null"
+  [attr.aria-busy]="loading || null"
   [class]="class"
   [ngClass]="{
     'btn-default': buttonVariant === 'default',
@@ -10,7 +13,7 @@
   (click)="onClick()"
 >
   @if (loading) {
-    <div class="flex w-full items-center justify-center">
+    <div class="flex w-full items-center justify-center" aria-hidden="true">
       <svg
         [attr.fill]="
           buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'

package/src/lib/ui/components/checkbox/checkbox.component.html

@@ -3,16 +3,17 @@
   [class.opacity-50]="disabled"
   [class.cursor-not-allowed]="disabled"
 >
+  <!-- sr-only (not `hidden`): keeps the input focusable and in the a11y tree -->
   <input
     type="checkbox"
-    class="hidden"
+    class="peer sr-only"
     [checked]="value"
     [disabled]="disabled"
     (change)="onInputChange($event)"
     (blur)="onTouched()"
   />
   <span
-    class="relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0"
+    class="relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0 peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50"
     [ngClass]="{
       'rounded-full': rounded,
       'rounded-sm': !rounded,