codexly-ui 0.6.9 → 0.6.11

package/assets/styles/_fonts.css

@@ -1,3 +1,3 @@
 /* Fonts are loaded dynamically by ClxThemeService via <link> injection.
-   Roboto is the default — preloaded here so the app renders before JS executes. */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+   DM Sans is the default — preloaded here so the app renders before JS executes. */
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

package/assets/styles/_theme.css

@@ -5,7 +5,7 @@
 
 /* ── Font body variable (overridden dynamically by ClxThemeService) ───────── */
 :root {
-  --clx-font-body: 'Roboto', ui-sans-serif, system-ui, sans-serif;
+  --clx-font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
 }
 
 /* ── Light theme (default) ────────────────────────────────────────────────── */

package/fesm2022/codexly-ui.mjs

@@ -416,7 +416,7 @@ const CLX_THEME_DEFAULTS = {
     borderRadius: 'md',
     defaultSize: 'md',
     defaultShape: 'rounded',
-    fontFamily: 'Roboto',
+    fontFamily: 'DM Sans',
 };
 // ── Injection token ───────────────────────────────────────────────────────────
 const CLX_THEME_CONFIG = new InjectionToken('CLX_THEME_CONFIG', { factory: () => CLX_THEME_DEFAULTS });
@@ -601,7 +601,7 @@ class ClxThemeService {
         const { color } = parseColorInput(input);
         const shades = dark
             ? { text: 100, label: 300, muted: 400, subtle: 500, faint: 600 }
-            : { text: 900, label: 600, muted: 500, subtle: 400, faint: 300 };
+            : { text: 900, label: 600, muted: 500, subtle: 500, faint: 300 };
         document.documentElement.style.setProperty('--clx-text', resolvePaletteHex(color, shades.text));
         document.documentElement.style.setProperty('--clx-text-label', resolvePaletteHex(color, shades.label));
         document.documentElement.style.setProperty('--clx-text-muted', resolvePaletteHex(color, shades.muted));
@@ -12380,8 +12380,8 @@ class ClxFabComponent {
     _sso = inject(ScrollStrategyOptions);
     _scrollStrategy = this._sso.reposition();
     _positions = [
-        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
-        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
+        { originX: 'center', originY: 'top', overlayX: 'center', overlayY: 'bottom', offsetY: -8 },
+        { originX: 'center', originY: 'bottom', overlayX: 'center', overlayY: 'top', offsetY: 8 },
     ];
     // ── State ────────────────────────────────────────────────────────────────────
     _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
@@ -12429,10 +12429,10 @@ class ClxFabComponent {
       (overlayOutsideClick)="_close()"
       (overlayKeydown)="_onKeydown($event)">
 
-      <div class="flex flex-col items-end gap-2 mb-2" role="menu">
+      <div class="flex flex-col items-center gap-2 mb-2" role="menu">
         @for (item of items(); track item.key; let i = $index) {
           <button clx-button type="button" shape="circle" [iconOnly]="true" [icon]="item.icon"
-            variant="light" [color]="item.color ?? _color()" [size]="_itemSize()" class="shadow-md"
+            variant="solid" [color]="item.color ?? _color()" [size]="_itemSize()" class="shadow-md"
             clxAnimate="slideInUp" trigger="onEnter" [delay]="i * 60" [duration]="220"
             [clxTooltip]="item.label" clxTooltipPosition="right"
             [attr.aria-label]="item.label"
@@ -12482,10 +12482,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
       (overlayOutsideClick)="_close()"
       (overlayKeydown)="_onKeydown($event)">
 
-      <div class="flex flex-col items-end gap-2 mb-2" role="menu">
+      <div class="flex flex-col items-center gap-2 mb-2" role="menu">
         @for (item of items(); track item.key; let i = $index) {
           <button clx-button type="button" shape="circle" [iconOnly]="true" [icon]="item.icon"
-            variant="light" [color]="item.color ?? _color()" [size]="_itemSize()" class="shadow-md"
+            variant="solid" [color]="item.color ?? _color()" [size]="_itemSize()" class="shadow-md"
             clxAnimate="slideInUp" trigger="onEnter" [delay]="i * 60" [duration]="220"
             [clxTooltip]="item.label" clxTooltipPosition="right"
             [attr.aria-label]="item.label"