@foxeltech/angular-ui 0.3.1 → 0.7.44

package/src/lib/ui/components/project-card/project-card.component.html

@@ -0,0 +1,102 @@
+<button
+  type="button"
+  class="card-common bg-surface w-full flex flex-col gap-normal hover:border-accent hover:shadow-md transition-all"
+  (click)="open.emit(card())"
+>
+  <!-- Header: avatar + name/sub + score chip (design 12) -->
+  <div class="flex items-start justify-between gap-normal w-full">
+    <div class="flex items-start gap-normal min-w-0">
+      @if (card().avatar) {
+        <span
+          class="w-9 h-9 rounded-control bg-accent-soft text-accent flex items-center justify-center shrink-0 txt-utility-caption font-bold uppercase"
+          style="font-family: var(--og-font-figure)"
+          >{{ card().avatar }}</span
+        >
+      }
+      <div class="min-w-0">
+        <div class="txt-heading-06 truncate text-left">{{ card().name }}</div>
+        @if (card().sub; as sub) {
+          <div class="flex items-center gap-xs txt-utility-description mt-xs">
+            @if (sub.icon) {
+              <fx-ui-hero-icon [icon]="sub.icon" [size]="13" class="flex shrink-0" />
+            }
+            <span class="truncate">{{ sub.label }}</span>
+          </div>
+        } @else if (card().description) {
+          <div class="txt-card-content truncate mt-xs text-left">{{ card().description }}</div>
+        }
+      </div>
+    </div>
+    @if (card().score !== undefined) {
+      <div class="text-right shrink-0">
+        <span
+          class="txt-tag-label px-normal py-[2px] rounded-pill whitespace-nowrap"
+          [ngClass]="scoreChipClass()"
+          >{{ card().score }}</span
+        >
+        @if (card().scoreLabel) {
+          <div class="txt-utility-description mt-xs">{{ card().scoreLabel }}</div>
+        }
+      </div>
+    }
+  </div>
+
+  @if (card().chips?.length) {
+    <div class="flex flex-wrap gap-xs w-full">
+      @for (chip of card().chips; track chip.label) {
+        <span class="txt-tag-label px-normal py-[1px] rounded-pill" [ngClass]="chipClass(chip)">
+          {{ chip.label }}
+        </span>
+      }
+    </div>
+  }
+
+  <!-- Design-12 risk trend: toned blocks + caption line -->
+  @if (card().trend; as trend) {
+    <div class="w-full">
+      <div class="flex gap-xs w-full">
+        @for (tone of trend.tones; track $index) {
+          <span class="flex-1 h-4 rounded-[2px]" [ngClass]="blockClass(tone)"></span>
+        }
+      </div>
+      @if (trend.caption || trend.aside) {
+        <div class="flex items-center justify-between mt-xs txt-utility-description font-mono">
+          <span>{{ trend.caption }}</span>
+          <span>{{ trend.aside }}</span>
+        </div>
+      }
+    </div>
+  }
+
+  @if (card().spark?.length) {
+    <fx-ui-sparkbar class="w-full" [values]="card().spark!" [height]="24" />
+  }
+
+  <!-- Metric columns: figure + caption (design 12) -->
+  @if (card().metrics?.length) {
+    <div
+      class="grid gap-normal w-full"
+      [style.grid-template-columns]="'repeat(' + card().metrics!.length + ', minmax(0, 1fr))'"
+    >
+      @for (m of card().metrics; track m.label) {
+        <div class="min-w-0 text-left">
+          <div class="txt-heading-06" style="font-family: var(--og-font-figure)">{{ m.value }}</div>
+          <div class="txt-utility-description truncate">{{ m.label }}</div>
+        </div>
+      }
+    </div>
+  }
+
+  @if (card().meta || card().openLabel) {
+    <div
+      class="flex items-center justify-between w-full pt-normal border-t border-border-default"
+    >
+      <span class="txt-utility-description text-left">{{ card().meta }}</span>
+      @if (card().openLabel) {
+        <span class="txt-utility-caption font-bold text-accent whitespace-nowrap"
+          >{{ card().openLabel }} ›</span
+        >
+      }
+    </div>
+  }
+</button>

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

@@ -1,6 +1,6 @@
 <div
   class="w-full rounded-lg overflow-hidden"
-  [class]="class"
+  [class]="class()"
   role="radiogroup"
   [attr.aria-labelledby]="label ? groupId + '-label' : null"
   >
