@foxeltech/angular-ui 0.2.0 → 0.3.1

package/package.json

@@ -1,20 +1,18 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
-    "tailwindcss": "^3.0.0",
-    "autoprefixer": "^10.0.0",
-    "postcss": "^8.0.0",
-    "@angular/common": "^20.3.0",
-    "@angular/animations": "^20.3.0",
-    "@angular/core": "^20.3.0",
-    "@angular/forms": "^20.3.0",
-    "@angular/material": "^20.2.7",
-    "@angular/cdk": "^20.2.7",
+    "tailwindcss": "^4.0.0",
+    "@angular/common": "^20.3.0 || ^21.0.0",
+    "@angular/animations": "^20.3.0 || ^21.0.0",
+    "@angular/core": "^20.3.0 || ^21.0.0",
+    "@angular/forms": "^20.3.0 || ^21.0.0",
+    "@angular/material": "^20.2.7 || ^21.0.0",
+    "@angular/cdk": "^20.2.7 || ^21.0.0",
     "lodash": "^4.17.21",
     "@ngx-translate/core": "^14.0.0",
     "@ngx-translate/http-loader": "^7.0.0",
@@ -22,8 +20,8 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@danielmoncada/angular-datetime-picker": "^20.0.0",
-    "@danielmoncada/angular-datetime-picker-moment-adapter": "^7.0.1",
+    "@danielmoncada/angular-datetime-picker": "^21.0.0",
+    "@danielmoncada/angular-datetime-picker-moment-adapter": "^8.0.0",
     "echarts": "^6.0.0",
     "ngx-echarts": "^20.0.2",
     "d3": "^7.9.0",
@@ -33,18 +31,19 @@
     "@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"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/foxeltech-angular-ui.d.ts",
       "default": "./fesm2022/foxeltech-angular-ui.mjs"
     }
   },
@@ -52,5 +51,6 @@
     "*.css"
   ],
   "module": "fesm2022/foxeltech-angular-ui.mjs",
-  "typings": "index.d.ts"
+  "typings": "types/foxeltech-angular-ui.d.ts",
+  "type": "module"
 }

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,

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

@@ -1,13 +1,16 @@
 <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>
+      @if (required) {
+        <span class="txt-required" aria-hidden="true">*</span>
+      }
     </label>
   }
 
   <div class="relative">
     <input
+      [id]="fieldId"
       [owlDateTimeTrigger]="picker"
       [owlDateTime]="picker"
       [placeholder]="placeholder"
@@ -18,11 +21,11 @@
       [value]="value"
       readonly
       class="input-default pr-9"
-    />
+      />
     <span
       [owlDateTimeTrigger]="picker"
       class="absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors"
-    >
+      >
       <fx-ui-hero-icon icon="calendar" [size]="20" class="text-text-primary"></fx-ui-hero-icon>
     </span>
   </div>
@@ -32,5 +35,7 @@
     [pickerType]="type"
     (afterPickerClosed)="onValueChange($event)"
   ></owl-date-time>
-  <div *ngIf="invalid" class="txt-invalid">{{ getErrorMessage(label) }}</div>
+  @if (invalid) {
+    <div class="txt-invalid">{{ getErrorMessage(label) }}</div>
+  }
 </div>

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

@@ -3,13 +3,14 @@
     href="/"
     class="h-[60px]"
     [ngClass]="{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }"
-  >
+    >
     @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 }"
-      />
+        />
     } @else {
       <div class="h-[30px] w-auto transition-all duration-300 ease-in-out"></div>
     }
@@ -17,29 +18,37 @@
   <div class="drawer-container" [@drawerExpand]="getDrawerState()">
     <!-- Navigation Items -->
     <nav class="drawer-nav">
-      <ng-container *ngFor="let item of items">
+      @for (item of items; track item) {
         <ng-container
           *ngTemplateOutlet="drawerItem; context: { $implicit: item, level: 0 }"
         ></ng-container>
-      </ng-container>
+      }
     </nav>
 
     <!-- Version -->
-    <div *ngIf="version" class="drawer-version" [matTooltip]="!isExpanded ? version : ''" matTooltipPosition="right">
-      <span *ngIf="isExpanded">{{ version }}</span>
-      <span *ngIf="!isExpanded" class="drawer-version-dot"></span>
-    </div>
+    @if (version) {
+      <div class="drawer-version" [matTooltip]="!isExpanded ? version : ''" matTooltipPosition="right">
+        @if (isExpanded) {
+          <span>{{ version }}</span>
+        }
+        @if (!isExpanded) {
+          <span class="drawer-version-dot"></span>
+        }
+      </div>
+    }
   </div>
 
   <!-- Floating Toggle Button on right border -->
   <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"
     matTooltipPosition="right"
