@foxeltech/angular-ui 0.2.0 → 0.3.0

package/src/lib/ui/components/datetime-picker/datetime-picker.component.html

@@ -1,13 +1,14 @@
 <div class="flex flex-col mb-4 w-full text-left">
   @if (label) {
-    <label class="txt-field-label">
+    <label class="txt-field-label" [attr.for]="fieldId">
       {{ label }}
-      <span *ngIf="required" class="txt-required">*</span>
+      <span *ngIf="required" class="txt-required" aria-hidden="true">*</span>
     </label>
   }
 
   <div class="relative">
     <input
+      [id]="fieldId"
       [owlDateTimeTrigger]="picker"
       [owlDateTime]="picker"
       [placeholder]="placeholder"

package/src/lib/ui/components/datetime-picker/datetime-picker.component.scss

@@ -1,3 +1,6 @@
+/* Tailwind v4: component styles compile in isolation — @reference pulls in the theme for @apply without re-emitting it. */
+@reference '../../../styles/tailwind.css';
+
 // ─── Owl DateTime Picker Custom Styles ───────────────────────────────────────
 
 // Container

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

@@ -7,6 +7,7 @@
     @if (logo) {
       <img
         [src]="logo"
+        alt="Home"
         class="h-[20px] w-auto transition-all duration-300 ease-in-out"
         [ngClass]="{ 'scale-90': !isExpanded, 'ml-5': isExpanded }"
       />
@@ -35,6 +36,8 @@
   <button
     type="button"
     class="toggle-btn"
+    [attr.aria-label]="isExpanded ? 'Collapse navigation' : 'Expand navigation'"
+    [attr.aria-expanded]="isExpanded"
     (click)="toggleDrawer()"
     [matTooltip]="isExpanded ? 'Collapse' : 'Expand'"
     matTooltipClass="text-text-primary text-xs font-semibold"

package/src/lib/ui/components/drawer/drawer.component.scss

@@ -1,3 +1,6 @@
+/* Tailwind v4: component styles compile in isolation — @reference pulls in the theme for @apply without re-emitting it. */
+@reference '../../../styles/tailwind.css';
+
 :host {
   @apply block h-full;
 }

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

@@ -1,9 +1,9 @@
 <div class="mb-4 text-left w-full text-text-primary" [class]="class">
   @if (label) {
-    <label class="block txt-field-label">
+    <label class="block txt-field-label" [attr.for]="fieldId">
       {{ label }}
       @if (required) {
-        <span class="txt-required">*</span>
+        <span class="txt-required" aria-hidden="true">*</span>
       }
       @if (tooltip) {
         <fx-ui-hero-icon
@@ -22,6 +22,7 @@
     <input
       appTrimOnBlur
       [appTrimOnBlurCollapse]="true"
+      [id]="fieldId"
       [type]="displayType"
       [placeholder]="placeholder"
       [disabled]="disabled"
@@ -30,6 +31,9 @@
       (blur)="onBlur()"
       (focus)="onFocus()"
       [attr.maxlength]="maxlength"
+      [attr.aria-invalid]="invalid || null"
+      [attr.aria-describedby]="invalid ? fieldId + '-error' : null"
+      [attr.aria-required]="required ? true : null"
       [class]="type === 'otp' ? 'input-otp' : 'input-default'"
       [class.input-invalid]="invalid"
       [class.pr-8]="type === 'password' || suffixIcon"
@@ -41,18 +45,26 @@
         class="absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary"
         (click)="onSuffixClick()"
         [disabled]="disabled"
+        [attr.aria-label]="
+          type === 'password'
+            ? (showPassword ? 'Hide password' : 'Show password')
+            : (suffixAriaLabel || null)
+        "
+        [attr.aria-pressed]="type === 'password' ? showPassword : null"
       >
         @if (type === 'password') {
           <fx-ui-hero-icon
             [icon]="showPassword ? 'eye-slash' : 'eye'"
             [size]="18"
             class="text-text-primary"
+            aria-hidden="true"
           ></fx-ui-hero-icon>
         } @else if (suffixIcon) {
           <fx-ui-hero-icon
             [icon]="suffixIcon"
             [size]="18"
             class="text-text-primary"
+            aria-hidden="true"
           ></fx-ui-hero-icon>
         }
       </button>
@@ -60,7 +72,7 @@
   </div>
 
   @if (invalid) {
-    <div class="txt-invalid">
+    <div class="txt-invalid" role="alert" [id]="fieldId + '-error'">
       {{ getErrorMessage(label) }}
     </div>
   }

package/src/lib/ui/components/kanban-board/kanban-board.component.scss

@@ -1,3 +1,6 @@
+/* Tailwind v4: component styles compile in isolation — @reference pulls in the theme for @apply without re-emitting it. */
+@reference '../../../styles/tailwind.css';
+
 .kanban-board {
   @apply w-full h-full overflow-x-auto;
 }

package/src/lib/ui/components/master-detail/master-detail.component.css

@@ -0,0 +1,11 @@
+/* Full-width when stacked; fixed width beside the detail pane on lg+ (1080px). */
+.fx-md-list {
+  width: 100%;
+}
+
+@media (min-width: 1080px) {
+  .fx-md-list {
+    width: var(--fx-md-list-width, 420px);
+    flex-shrink: 0;
+  }
+}

package/src/lib/ui/components/master-detail/master-detail.component.html

@@ -0,0 +1,70 @@
+<div class="flex flex-col lg:flex-row items-start gap-xl" [style.--fx-md-list-width]="listWidth">
+  <!-- Master: list pane -->
+  <div class="fx-md-list card-common">
+    <ng-content select="[mdHeader]"></ng-content>
+    <ng-content select="[mdFilters]"></ng-content>
+    <div
+      class="flex flex-col gap-normal overflow-auto pr-xs"
+      [style.maxHeight]="maxListHeight"
+      role="listbox"
+      [attr.aria-label]="listLabel || null"
+    >
+      @if (table.loading) {
+        <fx-ui-skeleton-list [rows]="table.pageSize"></fx-ui-skeleton-list>
+      } @else {
+        @for (row of table.dataSource.data; track table.idOf(row); let i = $index) {
+          <button
+            type="button"
+            role="option"
+            [id]="optionId(i)"
+            [attr.aria-selected]="isSelected(row)"
+            [tabindex]="isSelected(row) ? 0 : -1"
+            (click)="table.selectItem(row)"
+            (keydown)="onKeydown($event, i)"
+            class="text-left rounded-lg border p-semi transition-colors"
+            [ngClass]="
+              isSelected(row)
+                ? 'border-gradient-primary-start bg-gradient-primary-start/5'
+                : 'border-border-default hover:border-border-interactive bg-bg-primary'
+            "
+          >
+            <ng-container
+              [ngTemplateOutlet]="rowTemplate"
+              [ngTemplateOutletContext]="{ $implicit: row, selected: isSelected(row) }"
+            ></ng-container>
+          </button>
+        }
+        @if (!table.dataSource.data.length) {
+          <fx-ui-empty-state [message]="emptyMessage"></fx-ui-empty-state>
+        }
+      }
+    </div>
+    <!-- No (page) binding: ngAfterViewInit hands this paginator to the table,
+         whose own BaseTable subscription (running after this child's hook)
+         wires page events — a binding here would double-fetch every change. -->
+    <mat-paginator
+      class="mt-normal"
+      [length]="table.total"
+      [pageSize]="table.pageSize"
+      [pageSizeOptions]="pageSizeOptions"
+    ></mat-paginator>
+  </div>
+
+  <!-- Detail pane -->
+  <div class="w-full lg:flex-1 min-w-0">
+    @if (table.selected) {
+      @if (table.detailBusy) {
+        <fx-ui-skeleton-detail [cards]="skeletonCards"></fx-ui-skeleton-detail>
+      } @else {
+        <ng-container
+          [ngTemplateOutlet]="detailTemplate"
+          [ngTemplateOutletContext]="{ $implicit: table.detail, selected: table.selected }"
+        ></ng-container>
+      }
+    } @else {
+      <div class="card-common flex items-center justify-center h-[300px]">
+        <fx-ui-empty-state [message]="emptyMessage"></fx-ui-empty-state>
+      </div>
+    }
+  </div>
+</div>

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

@@ -9,7 +9,14 @@
       }
     </div>
   }
-  <div class="h-2 rounded-full bg-bg-hover overflow-hidden">
+  <div
+    class="h-2 rounded-full bg-bg-hover overflow-hidden"
+    role="progressbar"
+    [attr.aria-valuemin]="0"
+    [attr.aria-valuemax]="max"
+    [attr.aria-valuenow]="value"
+    [attr.aria-label]="label || null"
+  >
     <div class="h-full rounded-full" [ngClass]="fillClass" [style.width.%]="percent"></div>
   </div>
 </div>

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

@@ -1,9 +1,15 @@
-<div class="w-full rounded-lg overflow-hidden" [class]="class" role="radiogroup">
+<div
+  class="w-full rounded-lg overflow-hidden"
+  [class]="class"
+  role="radiogroup"
+  [attr.aria-labelledby]="label ? groupId + '-label' : null"
+>
+  <!-- A radiogroup has no single control a <label> could point at — name it via aria-labelledby. -->
   @if (label) {
-    <label class="txt-field-label">
+    <span class="txt-field-label block" [id]="groupId + '-label'">
       {{ label }}
       @if (required) {
-        <span class="txt-required">*</span>
+        <span class="txt-required" aria-hidden="true">*</span>
       }
       @if (tooltip) {
         <fx-ui-hero-icon
@@ -15,7 +21,7 @@
           matTooltipClass="text-text-primary text-xs font-semibold"
         ></fx-ui-hero-icon>
       }
-    </label>
+    </span>
   }
 
   <button

package/src/lib/ui/components/radio-button-toggle/radio-button-toggle.component.html

@@ -1,10 +1,15 @@
 <div class="flex flex-col text-left mb-4 w-full" [class]="class">
-  @if(label){<label class="txt-field-label">
+  <!-- A radiogroup has no single control a <label> could point at — name it via aria-labelledby. -->
+  @if(label){<span class="txt-field-label" [id]="groupId + '-label'">
     {{ label }}
-    @if(required) {<span class="txt-required">*</span>} </label
+    @if(required) {<span class="txt-required" aria-hidden="true">*</span>} </span
   >}
 
-  <div class="inline-flex w-full rounded-lg overflow-hidden" role="radiogroup">
+  <div
+    class="inline-flex w-full rounded-lg overflow-hidden"
+    role="radiogroup"
+    [attr.aria-labelledby]="label ? groupId + '-label' : null"
+  >
     @for(opt of options; track opt){<button
       type="button"
       role="radio"

package/src/lib/ui/components/rich-text-area/rich-text-area.component.scss

@@ -1,3 +1,6 @@
+/* Tailwind v4: component styles compile in isolation — @reference pulls in the theme for @apply without re-emitting it. */
+@reference '../../../styles/tailwind.css';
+
 :host {
   display: block;
 }

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

@@ -1,9 +1,9 @@
 <div class="mb-4 text-left w-full" [class]="class">
   @if (label) {
-    <label class="block txt-field-label">
+    <label class="block txt-field-label" [attr.for]="fieldId">
       {{ label }}
       @if (required) {
-        <span class="txt-required">*</span>
+        <span class="txt-required" aria-hidden="true">*</span>
       }
       @if (tooltip) {
         <fx-ui-hero-icon
@@ -24,6 +24,10 @@
     appearance="fill"
   >
     <mat-select
+      [id]="fieldId"
+      [required]="!!required"
+      [attr.aria-invalid]="invalid || null"
+      [attr.aria-describedby]="invalid ? fieldId + '-error' : null"
       [placeholder]="placeholder"
       [disabled]="disabled"
       [multiple]="multiple"
@@ -36,11 +40,12 @@
         <div class="px-semi w-full">
           <input
             type="text"
+            aria-label="Search"
             [placeholder]="'Search'"
             [(ngModel)]="searchTerm"
             (ngModelChange)="onSearchChange($event)"
             (click)="$event.stopPropagation()"
-            class="text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out"
+            class="text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none 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"
           />
         </div>
       }
@@ -51,7 +56,7 @@
   </mat-form-field>
 
   @if (invalid) {
-    <div class="txt-invalid text-left">
+    <div class="txt-invalid text-left" role="alert" [id]="fieldId + '-error'">
       {{ getErrorMessage(label) }}
     </div>
   }

package/src/lib/ui/components/severity-badges/severity-badges.component.html

@@ -1,10 +1,11 @@
 <div class="flex items-center gap-small">
   @for (badge of badges; track badge.key) {
-    <span
-      class="px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer"
+    <button
+      type="button"
+      class="px-2 py-0.5 rounded-full txt-utility-caption font-medium cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50"
       [ngClass]="badgeClass(badge)"
+      [attr.aria-label]="badge.key + ': ' + badge.label"
       (click)="badgeClick.emit(badge.key)"
-      >{{ badge.label }}</span
-    >
+    >{{ badge.label }}</button>
   }
 </div>

package/src/lib/ui/components/skeleton-list/skeleton-list.component.html

@@ -1,8 +1,8 @@
 <div class="flex flex-col gap-normal animate-pulse">
   @for (r of range(rows); track r) {
-    <div class="rounded-normal border border-border-default p-semi">
+    <div class="rounded-lg border border-border-default p-semi">
       <div class="flex items-center gap-normal mb-small">
-        <div class="w-8 h-8 rounded-normal bg-bg-hover shrink-0"></div>
+        <div class="w-8 h-8 rounded-lg bg-bg-hover shrink-0"></div>
         <div class="h-4 flex-1 rounded bg-bg-hover"></div>
         <div class="h-5 w-12 rounded-full bg-bg-hover shrink-0"></div>
       </div>

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

@@ -4,6 +4,8 @@
   [class.opacity-60]="disabled"
   role="group"
 >
+  <!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->
+  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
   <div
     #track
     class="relative touch-none py-4"
@@ -38,6 +40,7 @@
           class="absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary"
           [ngStyle]="thumbStyle()"
           role="slider"
+          aria-label="Slider"
           [attr.aria-valuemin]="min"
           [attr.aria-valuemax]="max"
           [attr.aria-valuenow]="value"

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

@@ -1,5 +1,10 @@
-<div
-  class="relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer"
+<button
+  type="button"
+  role="switch"
+  [attr.aria-checked]="!!value"
+  [attr.aria-label]="ariaLabel || null"
+  [disabled]="disabled"
+  class="relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50"
   [ngClass]="{
     'bg-success': value && !disabled,
     'bg-button-default': !value && !disabled,
@@ -8,14 +13,14 @@
   (click)="toggle()"
 >
   @if(value) {
-    <i style="font-size: 20px;" class="material-symbols-outlined absolute left-0.5 top-0 text-text-inverse">check</i>
-    
+    <i style="font-size: 20px;" class="material-symbols-outlined absolute left-0.5 top-0 text-text-inverse" aria-hidden="true">check</i>
+
   }
   @if(!value) {
-    <i style="font-size: 20px;" class="material-symbols-outlined absolute right-0.5 top-0 text-text-inverse">close</i>
+    <i style="font-size: 20px;" class="material-symbols-outlined absolute right-0.5 top-0 text-text-inverse" aria-hidden="true">close</i>
   }
   <div
     class="absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300"
     [ngClass]="{ 'translate-x-5': value }"
   ></div>
-</div>
+</button>

package/src/lib/ui/components/tab-group/tab-group.component.html

@@ -3,11 +3,15 @@
   <button
     class="left-scroll-button"
     type="button"
+    aria-label="Scroll tabs left"
     (click)="scroll('left')"
     [style.opacity]="canScrollLeft ? 1 : 0"
     [style.pointerEvents]="canScrollLeft ? 'auto' : 'none'"
+    [attr.tabindex]="canScrollLeft ? null : -1"
+    [attr.aria-hidden]="!canScrollLeft"
   >
     <svg
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       class="h-5 w-5 text-text-primary"
       fill="none"
@@ -20,12 +24,18 @@
 
   <div
     #tabList
+    role="tablist"
     class="relative flex overflow-x-auto no-scrollbar scroll-smooth"
     (scroll)="onScroll()"
   >
     <button
       *ngFor="let tab of tabs.toArray(); let i = index"
+      type="button"
+      role="tab"
+      [attr.aria-selected]="i === activeIndex"
+      [tabindex]="i === activeIndex ? 0 : -1"
       (click)="selectTab(i)"
+      (keydown)="onTabKeydown($event, i)"
       class="tab-btn tab-bar-btn"
     >
       <div class="flex flex-row items-center justify-center">
@@ -56,11 +66,15 @@
   <button
     class="right-scroll-button"
     type="button"
+    aria-label="Scroll tabs right"
     (click)="scroll('right')"
     [style.opacity]="canScrollRight ? 1 : 0"
     [style.pointerEvents]="canScrollRight ? 'auto' : 'none'"
+    [attr.tabindex]="canScrollRight ? null : -1"
+    [attr.aria-hidden]="!canScrollRight"
   >
     <svg
+      aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
       class="h-5 w-5 text-text-primary"
       fill="none"
@@ -75,7 +89,7 @@
 <!-- Tab content -->
 <div class="transition-all duration-300 ease-in-out mt-4">
   <ng-container *ngFor="let tab of tabs.toArray(); let i = index">
-    <div *ngIf="i === activeIndex" class="animate-fadeIn">
+    <div *ngIf="i === activeIndex" role="tabpanel" class="animate-fadeIn">
       <ng-container *ngTemplateOutlet="tab.content"></ng-container>
     </div>
   </ng-container>

package/src/lib/ui/components/tab-group/tab-group.component.scss

@@ -1,3 +1,6 @@
+/* Tailwind v4: component styles compile in isolation — @reference pulls in the theme for @apply without re-emitting it. */
+@reference '../../../styles/tailwind.css';
+
 @keyframes fadeIn {
   from {
     opacity: 0;

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

@@ -1,7 +1,12 @@
+<!-- Interactive semantics only when a (clicked) listener is attached. -->
 <div
   (click)="onClick()"
+  (keydown.enter)="onClick()"
+  (keydown.space)="$event.preventDefault(); onClick()"
+  [attr.role]="clicked.observed ? 'button' : null"
+  [attr.tabindex]="clicked.observed ? 0 : null"
   [class]="
-    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}`
+    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`
   "
 >
   @if (icon) {

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

@@ -1,6 +1,7 @@
 <div
   animate.enter="horizontal-fade-in-animation"
   animate.leave="horizontal-fade-out-animation"
+  [attr.role]="type === 'error' ? 'alert' : 'status'"
   class="flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0"
   [ngClass]="{
     'border-success': type === 'success',
@@ -9,7 +10,7 @@
     'border-information': type === 'info'
   }"
 >
-  <div class="">
+  <div class="" aria-hidden="true">
     @switch (type) { @case('success') {
     <fx-ui-hero-icon
       icon="check-circle"

package/src/lib/ui/dialogs/confirmation/confirmation.component.html

@@ -1,5 +1,5 @@
 <div animate.enter="fade-in-animation" class="dialog-container">
-  <h1 class="txt-heading-05 dialog-header">{{ title }}</h1>
+  <h1 mat-dialog-title class="txt-heading-05 dialog-header">{{ title }}</h1>
   <mat-dialog-content>
     <div class="txt-default">{{ message }}</div>
   </mat-dialog-content>

package/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));
-}
+}