@@ -8,7 +8,7 @@
   @if (label) {
     <span class="txt-field-label block" [id]="groupId + '-label'">
       {{ label }}
-      @if (required) {
+      @if (required()) {
         <span class="txt-required" aria-hidden="true">*</span>
       }
       @if (tooltip) {
@@ -24,14 +24,14 @@
     </span>
   }
 
-  @for (opt of options; track opt) {
+  @for (opt of options(); track opt) {
     <button
       type="button"
       role="radio"
       [attr.aria-checked]="value === opt.value"
       (click)="onSelectValue(opt.value)"
       [disabled]="disabled"
-      [class.text-gray-900]="value !== opt.value"
+      [class.text-strong]="value !== opt.value"
       class="flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
       [matTooltip]="opt.tooltip || ''"
       matTooltipPosition="right"

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

@@ -1,8 +1,8 @@
-<div class="flex flex-col text-left mb-4 w-full" [class]="class">
+<div class="flex flex-col text-left mb-4 w-full" [class]="class()">
   <!-- 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" aria-hidden="true">*</span>} </span
+    @if(required()) {<span class="txt-required" aria-hidden="true">*</span>} </span
   >}
 
   <div
@@ -10,13 +10,13 @@
     role="radiogroup"
     [attr.aria-labelledby]="label ? groupId + '-label' : null"
   >
-    @for(opt of options; track opt){<button
+    @for(opt of options(); track opt){<button
       type="button"
       role="radio"
       [attr.aria-checked]="value === opt.value"
       (click)="onSelectValue(opt.value)"
       [disabled]="disabled"
-      [class.text-gray-900]="value !== opt.value"
+      [class.text-strong]="value !== opt.value"
       class="flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
     >
       <span

package/src/lib/ui/components/sample-frame/sample-frame.component.html

@@ -0,0 +1,18 @@
+<div class="relative rounded-lg border border-dashed border-warning/50 bg-warning/[0.03] p-normal">
+  <!-- flex-wrap + nowrap label: in narrow rails the chip drops to the next line
+       instead of the label breaking mid-word ("SAMPLE / LAYOUT"). -->
+  <div class="flex flex-wrap items-center gap-small mb-normal">
+    <span class="txt-tag-label text-warning uppercase tracking-wide whitespace-nowrap">{{ label() }}</span>
+    <span
+      class="inline-flex items-center gap-xs px-small py-[1px] rounded-pill border border-dashed border-warning/60 bg-warning/10 text-warning txt-tag-label whitespace-nowrap"
+      [attr.title]="tooltip"
+    >
+      <fx-ui-hero-icon icon="clock" [size]="11" class="flex" />
+      {{ pendingLabel() }}
+    </span>
+  </div>
+  <!-- Sample content is non-interactive: nothing here reflects real state. -->
+  <div class="pointer-events-none select-none opacity-90">
+    <ng-content></ng-content>
+  </div>
+</div>

package/src/lib/ui/components/score-badge/score-badge.component.html

@@ -0,0 +1,7 @@
+<span
+  class="inline-flex items-center justify-center rounded-control whitespace-nowrap"
+  [ngClass]="[badgeClass(), sizeClass()]"
+  style="font-family: var(--og-font-figure)"
+>
+  {{ score() }}@if (outOf() !== null) {<span class="opacity-60">&nbsp;/&nbsp;{{ outOf() }}</span>}
+</span>

package/src/lib/ui/components/screenshot-frame/screenshot-frame.component.html

@@ -0,0 +1,40 @@
+@if (label()) {
+  <div class="txt-utility-caption font-bold text-text-secondary mb-normal">{{ label() }}</div>
+}
+<div class="rounded-control border border-border bg-surface overflow-hidden">
+  <!-- Window chrome: traffic lights + mono file name + capture time -->
+  <div class="flex items-center gap-small px-normal py-small border-b border-border bg-surface-sunken">
+    <span class="flex items-center gap-xs shrink-0">
+      <span class="w-2 h-2 rounded-full bg-critical/70"></span>
+      <span class="w-2 h-2 rounded-full bg-warning/70"></span>
+      <span class="w-2 h-2 rounded-full bg-success/70"></span>
+    </span>
+    @if (fileName()) {
+      <span class="txt-utility-caption text-text-secondary truncate" style="font-family: var(--og-font-mono)">
+        {{ fileName() }}
+      </span>
+    }
+    @if (timestamp()) {
+      <span class="txt-utility-caption text-text-placeholder shrink-0" style="font-family: var(--og-font-mono)">
+        · {{ timestamp() }}
+      </span>
+    }
+  </div>
+
+  @if (src()) {
+    <img [src]="src()" [alt]="alt() || fileName()" class="block w-full object-cover" [style.height]="height()" />
+  } @else {
+    <div
+      class="flex flex-col items-center justify-center gap-normal px-large text-center"
+      [style.height]="height()"
+    >
+      <fx-ui-hero-icon icon="camera" [size]="22" class="flex text-text-placeholder"></fx-ui-hero-icon>
+      @if (caption()) {
+        <span class="txt-utility-caption text-text-placeholder max-w-[280px]">{{ caption() }}</span>
+      }
+    </div>
+  }
+</div>
+@if (src() && caption()) {
+  <div class="txt-utility-caption text-text-placeholder mt-normal">{{ caption() }}</div>
+}

package/src/lib/ui/components/search-bar/search-bar.component.html

@@ -3,7 +3,7 @@
   <input
     type="text"
     class="input-default px-9"
-    [attr.placeholder]="placeholder"
+    [attr.placeholder]="placeholder()"
     [disabled]="disabled"
     [value]="value"
     (input)="onValueChange($any($event.target).value)"

package/src/lib/ui/components/section-card/section-card.component.html

@@ -1,9 +1,22 @@
 <div class="card-common">
-  <div class="flex items-center gap-normal mb-large">
-    @if (icon) {
-      <fx-ui-hero-icon [ngClass]="iconClass" [icon]="icon" [size]="18"></fx-ui-hero-icon>
-    }
-    <span class="txt-heading-06">{{ title }}</span>
-  </div>
+  @if (titleStyle() === 'eyebrow') {
+    <div class="flex items-baseline justify-between gap-normal mb-large">
+      <span
+        class="txt-table-header uppercase"
+        style="letter-spacing: var(--og-tracking-label)"
+        >{{ title() }}</span
+      >
+      @if (aside()) {
+        <span class="txt-utility-description text-right">{{ aside() }}</span>
+      }
+    </div>
+  } @else {
+    <div class="flex items-center gap-normal mb-large">
+      @if (icon) {
+        <fx-ui-hero-icon [ngClass]="iconClass" [icon]="icon" [size]="18"></fx-ui-hero-icon>
+      }
+      <span class="txt-heading-06">{{ title() }}</span>
+    </div>
+  }
   <ng-content></ng-content>
 </div>

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

@@ -0,0 +1,42 @@
+<div
+  class="relative inline-grid max-w-full grid-flow-col auto-cols-fr items-stretch p-[3px] bg-surface-sunken border border-border rounded-full"
+  role="group"
+  [attr.aria-label]="ariaLabel()"
+>
+  <!-- Sliding thumb: one element that translates to the active option -->
+  @if (activeIndex() >= 0) {
+    <span
+      aria-hidden="true"
+      class="fx-segmented__thumb absolute top-[3px] bottom-[3px] left-[3px] rounded-full pointer-events-none"
+      [class]="thumbClass()"
+      [style.width]="thumbWidth()"
+      [style.transform]="thumbTransform()"
+    ></span>
+  }
+  @for (option of options(); track option.value) {
+    <button
+      type="button"
+      (click)="select(option)"
+      [disabled]="option.disabled"
+      [attr.aria-pressed]="option.value === value()"
+      class="relative z-[1] flex min-w-0 items-center justify-center gap-xs px-semi py-[5px] rounded-full text-[13px] leading-none font-medium whitespace-nowrap transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+      [class]="optionClass(option)"
+    >
+      @if (option.icon) {
+        <fx-ui-hero-icon [icon]="option.icon" [size]="14" class="flex" />
+      }
+      <!-- text-box trims Archivo's uneven leading → true optical centering
+           (Chrome 128+/Safari 18.2+; older browsers ignore it harmlessly).
+           truncate adds overflow:hidden, and the trimmed box ends at cap
+           height / baseline — so the dot on "i" and the tail on "y" fall
+           outside it and get clipped. py/-my pair gives both back without
+           changing the control's height. -->
+      <span class="min-w-0 truncate py-[3px] -my-[3px] [text-box:trim-both_cap_alphabetic]">{{ option.label }}</span>
+      @if (option.count !== undefined) {
+        <span class="txt-tag-label px-small rounded-pill bg-neutral-soft text-neutral-soft-fg">
+          {{ option.count }}
+        </span>
+      }
+    </button>
+  }
+</div>

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

@@ -0,0 +1,12 @@
+/* The thumb's motion is owned HERE, not by template utilities: consuming apps
+   can (and do — host theme fade) ship unlayered global `transition` rules that
+   override the Tailwind utilities layer and freeze the slide. Component styles
+   are unlayered + scoped, so they win. (anh Tú 29/08) */
+.fx-segmented__thumb {
+  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.2, 1), width 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
+  will-change: transform;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}

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

@@ -1,8 +1,8 @@
-<div class="mb-4 text-left w-full" [class]="class">
+<div class="mb-4 text-left w-full" [class]="class()">
   @if (label) {
     <label class="block txt-field-label" [attr.for]="fieldId">
       {{ label }}
-      @if (required) {
+      @if (required()) {
         <span class="txt-required" aria-hidden="true">*</span>
       }
       @if (tooltip) {
@@ -25,18 +25,18 @@
     >
     <mat-select
       [id]="fieldId"
-      [required]="!!required"
+      [required]="!!required()"
       [attr.aria-invalid]="invalid || null"
       [attr.aria-describedby]="invalid ? fieldId + '-error' : null"
-      [placeholder]="placeholder"
+      [placeholder]="placeholder()"
       [disabled]="disabled"
-      [multiple]="multiple"
+      [multiple]="multiple()"
       [value]="value"
       (selectionChange)="onSelectionChange($event.value)"
       (openedChange)="onOpened($event)"
       (blur)="onTouched()"
       >
-      @if (enableSearch) {
+      @if (enableSearch()) {
         <div class="px-semi w-full">
           <input
             type="text"

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

@@ -9,11 +9,11 @@
     </div>
   </div>
 
-  @for (c of range(cards); track c) {
+  @for (c of range(cards()); track c) {
     <div class="card-common flex flex-col gap-large">
       <div class="h-4 w-1/3 rounded bg-bg-hover"></div>
       <div class="flex flex-col gap-normal">
-        @for (r of range(rows); track r) {
+        @for (r of range(rows()); track r) {
           <div class="h-3 rounded bg-bg-hover" [style.width.%]="rowWidth(r)"></div>
         }
       </div>

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

@@ -1,5 +1,5 @@
 <div class="flex flex-col gap-normal animate-pulse">
-  @for (r of range(rows); track r) {
+  @for (r of range(rows()); track r) {
     <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-lg bg-bg-hover shrink-0"></div>

package/src/lib/ui/components/skeleton-table-loading/skeleton-table-loading.component.html

@@ -1,19 +1,19 @@
 <div class="w-full animate-pulse space-y-normal">
   <div
     class="grid gap-small"
-    [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }"
+    [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns() + ', minmax(0, 1fr))' }"
   >
-    @for(col of [].constructor(columns); track col) {
+    @for(col of [].constructor(columns()); track col) {
       <div class="h-6 bg-bg-hover rounded"></div>
     }
   </div>
 
-  @for(row of [].constructor(rows); track row) {
+  @for(row of [].constructor(rows()); track row) {
     <div
       class="grid gap-small"
-      [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }"
+      [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns() + ', minmax(0, 1fr))' }"
     >
-      @for(col of [].constructor(columns); track col) {
+      @for(col of [].constructor(columns()); track col) {
         <div class="h-7 bg-bg-hover rounded"></div>
       }
     </div>

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

@@ -11,24 +11,24 @@
     class="relative touch-none py-4"
     (click)="onTrackClick($event)"
     [attr.aria-disabled]="disabled"
-    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+    [attr.aria-orientation]="vertical() ? 'vertical' : 'horizontal'"
     >
     <div
       class="relative flex items-center"
-      [ngClass]="{ 'flex-col h-48': vertical }"
+      [ngClass]="{ 'flex-col h-48': vertical() }"
       >
       <div
-        class="relative flex-1 rounded-full bg-gray-600 h-2"
-        [ngClass]="{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical }"
+        class="relative flex-1 rounded-full bg-track h-2"
+        [ngClass]="{ 'w-1 rotate-0 h-full w-auto bg-track': vertical() }"
         >
-        @if (!vertical) {
+        @if (!vertical()) {
           <div
             class="absolute left-0 top-0 h-full rounded-full bg-primary"
             [style.width.%]="percent"
           ></div>
         }
 
-        @if (vertical) {
+        @if (vertical()) {
           <div
             class="absolute bottom-0 left-0 w-full rounded-full bg-primary"
             [style.height.%]="percent"
@@ -43,8 +43,8 @@
           [ngStyle]="thumbStyle()"
           role="slider"
           aria-label="Slider"
-          [attr.aria-valuemin]="min"
-          [attr.aria-valuemax]="max"
+          [attr.aria-valuemin]="min()"
+          [attr.aria-valuemax]="max()"
           [attr.aria-valuenow]="value"
           [attr.aria-disabled]="disabled"
           tabindex="0"

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

@@ -0,0 +1,14 @@
+<div
+  class="flex items-end gap-[2px]"
+  [style.height.px]="height()"
+  role="img"
+  [attr.aria-label]="'Trend: ' + values().join(', ')"
+>
+  @for (bar of bars(); track $index) {
+    <div
+      class="flex-1 min-w-[3px] rounded-[1px] opacity-80"
+      [ngClass]="barClass()"
+      [style.height.%]="bar"
+    ></div>
+  }
+</div>

package/src/lib/ui/components/stage-dots/stage-dots.component.html

@@ -0,0 +1,13 @@
+<div class="flex items-center gap-xs" role="tablist">
+  @for (i of dots(); track i) {
+    <button
+      type="button"
+      role="tab"
+      [attr.aria-selected]="i === current()"
+      [attr.aria-label]="'Stage ' + (i + 1)"
+      class="h-1.5 rounded-full cursor-pointer transition-all duration-150 hover:opacity-70"
+      [ngClass]="dotClass(i)"
+      (click)="dotClick.emit(i)"
+    ></button>
+  }
+</div>

package/src/lib/ui/components/stat-cards/stat-cards.component.html

@@ -1,18 +1,51 @@
 <div class="grid gap-normal" [ngStyle]="{ 'grid-template-columns': gridColumns }">
-  @for (card of cards; track card.label) {
-    <div class="card-common flex items-center gap-normal">
-      @if (card.icon) {
-        <div
-          class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
-          [ngClass]="boxClass(card)"
+  @for (card of cards(); track card.label) {
+    @if (variant() === 'figure') {
+      <div class="card-common flex flex-col gap-small min-w-0">
+        <span class="txt-utility-caption text-text-secondary truncate">{{ card.label }}</span>
+        <span
+          class="txt-heading-03"
+          [ngClass]="numClass(card)"
+          style="font-family: var(--og-font-figure)"
+          >{{ card.value }}</span
         >
-          <fx-ui-hero-icon [icon]="card.icon" [size]="20"></fx-ui-hero-icon>
+        @if (card.sub) {
+          <span class="txt-utility-caption" [ngClass]="subClass(card)">{{ card.sub }}</span>
+        }
+        @if (card.spark?.length) {
+          <fx-ui-sparkbar class="mt-xs" [values]="card.spark!" [height]="16" [tone]="card.tone ?? null" />
+        }
+      </div>
+    } @else {
+      <div class="card-common flex items-center gap-normal">
+        @if (card.icon) {
+          <div
+            class="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
+            [ngClass]="boxClass(card)"
+          >
+            <fx-ui-hero-icon [icon]="card.icon" [size]="20"></fx-ui-hero-icon>
+          </div>
+        }
+        <div class="flex flex-col min-w-0 flex-1">
+          <div class="flex items-baseline gap-small">
+            <span
+              class="txt-heading-04"
+              [ngClass]="numClass(card)"
+              style="font-family: var(--og-font-figure)"
+              >{{ card.value }}</span
+            >
+            @if (card.delta) {
+              <span class="text-xs font-semibold" [ngClass]="deltaClass(card)">
+                {{ card.delta.direction === 'up' ? '▲' : '▼' }} {{ card.delta.value }}
+              </span>
+            }
+          </div>
+          <span class="txt-utility-caption text-text-secondary truncate">{{ card.label }}</span>
+          @if (card.spark?.length) {
+            <fx-ui-sparkbar class="mt-xs" [values]="card.spark!" [height]="16" [tone]="card.tone ?? null" />
+          }
         </div>
-      }
-      <div class="flex flex-col min-w-0">
-        <span class="txt-heading-04" [ngClass]="numClass(card)">{{ card.value }}</span>
-        <span class="txt-utility-caption text-text-secondary truncate">{{ card.label }}</span>
       </div>
-    </div>
+    }
   }
 </div>

package/src/lib/ui/components/status-dot/status-dot.component.html

@@ -0,0 +1,13 @@
+<span
+  class="relative inline-flex shrink-0"
+  [style.width.px]="size()"
+  [style.height.px]="size()"
+>
+  @if (pulse()) {
+    <span
+      class="absolute inline-flex h-full w-full rounded-full opacity-60 animate-ping motion-reduce:animate-none"
+      [ngClass]="dotClass()"
+    ></span>
+  }
+  <span class="relative inline-flex h-full w-full rounded-full" [ngClass]="dotClass()"></span>
+</span>

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

@@ -2,7 +2,7 @@
   type="button"
   role="switch"
   [attr.aria-checked]="!!value"
-  [attr.aria-label]="ariaLabel || null"
+  [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]="{