-  >
+    >
     <fx-ui-hero-icon
       [icon]="isExpanded ? 'chevron-left' : 'chevron-right'"
       [size]="16"
@@ -52,60 +61,68 @@
 <ng-template #drawerItem let-item let-level="level">
   <div class="drawer-item-wrapper">
     <!-- Item Button/Link -->
-    <a
-      *ngIf="item.route && !item.children"
-      [routerLink]="item.route"
-      class="drawer-item"
-      [class.active]="isActiveRoute(item.route)"
-      [class.has-children]="item.children && item.children.length > 0"
-      [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
-      [matTooltip]="!isExpanded ? item.label : ''"
-      matTooltipPosition="right"
-      matTooltipClass="text-text-primary text-xs font-semibold"
-      (click)="onItemClick(item, $event)"
-    >
-      <div class="item-content">
-        <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
-        <span *ngIf="isExpanded" class="item-label">{{ item.label }}</span>
-      </div>
-    </a>
+    @if (item.route && !item.children) {
+      <a
+        [routerLink]="item.route"
+        class="drawer-item"
+        [class.active]="isActiveRoute(item.route)"
+        [class.has-children]="item.children && item.children.length > 0"
+        [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
+        [matTooltip]="!isExpanded ? item.label : ''"
+        matTooltipPosition="right"
+        matTooltipClass="text-text-primary text-xs font-semibold"
+        (click)="onItemClick(item, $event)"
+        >
+        <div class="item-content">
+          <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
+          @if (isExpanded) {
+            <span class="item-label">{{ item.label }}</span>
+          }
+        </div>
+      </a>
+    }
 
-    <button
-      *ngIf="!item.route || item.children"
-      type="button"
-      class="drawer-item"
-      [class.active]="isActiveRoute(item.route)"
-      [class.has-children]="item.children && item.children.length > 0"
-      [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
-      [matTooltip]="!isExpanded ? item.label : ''"
-      matTooltipPosition="right"
-      matTooltipClass="text-text-primary text-sm font-semibold"
-      (click)="onItemClick(item, $event)"
-    >
-      <div class="item-content">
-        <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
-        <span *ngIf="isExpanded" class="item-label">{{ item.label }}</span>
-        <fx-ui-hero-icon
-          *ngIf="isExpanded && item.children && item.children.length > 0"
-          [icon]="'chevron-down'"
-          [size]="16"
-          class="chevron-icon"
-          [class.rotated]="isAccordionExpanded(item.id)"
-        ></fx-ui-hero-icon>
-      </div>
-    </button>
+    @if (!item.route || item.children) {
+      <button
+        type="button"
+        class="drawer-item"
+        [class.active]="isActiveRoute(item.route)"
+        [class.has-children]="item.children && item.children.length > 0"
+        [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
+        [matTooltip]="!isExpanded ? item.label : ''"
+        matTooltipPosition="right"
+        matTooltipClass="text-text-primary text-sm font-semibold"
+        (click)="onItemClick(item, $event)"
+        >
+        <div class="item-content">
+          <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
+          @if (isExpanded) {
+            <span class="item-label">{{ item.label }}</span>
+          }
+          @if (isExpanded && item.children && item.children.length > 0) {
+            <fx-ui-hero-icon
+              [icon]="'chevron-down'"
+              [size]="16"
+              class="chevron-icon"
+              [class.rotated]="isAccordionExpanded(item.id)"
+            ></fx-ui-hero-icon>
+          }
+        </div>
+      </button>
+    }
 
     <!-- Accordion Children -->
-    <div
-      *ngIf="item.children && item.children.length > 0"
-      class="accordion-children"
-      [@accordionExpand]="getAccordionState(item.id)"
-    >
-      <ng-container *ngFor="let child of item.children">
-        <ng-container
-          *ngTemplateOutlet="drawerItem; context: { $implicit: child, level: level + 1 }"
-        ></ng-container>
-      </ng-container>
-    </div>
+    @if (item.children && item.children.length > 0) {
+      <div
+        class="accordion-children"
+        [@accordionExpand]="getAccordionState(item.id)"
+        >
+        @for (child of item.children; track child) {
+          <ng-container
+            *ngTemplateOutlet="drawerItem; context: { $implicit: child, level: level + 1 }"
+          ></ng-container>
+        }
+      </div>
+    }
   </div>
 </ng-template>

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>
   }