@fylib/adapter-angular 0.1.0 → 0.2.1

package/dist/layouts/slot.component.js

@@ -339,596 +339,596 @@ FySlotComponent = __decorate([
         selector: 'fy-slot',
         standalone: true,
         imports: [CommonModule, FyIconComponent, FyBadgeComponent],
-        template: `
-    <ng-template #projected>
-      <ng-content></ng-content>
-    </ng-template>
-
-    @switch (name) {
-      @case ('sidebar') {
-        <button
-          type="button"
-          class="fy-sidebar-toggle"
-          [class.fy-sidebar-toggle--tongue]="sidebarToggleMode === 'tongue'"
-          [attr.data-tongue-pos]="sidebarTonguePos"
-          (click)="toggleSidebar()"
-        >
-          <fy-icon [name]="sidebarToggleIconName"></fy-icon>
-        </button>
-        <div class="fy-slot__overlay" [class.fy-slot__overlay--open]="sidebarOpen" (click)="toggleSidebar()"></div>
-        <div class="fy-slot__panel" [class.fy-slot__panel--open]="sidebarOpen">
-          <div class="fy-slot__sidebar-inner">
-            @if (sidebarLogoImgSrc || sidebarLogoSvgSrc) {
-              <div class="fy-slot__sidebar-logo">
-                <div class="fy-logo">
-                  <div class="fy-logo__image" [style.filter]="sidebarLogoFilter || computedSidebarLogoFilter || null">
-                    @if (sidebarLogoImgSrc) {
-                      <img [src]="sidebarLogoImgSrc" [alt]="sidebarLogoAlt || 'Logo'">
-                    } @else if (sidebarLogoSvgSrc) {
-                      <img [src]="sidebarLogoSvgSrc" [alt]="sidebarLogoAlt || 'Logo'">
-                    }
-                  </div>
-                  @if (sidebarLogoBadgeText) {
-                    <fy-badge
-                      [text]="sidebarLogoBadgeText"
-                      [background]="sidebarLogoBadgeBG ?? headerLogoBadgeBG ?? null"
-                      [textColor]="sidebarLogoBadgeTextColor ?? headerLogoBadgeTextColor ?? null"
-                      [borderRadius]="sidebarLogoBadgeRadius ?? headerLogoBadgeRadius ?? null"
-                      [shine]="(sidebarLogoBadgeShine ?? headerLogoBadgeShine) ?? null"></fy-badge>
-                  }
-                </div>
-              </div>
-            } @else {
-              <div class="fy-slot__sidebar-logo">
-                <div class="fy-logo">
-                  <div class="fy-logo__image" [style.filter]="sidebarLogoFilter || computedSidebarLogoFilter || null">
-                    <ng-content select="[fy-sidebar-logo]"></ng-content>
-                  </div>
-                  @if (sidebarLogoBadgeText) {
-                    <fy-badge
-                      [text]="sidebarLogoBadgeText"
-                      [background]="sidebarLogoBadgeBG ?? headerLogoBadgeBG ?? null"
-                      [textColor]="sidebarLogoBadgeTextColor ?? headerLogoBadgeTextColor ?? null"
-                      [borderRadius]="sidebarLogoBadgeRadius ?? headerLogoBadgeRadius ?? null"
-                      [shine]="(sidebarLogoBadgeShine ?? headerLogoBadgeShine) ?? null"></fy-badge>
-                  }
-                </div>
-              </div>
-            }
-            <div class="fy-slot__sidebar-header">
-              <ng-content select="[fy-sidebar-header]"></ng-content>
-            </div>
-            <div class="fy-slot__sidebar-links">
-              <ng-content select="[fy-sidebar-links]"></ng-content>
-            </div>
-            <div class="fy-slot__sidebar-footer">
-              <ng-content select="[fy-sidebar-footer]"></ng-content>
-              @if (copyrightText) {
-                <div class="fy-slot__copyright" [style.--fy-copyright-shine-duration]="copyrightShineDuration">
-                  <span class="fy-slot__copyright-text">&copy; {{ copyrightText }} · {{ currentYear }}</span>
-                </div>
-              }
-            </div>
-          </div>
-        </div>
-      }
-      @case ('header') {
-        <div class="fy-slot__overlay" [class.fy-slot__overlay--open]="headerMenuOpen" (click)="toggleHeaderMenu()"></div>
-        <header class="fy-slot__header-shell">
-          <div class="fy-slot__header-left">
-            @if (headerLogoImgSrc || headerLogoSvgSrc) {
-              <div class="fy-logo">
-                <div class="fy-logo__image" [style.filter]="headerLogoFilter || computedHeaderLogoFilter || null">
-                  @if (headerLogoImgSrc) {
-                    <img [src]="headerLogoImgSrc" [alt]="headerLogoAlt || 'Logo'">
-                  } @else if (headerLogoSvgSrc) {
-                    <img [src]="headerLogoSvgSrc" [alt]="headerLogoAlt || 'Logo'">
-                  }
-                </div>
-                @if (headerLogoBadgeText) {
-                  <fy-badge
-                    [text]="headerLogoBadgeText"
-                    [background]="headerLogoBadgeBG || null"
-                    [textColor]="headerLogoBadgeTextColor || null"
-                    [borderRadius]="headerLogoBadgeRadius || null"
-                    [shine]="headerLogoBadgeShine ?? null"></fy-badge>
-                }
-              </div>
-            } @else {
-              <div class="fy-logo">
-                <div class="fy-logo__image" [style.filter]="headerLogoFilter || computedHeaderLogoFilter || null">
-                  <ng-content select="[fy-header-logo]"></ng-content>
-                </div>
-                @if (headerLogoBadgeText) {
-                  <fy-badge
-                    [text]="headerLogoBadgeText"
-                    [background]="headerLogoBadgeBG || null"
-                    [textColor]="headerLogoBadgeTextColor || null"
-                    [borderRadius]="headerLogoBadgeRadius || null"
-                    [shine]="headerLogoBadgeShine ?? null"></fy-badge>
-                }
-              </div>
-            }
-          </div>
-          <div class="fy-slot__header-menus"
-               [class.fy-slot__header-menus--open]="headerMenuOpen"
-               [class.fy-anim-header-menu-slide-in]="headerMenuAnimClass==='fy-anim-header-menu-slide-in'"
-               [class.fy-anim-header-menu-slide-out]="headerMenuAnimClass==='fy-anim-header-menu-slide-out'"
-               [class.fy-anim-header-menu-macos-slide-in]="headerMenuAnimClass==='fy-anim-header-menu-macos-slide-in'"
-               [class.fy-anim-header-menu-macos-slide-out]="headerMenuAnimClass==='fy-anim-header-menu-macos-slide-out'">
-            <nav class="fy-slot__header-links fy-slot__header-links--center">
-              <ng-content select="[fy-header-links],[fy-header-links-center]"></ng-content>
-            </nav>
-            <nav class="fy-slot__header-links fy-slot__header-links--right">
-              <ng-content select="[fy-header-links-right]"></ng-content>
-            </nav>
-            
-            <!-- Copyright dentro do menu no mobile -->
-            @if (copyrightText) {
-              <div class="fy-slot__copyright fy-slot__copyright--mobile" [style.--fy-copyright-shine-duration]="copyrightShineDuration">
-                <span class="fy-slot__copyright-text">&copy; {{ copyrightText }} · {{ currentYear }}</span>
-              </div>
-            }
-          </div>
-          <div class="fy-slot__header-meta">
-            <!-- Espaço para elementos meta projetados (como notification-menu) -->
-            <ng-content select="[fy-header-meta]"></ng-content>
-            
-            <!-- Outros links de cabeçalho que não são meta -->
-            <div class="fy-slot__header-links-right-meta">
-               <ng-content select="[fy-header-links-right]"></ng-content>
-            </div>
-            
-            <!-- Copyright fora do menu no desktop -->
-            @if (copyrightText) {
-              <div class="fy-slot__copyright fy-slot__copyright--desktop" [style.--fy-copyright-shine-duration]="copyrightShineDuration">
-                <span class="fy-slot__copyright-text">&copy; {{ copyrightText }} · {{ currentYear }}</span>
-              </div>
-            }
-            <button type="button" class="fy-slot__header-toggle" (click)="toggleHeaderMenu()">
-              <fy-icon [name]="sidebarToggleIconName"></fy-icon>
-            </button>
-          </div>
-        </header>
-      }
-
-      @default {
-        <ng-container [ngTemplateOutlet]="projected"></ng-container>
-      }
-    }
+        template: `
+    <ng-template #projected>
+      <ng-content></ng-content>
+    </ng-template>
+
+    @switch (name) {
+      @case ('sidebar') {
+        <button
+          type="button"
+          class="fy-sidebar-toggle"
+          [class.fy-sidebar-toggle--tongue]="sidebarToggleMode === 'tongue'"
+          [attr.data-tongue-pos]="sidebarTonguePos"
+          (click)="toggleSidebar()"
+        >
+          <fy-icon [name]="sidebarToggleIconName"></fy-icon>
+        </button>
+        <div class="fy-slot__overlay" [class.fy-slot__overlay--open]="sidebarOpen" (click)="toggleSidebar()"></div>
+        <div class="fy-slot__panel" [class.fy-slot__panel--open]="sidebarOpen">
+          <div class="fy-slot__sidebar-inner">
+            @if (sidebarLogoImgSrc || sidebarLogoSvgSrc) {
+              <div class="fy-slot__sidebar-logo">
+                <div class="fy-logo">
+                  <div class="fy-logo__image" [style.filter]="sidebarLogoFilter || computedSidebarLogoFilter || null">
+                    @if (sidebarLogoImgSrc) {
+                      <img [src]="sidebarLogoImgSrc" [alt]="sidebarLogoAlt || 'Logo'">
+                    } @else if (sidebarLogoSvgSrc) {
+                      <img [src]="sidebarLogoSvgSrc" [alt]="sidebarLogoAlt || 'Logo'">
+                    }
+                  </div>
+                  @if (sidebarLogoBadgeText) {
+                    <fy-badge
+                      [text]="sidebarLogoBadgeText"
+                      [background]="sidebarLogoBadgeBG ?? headerLogoBadgeBG ?? null"
+                      [textColor]="sidebarLogoBadgeTextColor ?? headerLogoBadgeTextColor ?? null"
+                      [borderRadius]="sidebarLogoBadgeRadius ?? headerLogoBadgeRadius ?? null"
+                      [shine]="(sidebarLogoBadgeShine ?? headerLogoBadgeShine) ?? null"></fy-badge>
+                  }
+                </div>
+              </div>
+            } @else {
+              <div class="fy-slot__sidebar-logo">
+                <div class="fy-logo">
+                  <div class="fy-logo__image" [style.filter]="sidebarLogoFilter || computedSidebarLogoFilter || null">
+                    <ng-content select="[fy-sidebar-logo]"></ng-content>
+                  </div>
+                  @if (sidebarLogoBadgeText) {
+                    <fy-badge
+                      [text]="sidebarLogoBadgeText"
+                      [background]="sidebarLogoBadgeBG ?? headerLogoBadgeBG ?? null"
+                      [textColor]="sidebarLogoBadgeTextColor ?? headerLogoBadgeTextColor ?? null"
+                      [borderRadius]="sidebarLogoBadgeRadius ?? headerLogoBadgeRadius ?? null"
+                      [shine]="(sidebarLogoBadgeShine ?? headerLogoBadgeShine) ?? null"></fy-badge>
+                  }
+                </div>
+              </div>
+            }
+            <div class="fy-slot__sidebar-header">
+              <ng-content select="[fy-sidebar-header]"></ng-content>
+            </div>
+            <div class="fy-slot__sidebar-links">
+              <ng-content select="[fy-sidebar-links]"></ng-content>
+            </div>
+            <div class="fy-slot__sidebar-footer">
+              <ng-content select="[fy-sidebar-footer]"></ng-content>
+              @if (copyrightText) {
+                <div class="fy-slot__copyright" [style.--fy-copyright-shine-duration]="copyrightShineDuration">
+                  <span class="fy-slot__copyright-text">&copy; {{ copyrightText }} · {{ currentYear }}</span>
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      }
+      @case ('header') {
+        <div class="fy-slot__overlay" [class.fy-slot__overlay--open]="headerMenuOpen" (click)="toggleHeaderMenu()"></div>
+        <header class="fy-slot__header-shell">
+          <div class="fy-slot__header-left">
+            @if (headerLogoImgSrc || headerLogoSvgSrc) {
+              <div class="fy-logo">
+                <div class="fy-logo__image" [style.filter]="headerLogoFilter || computedHeaderLogoFilter || null">
+                  @if (headerLogoImgSrc) {
+                    <img [src]="headerLogoImgSrc" [alt]="headerLogoAlt || 'Logo'">
+                  } @else if (headerLogoSvgSrc) {
+                    <img [src]="headerLogoSvgSrc" [alt]="headerLogoAlt || 'Logo'">
+                  }
+                </div>
+                @if (headerLogoBadgeText) {
+                  <fy-badge
+                    [text]="headerLogoBadgeText"
+                    [background]="headerLogoBadgeBG || null"
+                    [textColor]="headerLogoBadgeTextColor || null"
+                    [borderRadius]="headerLogoBadgeRadius || null"
+                    [shine]="headerLogoBadgeShine ?? null"></fy-badge>
+                }
+              </div>
+            } @else {
+              <div class="fy-logo">
+                <div class="fy-logo__image" [style.filter]="headerLogoFilter || computedHeaderLogoFilter || null">
+                  <ng-content select="[fy-header-logo]"></ng-content>
+                </div>
+                @if (headerLogoBadgeText) {
+                  <fy-badge
+                    [text]="headerLogoBadgeText"
+                    [background]="headerLogoBadgeBG || null"
+                    [textColor]="headerLogoBadgeTextColor || null"
+                    [borderRadius]="headerLogoBadgeRadius || null"
+                    [shine]="headerLogoBadgeShine ?? null"></fy-badge>
+                }
+              </div>
+            }
+          </div>
+          <div class="fy-slot__header-menus"
+               [class.fy-slot__header-menus--open]="headerMenuOpen"
+               [class.fy-anim-header-menu-slide-in]="headerMenuAnimClass==='fy-anim-header-menu-slide-in'"
+               [class.fy-anim-header-menu-slide-out]="headerMenuAnimClass==='fy-anim-header-menu-slide-out'"
+               [class.fy-anim-header-menu-macos-slide-in]="headerMenuAnimClass==='fy-anim-header-menu-macos-slide-in'"
+               [class.fy-anim-header-menu-macos-slide-out]="headerMenuAnimClass==='fy-anim-header-menu-macos-slide-out'">
+            <nav class="fy-slot__header-links fy-slot__header-links--center">
+              <ng-content select="[fy-header-links],[fy-header-links-center]"></ng-content>
+            </nav>
+            <nav class="fy-slot__header-links fy-slot__header-links--right">
+              <ng-content select="[fy-header-links-right]"></ng-content>
+            </nav>
+            
+            <!-- Copyright dentro do menu no mobile -->
+            @if (copyrightText) {
+              <div class="fy-slot__copyright fy-slot__copyright--mobile" [style.--fy-copyright-shine-duration]="copyrightShineDuration">
+                <span class="fy-slot__copyright-text">&copy; {{ copyrightText }} · {{ currentYear }}</span>
+              </div>
+            }
+          </div>
+          <div class="fy-slot__header-meta">
+            <!-- Espaço para elementos meta projetados (como notification-menu) -->
+            <ng-content select="[fy-header-meta]"></ng-content>
+            
+            <!-- Outros links de cabeçalho que não são meta -->
+            <div class="fy-slot__header-links-right-meta">
+               <ng-content select="[fy-header-links-right]"></ng-content>
+            </div>
+            
+            <!-- Copyright fora do menu no desktop -->
+            @if (copyrightText) {
+              <div class="fy-slot__copyright fy-slot__copyright--desktop" [style.--fy-copyright-shine-duration]="copyrightShineDuration">
+                <span class="fy-slot__copyright-text">&copy; {{ copyrightText }} · {{ currentYear }}</span>
+              </div>
+            }
+            <button type="button" class="fy-slot__header-toggle" (click)="toggleHeaderMenu()">
+              <fy-icon [name]="sidebarToggleIconName"></fy-icon>
+            </button>
+          </div>
+        </header>
+      }
+
+      @default {
+        <ng-container [ngTemplateOutlet]="projected"></ng-container>
+      }
+    }
   `,
         host: {
             '[style.grid-area]': 'name',
             '[class]': 'hostClass',
             '[attr.data-slot]': 'name'
         },
-        styles: [`
-    .fy-slot { display: block; position: relative; }
-
-    body.fy-no-scroll {
-      overflow: hidden !important;
-    }
-
-    .fy-slot__overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      background-color: rgba(0, 0, 0, 0.45);
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.25s ease;
-      z-index: 100;
-    }
-
-    .fy-slot__overlay--open {
-      opacity: 1;
-      pointer-events: auto;
-    }
-
-    .fy-slot--header {
-      z-index: 110;
-      min-height: var(--fy-layout-header-height, 64px);
-      padding: 0;
-      display: flex;
-      align-items: center;
-    }
-
-    .fy-slot__header-shell {
-      display: grid;
-      grid-auto-flow: column;
-      grid-template-columns: auto 1fr auto auto;
-      align-items: center;
-      gap: var(--fy-spacing-md, 16px);
-      width: 100%;
-      position: relative;
-      z-index: 110;
-      min-height: inherit;
-      padding: var(--fy-layout-header-padding, 0 24px);
-      background-color: var(--fy-layout-header-background, var(--fy-colors-surface, #fff));
-      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
-      box-shadow: var(--fy-layout-header-shadow, 0 1px 0 rgba(0,0,0,0.06));
-    }
-
-    .fy-slot__header-left { display: flex; align-items: center; gap: var(--fy-spacing-md, 16px); flex-shrink: 0; }
-    .fy-slot__header-menus { display: contents; }
-    .fy-slot__header-links {
-      display: flex;
-      align-items: center;
-      gap: var(--fy-spacing-md, 16px);
-      min-width: 0;
-      width: max-content;
-    }
-    .fy-slot__header-links.fy-slot__header-links--left { justify-self: start; justify-content: flex-start; }
-    .fy-slot__header-links.fy-slot__header-links--center { justify-self: center; justify-content: center; }
-    .fy-slot__header-links.fy-slot__header-links--right { justify-self: end; justify-content: flex-end; }
-    .fy-slot__header-left .fy-logo { position: relative; display: inline-block; }
-    .fy-slot__header-left .fy-logo__image img,
-    .fy-slot__header-left .fy-logo__image svg { display: block; height: 28px; width: auto; }
-    .fy-slot__header-left .fy-logo fy-badge { position: absolute; top: -6px; right: -6px; z-index: 1; }
-    .fy-slot__header-left .fy-logo fy-badge .fy-badge { position: static; }
-
-    .fy-slot__header-meta {
-      display: flex;
-      align-items: center;
-      gap: var(--fy-spacing-md, 16px);
-      flex-shrink: 0;
-    }
-
-    .fy-slot__header-links-right-meta {
-      display: none;
-    }
-
-    .fy-slot__header-meta ::ng-deep fy-notification-menu {
-      display: block;
-    }
-
-    .fy-slot__header-toggle {
-      display: none;
-      width: 40px;
-      height: 40px;
-      border-radius: var(--fy-layout-header-toggle-borderRadius, 999px);
-      border: 1px solid var(--fy-layout-header-toggle-borderColor, transparent);
-      background-color: var(--fy-layout-header-toggle-background, var(--fy-colors-primary, #2563eb));
-      color: var(--fy-layout-header-toggle-textColor, #fff);
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      font-size: 18px;
-    }
-
-    .fy-slot__header-toggle .fy-icon { font-size: 18px; }
-    .fy-slot__header-shell {
-      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
-    }
-    .fy-slot--header .fy-nav-link {
-      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
-    }
-
-    .fy-slot--sidebar {
-      min-width: var(--fy-layout-sidebar-width, 260px);
-      padding: var(--fy-layout-sidebar-padding, 16px 0);
-      border-right: 1px solid var(--fy-colors-border, rgba(0,0,0,0.1));
-      background-color: var(--fy-layout-sidebar-background, var(--fy-colors-surface, transparent));
-    }
-
-    .fy-slot--sidebar-fixed {
-      height: 100%;
-      max-height: 100%;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .fy-slot--sidebar .fy-slot__panel {
-      height: 100%;
-      display: block;
-      background-color: var(--fy-layout-sidebar-background, var(--fy-colors-surface, #fff));
-      box-shadow: var(--fy-layout-sidebar-shadow, none);
-      color: var(--fy-colors-textOverlay, var(--fy-colors-text, inherit));
-    }
-
-    .fy-slot__sidebar-inner {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-    .fy-slot__sidebar-logo {
-      padding: var(--fy-spacing-md, 16px);
-      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
-      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
-    }
-    .fy-slot__sidebar-logo .fy-logo {
-      position: relative;
-      display: inline-block;
-      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
-    }
-    .fy-slot__sidebar-logo .fy-logo__image img,
-    .fy-slot__sidebar-logo .fy-logo__image svg {
-      display: block;
-      height: 32px;
-      width: auto;
-    }
-    .fy-slot__sidebar-logo .fy-logo fy-badge { position: absolute; top: -6px; right: -6px; z-index: 1; }
-    .fy-slot__sidebar-logo .fy-logo fy-badge .fy-badge { position: static; }
-
-    .fy-slot__sidebar-links {
-      flex: 1 1 auto;
-      overflow-y: auto;
-      padding-inline: var(--fy-spacing-md, 16px);
-      padding-top: var(--fy-spacing-md, 16px);
-      padding-bottom: var(--fy-spacing-md, 16px);
-      display: flex;
-      flex-direction: column;
-      gap: var(--fy-spacing-sm, 8px);
-    }
-    .fy-slot__sidebar-links > * {
-      display: flex;
-      flex-direction: column;
-      gap: var(--fy-spacing-sm, 8px);
-    }
-    .fy-slot--sidebar .fy-nav-link {
-      width: 100%;
-      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
-    }
-
-    .fy-slot__sidebar-footer {
-      flex-shrink: 0;
-      border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
-      padding: var(--fy-spacing-md, 16px);
-      display: flex;
-      flex-direction: column;
-      gap: var(--fy-spacing-sm, 8px);
-    }
-
-    .fy-slot__copyright--mobile { display: none; }
-    .fy-slot__copyright--desktop { display: block; }
-    
-    .fy-slot__copyright {
-      font-size: var(--fy-typography-fontSize-sm, 12px);
-      color: var(--fy-colors-secondary, #6b7280);
-    }
-
-    .fy-slot__copyright-text {
-      position: relative;
-      display: inline-block;
-      font-weight: var(--fy-typography-fontWeight-bold, 600);
-      background: linear-gradient(
-        120deg, 
-        var(--fy-colors-secondary, #6b7280) 0%, 
-        var(--fy-colors-secondary, #6b7280) 40%, 
-        var(--fy-colors-white, #ffffff) 50%, 
-        var(--fy-colors-secondary, #6b7280) 60%, 
-        var(--fy-colors-secondary, #6b7280) 100%
-      );
-      background-size: 200% auto;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      color: transparent;
-      animation: fy-copyright-shine var(--fy-copyright-shine-duration, 12s) linear infinite;
-    }
-
-    @keyframes fy-copyright-shine {
-      0% { background-position: 200% center; }
-      100% { background-position: -200% center; }
-    }
-
-    .fy-animations-disabled .fy-slot__copyright-text {
-      animation: none;
-      background: none;
-      -webkit-background-clip: initial;
-      -webkit-text-fill-color: initial;
-      color: var(--fy-colors-secondary, #6b7280);
-    }
-
-    .fy-sidebar-toggle {
-      display: none;
-      border-radius: var(--fy-layout-sidebar-toggle-borderRadius, 999px);
-      background-color: var(--fy-layout-sidebar-toggle-background, var(--fy-colors-primary, #2563eb));
-      color: var(--fy-layout-sidebar-toggle-textColor, #fff);
-    }
-
-    .fy-slot--content {
-      padding: var(--fy-layout-content-padding, var(--fy-spacing-lg, 24px));
-      overflow-y: auto;
-    }
-
-    @keyframes fy-copyright-shimmer {
-      0% {
-        background-position: 0% 50%;
-      }
-      50% {
-        background-position: 100% 50%;
-      }
-      100% {
-        background-position: 0% 50%;
-      }
-    }
-
-    @media (max-width: 768px) {
-      .fy-slot--header {
-        padding: 0;
-      }
-      .fy-slot__header-shell { 
-        align-items: center;
-        padding: 0 var(--fy-spacing-md, 16px);
-        background-color: var(--fy-layout-header-background, var(--fy-colors-surface, #ffffff));
-        z-index: 110;
-      }
-      .fy-slot__header-left { 
-        flex: 0 0 auto; 
-        position: relative;
-        z-index: 110;
-      }
-      .fy-slot__header-menus {
-        position: absolute;
-        top: 100%;
-        left: 0;
-        right: 0;
-        width: 100vw;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        background-color: inherit;
-        border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
-        padding: var(--fy-spacing-md, 16px);
-        max-height: 0;
-        overflow: hidden;
-        opacity: 0;
-        transform: translateY(-8px);
-        transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
-        z-index: 110;
-        gap: var(--fy-spacing-lg, 24px);
-      }
-      .fy-slot__header-menus--open {
-        max-height: 80vh;
-        opacity: 1;
-        transform: translateY(0);
-        overflow: visible;
-      }
-      .fy-slot__header-links {
-        display: flex;
-        flex-direction: column;
-        gap: var(--fy-spacing-md, 16px);
-        width: 100%;
-        align-items: stretch;
-      }
-      .fy-slot__header-links .fy-nav-link {
-        width: 100%;
-        justify-content: center;
-      }
-
-      .fy-slot__header-meta {
-        flex: 1;
-        justify-content: flex-end;
-        position: relative;
-        z-index: 110;
-      }
-
-      .fy-slot__header-links-right-meta {
-        display: block !important;
-        width: 100%;
-      }
-      
-      .fy-slot__header-links-right-meta .fy-nav-link {
-        width: 100%;
-        justify-content: center;
-      }
-
-      .fy-slot__header-meta ::ng-deep fy-notification-menu {
-        display: block !important;
-      }
-
-      .fy-slot__header-menus ::ng-deep fy-notification-menu {
-        display: none !important;
-      }
-
-      .fy-slot__copyright--mobile {
-        display: block;
-        margin-top: auto;
-        padding-top: var(--fy-spacing-md);
-        border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.05));
-        width: 100%;
-        text-align: center;
-      }
-      .fy-slot__copyright--desktop {
-        display: none;
-      }
-
-      .fy-slot__header-toggle {
-        display: inline-flex;
-      }
-      .fy-slot--sidebar {
-        height: 0;
-        grid-area: unset !important;
-        min-width: 0 !important;
-        width: 0 !important;
-        overflow: hidden !important;
-      }
-
-      .fy-slot--sidebar .fy-slot__panel {
-        position: fixed;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        width: var(--fy-layout-sidebar-width, 260px);
-        max-width: 80vw;
-        background-color: var(--fy-colors-surface, #fff);
-        transform: translateX(-100%);
-        opacity: 0;
-        transition: transform 0.25s ease-out, opacity 0.25s ease-out;
-        z-index: 110;
-        overflow-y: auto;
-        pointer-events: none;
-      }
-
-      .fy-slot--sidebar .fy-slot__panel.fy-slot__panel--open {
-        transform: translateX(0);
-        opacity: 1;
-        box-shadow: 0 10px 40px rgba(0,0,0,0.35);
-        pointer-events: auto;
-      }
-
-      .fy-layout--app-layout .fy-slot--content {
-        width: 100%;
-      }
-
-      .fy-sidebar-toggle {
-        position: fixed;
-        bottom: 16px;
-        left: 16px;
-        width: 40px;
-        height: 40px;
-        border-radius: var(--fy-layout-sidebar-toggle-borderRadius, 999px);
-        border: 1px solid var(--fy-layout-sidebar-toggle-borderColor, transparent);
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        background-color: var(--fy-layout-sidebar-toggle-background, var(--fy-colors-primary, #2563eb));
-        color: var(--fy-layout-sidebar-toggle-textColor, #fff);
-        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
-        cursor: pointer;
-        z-index: 120;
-      }
-
-      .fy-sidebar-toggle.fy-sidebar-toggle--tongue {
-        left: 0;
-        transform: translateX(-50%);
-        bottom: auto;
-      }
-      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos="top"] { top: 16px; }
-      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos="middle"] { top: 50%; transform: translate(-50%, -50%); }
-      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos="bottom"] { top: auto; bottom: 16px; }
-
-      .fy-sidebar-toggle span {
-        display: inline;
-      }
-
-      .fy-sidebar-toggle .fy-icon { font-size: 18px; }
-    }
-
-    @media (min-width: 769px) {
-      .fy-slot__header-menus { display: contents; }
-      .fy-slot__header-links { max-height: none; opacity: 1; transform: none; position: static; padding: 0; border: 0; display: flex; }
-
-      .fy-slot__header-toggle {
-        display: none;
-      }
-      .fy-slot--sidebar .fy-slot__panel {
-        position: relative;
-        transform: none;
-        box-shadow: none;
-        width: 100%;
-        max-width: none;
-        opacity: 1;
-        pointer-events: auto;
-      }
-
-      .fy-sidebar-toggle {
-        display: none;
-      }
-    }
+        styles: [`
+    .fy-slot { display: block; position: relative; }
+
+    body.fy-no-scroll {
+      overflow: hidden !important;
+    }
+
+    .fy-slot__overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0, 0, 0, 0.45);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.25s ease;
+      z-index: 100;
+    }
+
+    .fy-slot__overlay--open {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .fy-slot--header {
+      z-index: 110;
+      min-height: var(--fy-layout-header-height, 64px);
+      padding: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .fy-slot__header-shell {
+      display: grid;
+      grid-auto-flow: column;
+      grid-template-columns: auto 1fr auto auto;
+      align-items: center;
+      gap: var(--fy-spacing-md, 16px);
+      width: 100%;
+      position: relative;
+      z-index: 110;
+      min-height: inherit;
+      padding: var(--fy-layout-header-padding, 0 24px);
+      background-color: var(--fy-layout-header-background, var(--fy-colors-surface, #fff));
+      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
+      box-shadow: var(--fy-layout-header-shadow, 0 1px 0 rgba(0,0,0,0.06));
+    }
+
+    .fy-slot__header-left { display: flex; align-items: center; gap: var(--fy-spacing-md, 16px); flex-shrink: 0; }
+    .fy-slot__header-menus { display: contents; }
+    .fy-slot__header-links {
+      display: flex;
+      align-items: center;
+      gap: var(--fy-spacing-md, 16px);
+      min-width: 0;
+      width: max-content;
+    }
+    .fy-slot__header-links.fy-slot__header-links--left { justify-self: start; justify-content: flex-start; }
+    .fy-slot__header-links.fy-slot__header-links--center { justify-self: center; justify-content: center; }
+    .fy-slot__header-links.fy-slot__header-links--right { justify-self: end; justify-content: flex-end; }
+    .fy-slot__header-left .fy-logo { position: relative; display: inline-block; }
+    .fy-slot__header-left .fy-logo__image img,
+    .fy-slot__header-left .fy-logo__image svg { display: block; height: 28px; width: auto; }
+    .fy-slot__header-left .fy-logo fy-badge { position: absolute; top: -6px; right: -6px; z-index: 1; }
+    .fy-slot__header-left .fy-logo fy-badge .fy-badge { position: static; }
+
+    .fy-slot__header-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--fy-spacing-md, 16px);
+      flex-shrink: 0;
+    }
+
+    .fy-slot__header-links-right-meta {
+      display: none;
+    }
+
+    .fy-slot__header-meta ::ng-deep fy-notification-menu {
+      display: block;
+    }
+
+    .fy-slot__header-toggle {
+      display: none;
+      width: 40px;
+      height: 40px;
+      border-radius: var(--fy-layout-header-toggle-borderRadius, 999px);
+      border: 1px solid var(--fy-layout-header-toggle-borderColor, transparent);
+      background-color: var(--fy-layout-header-toggle-background, var(--fy-colors-primary, #2563eb));
+      color: var(--fy-layout-header-toggle-textColor, #fff);
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-size: 18px;
+    }
+
+    .fy-slot__header-toggle .fy-icon { font-size: 18px; }
+    .fy-slot__header-shell {
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
+    }
+    .fy-slot--header .fy-nav-link {
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
+    }
+
+    .fy-slot--sidebar {
+      min-width: var(--fy-layout-sidebar-width, 260px);
+      padding: var(--fy-layout-sidebar-padding, 16px 0);
+      border-right: 1px solid var(--fy-colors-border, rgba(0,0,0,0.1));
+      background-color: var(--fy-layout-sidebar-background, var(--fy-colors-surface, transparent));
+    }
+
+    .fy-slot--sidebar-fixed {
+      height: 100%;
+      max-height: 100%;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .fy-slot--sidebar .fy-slot__panel {
+      height: 100%;
+      display: block;
+      background-color: var(--fy-layout-sidebar-background, var(--fy-colors-surface, #fff));
+      box-shadow: var(--fy-layout-sidebar-shadow, none);
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text, inherit));
+    }
+
+    .fy-slot__sidebar-inner {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .fy-slot__sidebar-logo {
+      padding: var(--fy-spacing-md, 16px);
+      border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
+    }
+    .fy-slot__sidebar-logo .fy-logo {
+      position: relative;
+      display: inline-block;
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
+    }
+    .fy-slot__sidebar-logo .fy-logo__image img,
+    .fy-slot__sidebar-logo .fy-logo__image svg {
+      display: block;
+      height: 32px;
+      width: auto;
+    }
+    .fy-slot__sidebar-logo .fy-logo fy-badge { position: absolute; top: -6px; right: -6px; z-index: 1; }
+    .fy-slot__sidebar-logo .fy-logo fy-badge .fy-badge { position: static; }
+
+    .fy-slot__sidebar-links {
+      flex: 1 1 auto;
+      overflow-y: auto;
+      padding-inline: var(--fy-spacing-md, 16px);
+      padding-top: var(--fy-spacing-md, 16px);
+      padding-bottom: var(--fy-spacing-md, 16px);
+      display: flex;
+      flex-direction: column;
+      gap: var(--fy-spacing-sm, 8px);
+    }
+    .fy-slot__sidebar-links > * {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fy-spacing-sm, 8px);
+    }
+    .fy-slot--sidebar .fy-nav-link {
+      width: 100%;
+      color: var(--fy-colors-textOverlay, var(--fy-colors-text));
+    }
+
+    .fy-slot__sidebar-footer {
+      flex-shrink: 0;
+      border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
+      padding: var(--fy-spacing-md, 16px);
+      display: flex;
+      flex-direction: column;
+      gap: var(--fy-spacing-sm, 8px);
+    }
+
+    .fy-slot__copyright--mobile { display: none; }
+    .fy-slot__copyright--desktop { display: block; }
+    
+    .fy-slot__copyright {
+      font-size: var(--fy-typography-fontSize-sm, 12px);
+      color: var(--fy-colors-secondary, #6b7280);
+    }
+
+    .fy-slot__copyright-text {
+      position: relative;
+      display: inline-block;
+      font-weight: var(--fy-typography-fontWeight-bold, 600);
+      background: linear-gradient(
+        120deg, 
+        var(--fy-colors-secondary, #6b7280) 0%, 
+        var(--fy-colors-secondary, #6b7280) 40%, 
+        var(--fy-colors-white, #ffffff) 50%, 
+        var(--fy-colors-secondary, #6b7280) 60%, 
+        var(--fy-colors-secondary, #6b7280) 100%
+      );
+      background-size: 200% auto;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      color: transparent;
+      animation: fy-copyright-shine var(--fy-copyright-shine-duration, 12s) linear infinite;
+    }
+
+    @keyframes fy-copyright-shine {
+      0% { background-position: 200% center; }
+      100% { background-position: -200% center; }
+    }
+
+    .fy-animations-disabled .fy-slot__copyright-text {
+      animation: none;
+      background: none;
+      -webkit-background-clip: initial;
+      -webkit-text-fill-color: initial;
+      color: var(--fy-colors-secondary, #6b7280);
+    }
+
+    .fy-sidebar-toggle {
+      display: none;
+      border-radius: var(--fy-layout-sidebar-toggle-borderRadius, 999px);
+      background-color: var(--fy-layout-sidebar-toggle-background, var(--fy-colors-primary, #2563eb));
+      color: var(--fy-layout-sidebar-toggle-textColor, #fff);
+    }
+
+    .fy-slot--content {
+      padding: var(--fy-layout-content-padding, var(--fy-spacing-lg, 24px));
+      overflow-y: auto;
+    }
+
+    @keyframes fy-copyright-shimmer {
+      0% {
+        background-position: 0% 50%;
+      }
+      50% {
+        background-position: 100% 50%;
+      }
+      100% {
+        background-position: 0% 50%;
+      }
+    }
+
+    @media (max-width: 768px) {
+      .fy-slot--header {
+        padding: 0;
+      }
+      .fy-slot__header-shell { 
+        align-items: center;
+        padding: 0 var(--fy-spacing-md, 16px);
+        background-color: var(--fy-layout-header-background, var(--fy-colors-surface, #ffffff));
+        z-index: 110;
+      }
+      .fy-slot__header-left { 
+        flex: 0 0 auto; 
+        position: relative;
+        z-index: 110;
+      }
+      .fy-slot__header-menus {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        width: 100vw;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: inherit;
+        border-bottom: 1px solid var(--fy-colors-border, rgba(0,0,0,0.08));
+        padding: var(--fy-spacing-md, 16px);
+        max-height: 0;
+        overflow: hidden;
+        opacity: 0;
+        transform: translateY(-8px);
+        transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
+        z-index: 110;
+        gap: var(--fy-spacing-lg, 24px);
+      }
+      .fy-slot__header-menus--open {
+        max-height: 80vh;
+        opacity: 1;
+        transform: translateY(0);
+        overflow: visible;
+      }
+      .fy-slot__header-links {
+        display: flex;
+        flex-direction: column;
+        gap: var(--fy-spacing-md, 16px);
+        width: 100%;
+        align-items: stretch;
+      }
+      .fy-slot__header-links .fy-nav-link {
+        width: 100%;
+        justify-content: center;
+      }
+
+      .fy-slot__header-meta {
+        flex: 1;
+        justify-content: flex-end;
+        position: relative;
+        z-index: 110;
+      }
+
+      .fy-slot__header-links-right-meta {
+        display: block !important;
+        width: 100%;
+      }
+      
+      .fy-slot__header-links-right-meta .fy-nav-link {
+        width: 100%;
+        justify-content: center;
+      }
+
+      .fy-slot__header-meta ::ng-deep fy-notification-menu {
+        display: block !important;
+      }
+
+      .fy-slot__header-menus ::ng-deep fy-notification-menu {
+        display: none !important;
+      }
+
+      .fy-slot__copyright--mobile {
+        display: block;
+        margin-top: auto;
+        padding-top: var(--fy-spacing-md);
+        border-top: 1px solid var(--fy-colors-border, rgba(0,0,0,0.05));
+        width: 100%;
+        text-align: center;
+      }
+      .fy-slot__copyright--desktop {
+        display: none;
+      }
+
+      .fy-slot__header-toggle {
+        display: inline-flex;
+      }
+      .fy-slot--sidebar {
+        height: 0;
+        grid-area: unset !important;
+        min-width: 0 !important;
+        width: 0 !important;
+        overflow: hidden !important;
+      }
+
+      .fy-slot--sidebar .fy-slot__panel {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: var(--fy-layout-sidebar-width, 260px);
+        max-width: 80vw;
+        background-color: var(--fy-colors-surface, #fff);
+        transform: translateX(-100%);
+        opacity: 0;
+        transition: transform 0.25s ease-out, opacity 0.25s ease-out;
+        z-index: 110;
+        overflow-y: auto;
+        pointer-events: none;
+      }
+
+      .fy-slot--sidebar .fy-slot__panel.fy-slot__panel--open {
+        transform: translateX(0);
+        opacity: 1;
+        box-shadow: 0 10px 40px rgba(0,0,0,0.35);
+        pointer-events: auto;
+      }
+
+      .fy-layout--app-layout .fy-slot--content {
+        width: 100%;
+      }
+
+      .fy-sidebar-toggle {
+        position: fixed;
+        bottom: 16px;
+        left: 16px;
+        width: 40px;
+        height: 40px;
+        border-radius: var(--fy-layout-sidebar-toggle-borderRadius, 999px);
+        border: 1px solid var(--fy-layout-sidebar-toggle-borderColor, transparent);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--fy-layout-sidebar-toggle-background, var(--fy-colors-primary, #2563eb));
+        color: var(--fy-layout-sidebar-toggle-textColor, #fff);
+        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+        cursor: pointer;
+        z-index: 120;
+      }
+
+      .fy-sidebar-toggle.fy-sidebar-toggle--tongue {
+        left: 0;
+        transform: translateX(-50%);
+        bottom: auto;
+      }
+      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos="top"] { top: 16px; }
+      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos="middle"] { top: 50%; transform: translate(-50%, -50%); }
+      .fy-sidebar-toggle.fy-sidebar-toggle--tongue[data-tongue-pos="bottom"] { top: auto; bottom: 16px; }
+
+      .fy-sidebar-toggle span {
+        display: inline;
+      }
+
+      .fy-sidebar-toggle .fy-icon { font-size: 18px; }
+    }
+
+    @media (min-width: 769px) {
+      .fy-slot__header-menus { display: contents; }
+      .fy-slot__header-links { max-height: none; opacity: 1; transform: none; position: static; padding: 0; border: 0; display: flex; }
+
+      .fy-slot__header-toggle {
+        display: none;
+      }
+      .fy-slot--sidebar .fy-slot__panel {
+        position: relative;
+        transform: none;
+        box-shadow: none;
+        width: 100%;
+        max-width: none;
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .fy-sidebar-toggle {
+        display: none;
+      }
+    }
   `],
         encapsulation: ViewEncapsulation.None
     }),