@foxeltech/angular-ui 0.4.0 → 0.7.44

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

@@ -0,0 +1,15 @@
+@if (variant() === 'dot') {
+  <span
+    class="inline-block w-[7px] h-[7px] rounded-full bg-warning/70 align-middle"
+    [attr.title]="tooltip"
+    [attr.aria-label]="tooltip"
+  ></span>
+} @else {
+  <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 align-middle"
+    [attr.title]="tooltip"
+  >
+    <fx-ui-hero-icon icon="clock" [size]="11" class="flex" />
+    {{ label() }}
+  </span>
+}

package/src/lib/ui/components/pipeline-stepper/pipeline-stepper.component.html

@@ -0,0 +1,45 @@
+<ol class="flex items-start overflow-x-auto pb-small" role="list">
+  @for (stage of stages(); track stage.id; let i = $index; let last = $last) {
+    <li class="flex items-start" [class.flex-1]="!last" [attr.aria-current]="stateOf(stage) === 'active' ? 'step' : null">
+      <button
+        type="button"
+        class="flex flex-col items-center gap-xs min-w-20 px-xs"
+        [class.cursor-pointer]="canClick(stage)"
+        [class.cursor-default]="!canClick(stage)"
+        [tabindex]="canClick(stage) ? 0 : -1"
+        (click)="onStageClick(stage, i)"
+      >
+        <span
+          class="w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-semibold transition-colors"
+          [ngClass]="circleClass(stage)"
+        >
+          @switch (stateOf(stage)) {
+            @case ('done') {
+              <fx-ui-hero-icon icon="check" [size]="16" class="flex" />
+            }
+            @case ('error') {
+              <fx-ui-hero-icon icon="exclamation-triangle" [size]="16" class="flex" />
+            }
+            @default {
+              {{ i + 1 }}
+            }
+          }
+        </span>
+        <span class="text-xs text-center whitespace-nowrap" [ngClass]="labelClass(stage)">
+          {{ stage.label }}
+        </span>
+        @if (stage.description) {
+          <span class="txt-utility-description text-center whitespace-nowrap">
+            {{ stage.description }}
+          </span>
+        }
+      </button>
+      @if (!last) {
+        <div class="flex-1 h-[2px] mt-4 mx-xs rounded-pill min-w-6" [ngClass]="connectorClass(stage)"></div>
+      }
+    </li>
+  }
+</ol>
+<div class="mt-large">
+  <ng-content></ng-content>
+</div>

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

@@ -31,7 +31,7 @@
       [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

@@ -16,7 +16,7 @@
       [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/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/slider/slider.component.html

@@ -18,8 +18,8 @@
       [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()) {
           <div

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)"
+    @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/tab-group/tab-group.component.html

@@ -26,8 +26,14 @@
     #tabList
     role="tablist"
     class="relative flex overflow-x-auto no-scrollbar scroll-smooth"
+    [class.fx-tabs-frame]="variant() === 'page'"
     (scroll)="onScroll()"
     >
+    <!-- 'page' variant: one raised pill that SLIDES to the active tab
+         (anh Tú 29/08 — same motion as fx-ui-segmented) -->
+    @if (variant() === 'page') {
+      <span #pagePill aria-hidden="true" class="fx-tabs-pill"></span>
+    }
     @for (tab of tabs(); track tab; let i = $index) {
       <button
         type="button"
@@ -37,31 +43,54 @@
         (click)="selectTab(i)"
         (keydown)="onTabKeydown($event, i)"
         class="tab-btn tab-bar-btn"
+        [class.tab-bar-btn-page]="variant() === 'page'"
         >
-        <div class="flex flex-row items-center justify-center">
+        <div class="flex flex-row items-center justify-center gap-xs">
           @if (tab.icon) {
             <fx-ui-hero-icon
               [icon]="tab.icon"
-              [size]="20"
+              [size]="variant() === 'page' ? 14 : 20"
               class="flex mr-[2px]"
-            [ngClass]="{
-              'text-gradient-primary-start mb-small': i === activeIndex,
-              'text-text-placeholder': i !== activeIndex,
-            }"
+              [ngClass]="
+                variant() === 'page'
+                  ? i === activeIndex
+                    ? 'text-strong'
+                    : 'text-text-placeholder'
+                  : i === activeIndex
+                    ? 'text-accent-fg mb-small'
+                    : 'text-text-placeholder'
+              "
             ></fx-ui-hero-icon>
           }
           <div
           [ngClass]="
-            i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'
+            variant() === 'page'
+              ? i === activeIndex
+                ? 'text-[13px] leading-none font-semibold text-strong [text-box:trim-both_cap_alphabetic]'
+                : 'text-[13px] leading-none font-medium text-muted [text-box:trim-both_cap_alphabetic]'
+              : i === activeIndex
+                ? 'txt-field-label text-accent-fg'
+                : 'txt-placeholder'
           "
             >
             {{ tab.label() }}
           </div>
+          @if (tab.count() !== null) {
+            <span
+              class="txt-tag-label px-normal py-[1px] rounded-pill"
+              [ngClass]="badgeClass(tab)"
+              style="font-family: var(--og-font-figure)"
+              >
+              {{ tab.count() }}
+            </span>
+          }
         </div>
       </button>
     }
 
-    <span #underline class="underline" style="width: 0; transform: translateX(0)"></span>
+    @if (variant() !== 'page') {
+      <span #underline class="underline" style="width: 0; transform: translateX(0)"></span>
+    }
   </div>
 
   <button

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

@@ -28,7 +28,7 @@
   position: absolute;
   bottom: 0;
   height: 2px;
-  background-color: rgb(var(--gradient-primary-start));
+  background-color: rgb(var(--og-accent));
   transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1),
     width 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
   will-change: transform, width;
