@foxeltech/angular-ui 0.2.0 → 0.3.1

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

@@ -3,52 +3,63 @@
   <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"
       viewBox="0 0 24 24"
       stroke="currentColor"
-    >
+      >
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
     </svg>
   </button>
 
   <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"
-      (click)="selectTab(i)"
-      class="tab-btn tab-bar-btn"
     >
-      <div class="flex flex-row items-center justify-center">
-        @if (tab.icon) {
-          <fx-ui-hero-icon
-            [icon]="tab.icon"
-            [size]="20"
-            class="flex mr-[2px]"
+    @for (tab of tabs.toArray(); track tab; let i = $index) {
+      <button
+        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">
+          @if (tab.icon) {
+            <fx-ui-hero-icon
+              [icon]="tab.icon"
+              [size]="20"
+              class="flex mr-[2px]"
             [ngClass]="{
               'text-gradient-primary-start mb-small': i === activeIndex,
               'text-text-placeholder': i !== activeIndex,
             }"
-          ></fx-ui-hero-icon>
-        }
-        <div
+            ></fx-ui-hero-icon>
+          }
+          <div
           [ngClass]="
             i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'
           "
-        >
-          {{ tab.label }}
+            >
+            {{ tab.label }}
+          </div>
         </div>
-      </div>
-    </button>
+      </button>
+    }
 
     <span #underline class="underline" style="width: 0; transform: translateX(0)"></span>
   </div>
@@ -56,17 +67,21 @@
   <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"
       viewBox="0 0 24 24"
       stroke="currentColor"
-    >
+      >
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
     </svg>
   </button>
@@ -74,9 +89,11 @@
 
 <!-- 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">
-      <ng-container *ngTemplateOutlet="tab.content"></ng-container>
-    </div>
-  </ng-container>
+  @for (tab of tabs.toArray(); track tab; let i = $index) {
+    @if (i === activeIndex) {
+      <div role="tabpanel" class="animate-fadeIn">
+        <ng-container *ngTemplateOutlet="tab.content"></ng-container>
+      </div>
+    }
+  }
 </div>

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',
@@ -8,41 +9,43 @@
     'border-warning': type === 'warning',
     'border-information': type === 'info'
   }"
->
-  <div class="">
+  >
+  <div class="" aria-hidden="true">
     @switch (type) { @case('success') {
-    <fx-ui-hero-icon
-      icon="check-circle"
-      [solid]="true"
-      [size]="30"
-      class="text-success"
-    ></fx-ui-hero-icon>
-    } @case('error') {
-    <fx-ui-hero-icon
-      icon="exclamation-circle"
-      [solid]="true"
-      [size]="30"
-      class="text-critical"
-    ></fx-ui-hero-icon>
-    } @case('warning') {
-    <fx-ui-hero-icon
-      icon="exclamation-triangle"
-      [solid]="true"
-      [size]="30"
-      class="text-warning"
-    ></fx-ui-hero-icon>
-    } @default {
-    <fx-ui-hero-icon
-      icon="information-circle"
-      [solid]="true"
-      [size]="30"
-      class="text-information"
-    ></fx-ui-hero-icon>
-    } }
-  </div>
+      <fx-ui-hero-icon
+        icon="check-circle"
+        [solid]="true"
+        [size]="30"
+        class="text-success"
+      ></fx-ui-hero-icon>
+      } @case('error') {
+      <fx-ui-hero-icon
+        icon="exclamation-circle"
+        [solid]="true"
+        [size]="30"
+        class="text-critical"
+      ></fx-ui-hero-icon>
+      } @case('warning') {
+      <fx-ui-hero-icon
+        icon="exclamation-triangle"
+        [solid]="true"
+        [size]="30"
+        class="text-warning"
+      ></fx-ui-hero-icon>
+      } @default {
+      <fx-ui-hero-icon
+        icon="information-circle"
+        [solid]="true"
+        [size]="30"
+        class="text-information"
+      ></fx-ui-hero-icon>
+      } }
+    </div>
 
-  <div class="flex flex-col">
-    <strong *ngIf="title" class="txt-field-label">{{ title }}</strong>
-    <p class="txt-default">{{ message }}</p>
+    <div class="flex flex-col">
+      @if (title) {
+        <strong class="txt-field-label">{{ title }}</strong>
+      }
+      <p class="txt-default">{{ message }}</p>
+    </div>
   </div>
-</div>

package/src/lib/ui/components/tree-diagram/tree-diagram.component.html

@@ -4,20 +4,21 @@
   <div
     #root
     class="mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center"
-  >
+    >
     {{ data.label }}
   </div>
 
   <!-- CHILDREN -->
   <div class="mt-16 flex justify-center gap-16">
-    <div
-      *ngFor="let child of data.children"
-      #child
-      class="w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center"
-    >
-      <div class="font-semibold text-lg">{{ child.label }}</div>
-      <div class="mt-1 text-sm opacity-90">{{ child.status }}</div>
-    </div>
+    @for (child of data.children; track child) {
+      <div
+        #child
+        class="w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center"
+        >
+        <div class="font-semibold text-lg">{{ child.label }}</div>
+        <div class="mt-1 text-sm opacity-90">{{ child.status }}</div>
+      </div>
+    }
   </div>
 
   <!-- SVG CONNECTORS -->
@@ -25,16 +26,17 @@
     class="absolute inset-0 pointer-events-none"
     [attr.width]="svgWidth"
     [attr.height]="svgHeight"
-  >
-    <line
-      *ngFor="let line of lines"
-      [attr.x1]="line.x1"
-      [attr.y1]="line.y1"
-      [attr.x2]="line.x2"
-      [attr.y2]="line.y2"
-      stroke="#1f2937"
-      stroke-width="2"
-    />
+    >
+    @for (line of lines; track line) {
+      <line
+        [attr.x1]="line.x1"
+        [attr.y1]="line.y1"
+        [attr.x2]="line.x2"
+        [attr.y2]="line.y2"
+        stroke="#1f2937"
+        stroke-width="2"
+        />
+    }
   </svg>
 
 </div>

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

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