@@ -49,3 +49,43 @@
 .tab-bar-btn {
   @apply relative px-large py-normal text-sm whitespace-nowrap transition-colors duration-200;
 }
+
+/* V2 'page' variant: workspace tab strip — pills inside a rounded frame
+   (design refs 02..04), active pill lifted on the raised surface. */
+.fx-tabs-frame {
+  /* w-fit: the frame hugs its tabs (design refs 02..04) instead of spanning the
+     page; max-w-full keeps the inner scroll working when tabs overflow.
+     rounded-full: the design strip is a capsule in every theme, not the
+     theme control radius (refs 02..04 — anh Tú 28/08). */
+  @apply gap-xs p-[3px] w-fit max-w-full bg-surface-sunken border border-border rounded-full;
+}
+
+.tab-bar-btn-page {
+  /* py 5px: the design strip is slim (~36px capsule) — anh Tú 28/08.
+     The active background lives on .fx-tabs-pill (sliding thumb), so the
+     button itself only switches text colour. z-index keeps it above the pill. */
+  @apply px-semi py-[5px] rounded-full border border-transparent text-muted z-[1];
+
+  &[aria-selected='false']:hover {
+    @apply text-strong;
+  }
+}
+
+/* Sliding active pill for the 'page' variant — positioned from the active
+   tab's offsetLeft/offsetWidth (tabs hug content, widths differ), so it
+   scrolls with the strip and needs no scroll-time recompute. */
+.fx-tabs-pill {
+  @apply absolute rounded-full bg-surface-raised border border-border shadow-sm pointer-events-none;
+  top: 3px; /* frame p-[3px] inset */
+  bottom: 3px;
+  left: 0;
+  width: 0;
+  transform: translateX(0);
+  transition:
+    transform 0.25s cubic-bezier(0.2, 0.9, 0.2, 1),
+    width 0.25s cubic-bezier(0.2, 0.9, 0.2, 1);
+  will-change: transform, width;
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}

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

@@ -11,13 +11,13 @@
 >
   @if (icon) {
     <fx-ui-hero-icon
-      [class]="`flex txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-white' : ''}`"
+      [class]="`flex txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-surface' : ''}`"
       [icon]="icon"
       [size]="18"
     ></fx-ui-hero-icon>
   }
 
-  <div [class]="`txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-white font-medium' : ''}`">
+  <div [class]="`txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-surface font-medium' : ''}`">
     {{ label() }}
   </div>
 </div>

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

@@ -0,0 +1,44 @@
+<button
+  type="button"
+  [matMenuTriggerFor]="themeMenu"
+  class="flex items-center gap-small px-normal py-small rounded-control border border-border-default bg-transparent cursor-pointer hover:bg-bg-hover transition-colors"
+  aria-label="Change theme"
+>
+  <span
+    class="w-4 h-4 rounded-full border border-border-strong/30 shrink-0"
+    [style.background]="
+      'linear-gradient(135deg, ' +
+      currentMeta().accent +
+      ' 50%, ' +
+      currentMeta().pageBg +
+      ' 50%)'
+    "
+  ></span>
+  <span class="txt-body-01 hidden md:inline">{{ currentMeta().label }}</span>
+  <fx-ui-hero-icon icon="chevron-down" [size]="14" class="flex text-text-secondary" />
+</button>
+
+<mat-menu #themeMenu="matMenu">
+  @for (theme of themes; track theme.name) {
+    <button
+      mat-menu-item
+      type="button"
+      (click)="select(theme.name)"
+      [attr.aria-current]="theme.name === current() ? 'true' : null"
+    >
+      <div class="flex items-center gap-normal min-w-40">
+        <span
+          class="w-5 h-5 rounded-full border border-border-strong/30 shrink-0"
+          [style.background]="
+            'linear-gradient(135deg, ' + theme.accent + ' 50%, ' + theme.pageBg + ' 50%)'
+          "
+        ></span>
+        <span class="txt-body-01 flex-1">{{ theme.label }}</span>
+        <span class="txt-utility-description">{{ theme.dark ? 'Dark' : 'Light' }}</span>
+        @if (theme.name === current()) {
+          <fx-ui-hero-icon icon="check" [size]="16" class="flex text-text-selected" />
+        }
+      </div>
+    </button>
+  }
+</mat-menu>