@raintonic/formaui 0.9.2 → 0.9.3

package/fesm2022/raintonic-formaui-components-toolbar.mjs

@@ -3,8 +3,8 @@ import { Injectable, inject, ChangeDetectorRef, signal, input, computed, output,
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { FuiIconComponent } from '@raintonic/formaui/components/icon';
 import { FuiAvatarComponent } from '@raintonic/formaui/components/avatar';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
 import { FuiIntlBase } from '@raintonic/formaui/core';
 
 class FuiToolbarIntl extends FuiIntlBase {
@@ -120,6 +120,12 @@ class FuiToolbarComponent {
     userAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "userAriaLabel" }] : /* istanbul ignore next */ []));
     // New: show a dedicated sidebar toggle button
     showSidebarToggle = input(false, ...(ngDevMode ? [{ debugName: "showSidebarToggle" }] : /* istanbul ignore next */ []));
+    // New: show text labels next to icons for all menu buttons (per-item `showLabel` overrides).
+    showMenuLabels = input(false, ...(ngDevMode ? [{ debugName: "showMenuLabels" }] : /* istanbul ignore next */ []));
+    /** Resolve whether a menu item shows its label: per-item override → toolbar default. */
+    showItemLabel(item) {
+        return item.showLabel ?? this.showMenuLabels();
+    }
     /** Resolved navigation aria-label: input override → intl default. */
     resolvedNavAriaLabel = computed(() => {
         this._intlTick();
@@ -155,7 +161,7 @@ class FuiToolbarComponent {
         this.sidebarToggle.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiToolbarComponent, isStandalone: true, selector: "fui-toolbar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, activeMenuItemId: { classPropertyName: "activeMenuItemId", publicName: "activeMenuItemId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userAriaLabel: { classPropertyName: "userAriaLabel", publicName: "userAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick", userProfileClick: "userProfileClick", sidebarToggle: "sidebarToggle" }, host: { attributes: { "role": "banner" }, properties: { "class.fui-toolbar--fixed": "fixed()" }, classAttribute: "fui-toolbar" }, ngImport: i0, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n    [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n    title=\"Toggle sidebar\"\r\n    (click)=\"onSidebarToggleClick()\"\r\n  >\r\n    <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n  </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n  <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n  <ul class=\"fui-toolbar__menu\">\r\n    @for (item of menuItems(); track item.id) {\r\n      <li class=\"fui-toolbar__menu-item\">\r\n        @if (item.routerLink) {\r\n          <a\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [routerLink]=\"item.routerLink\"\r\n            [queryParams]=\"item.queryParams\"\r\n            [fragment]=\"item.fragment\"\r\n            [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [title]=\"item.label\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n          </a>\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n            [title]=\"item.label\"\r\n            (click)=\"onMenuItemClick(item)\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n          </button>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n  <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n  <div class=\"fui-toolbar__user\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-toolbar__user-button\"\r\n      aria-haspopup=\"menu\"\r\n      [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n      [title]=\"profile.name + ' - ' + profile.email\"\r\n      (click)=\"onUserProfileClick()\"\r\n    >\r\n      <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n      <div class=\"fui-toolbar__user-info\">\r\n        <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n        <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n      </div>\r\n\r\n      <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-7);--fui-toolbar-bg: var(--fui-bg-subtle);--fui-toolbar-border-color: var(--fui-border-default);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-item-size-md: 2.25rem;--fui-toolbar-item-size-sm: 2rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--fui-toolbar-height);padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:color-mix(in srgb,var(--fui-toolbar-bg) 80%,transparent);backdrop-filter:blur(var(--fui-toolbar-blur));border-bottom:var(--fui-border-width-sm) solid var(--fui-toolbar-border-color);z-index:var(--fui-z-sticky)}.fui-toolbar--fixed{position:fixed;top:0;left:0;right:0}.fui-toolbar__logo{display:flex;align-items:center;flex-shrink:0;height:100%;min-width:0;margin-right:.75rem}.fui-toolbar__logo [logo]{display:flex;align-items:center;height:100%}.fui-toolbar__logo [logo] img{max-height:var(--fui-toolbar-logo-image-max-height, 2rem);width:auto}.fui-toolbar__logo [logo] h1,.fui-toolbar__logo [logo] h2,.fui-toolbar__logo [logo] h3{margin:0;font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary)}.fui-toolbar__spacer{flex:1;min-width:0}.fui-toolbar__more-buttons{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);padding:0 .25rem;height:100%;display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:0}.fui-toolbar__more-buttons:empty{display:none}.fui-toolbar__nav{flex:1;display:flex;justify-content:flex-start;max-width:100%;overflow:hidden}.fui-toolbar__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.fui-toolbar__menu-item{display:flex}.fui-toolbar__menu-button{display:flex;align-items:center;justify-content:center;width:var(--fui-toolbar-item-size, 3rem);height:var(--fui-toolbar-item-size, 3rem);padding:0;border:none;border-radius:var(--fui-radius-lg, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}.fui-toolbar__menu-button.--sidebar-toggle{margin-right:.75rem}.fui-toolbar__menu-button:hover:not(:disabled){background-color:var(--fui-bg-subtle);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:active:not(:disabled),.fui-toolbar__menu-button.active:not(:disabled){background-color:var(--fui-bg-muted);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__menu-button--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-toolbar__user{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);display:flex;align-items:center;flex-shrink:0;margin-right:-1rem}.fui-toolbar__user-button{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:none;border-radius:var(--fui-radius-md, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease);min-width:0}.fui-toolbar__user-button:hover{background-color:var(--fui-bg-subtle)}.fui-toolbar__user-button:active{background-color:var(--fui-bg-muted)}.fui-toolbar__user-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}@media(max-width:768px){.fui-toolbar__user-info{display:none}}.fui-toolbar__user-name{font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);color:var(--fui-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--fui-toolbar-user-text-max-width, 8rem)}.fui-toolbar__user-email{font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8rem}.fui-toolbar__user-caret{flex-shrink:0;color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}@media(max-width:640px){.fui-toolbar__user-caret{display:none}}@media(max-width:768px){.fui-toolbar{padding:0 .75rem}.fui-toolbar__menu{gap:.125rem}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-md, 2.25rem);height:var(--fui-toolbar-item-size-md, 2.25rem)}}@media(max-width:640px){.fui-toolbar{padding:0 .5rem}.fui-toolbar__nav{flex:0;margin:0 .5rem}.fui-toolbar__menu{gap:0}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-sm, 2rem);height:var(--fui-toolbar-item-size-sm, 2rem)}.fui-toolbar__user-button{padding:.25rem;gap:.25rem}}[data-theme=dark] .fui-toolbar{border-bottom-color:var(--fui-border-default)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiAvatarComponent, selector: "fui-avatar", inputs: ["size", "fullName", "initials", "alt"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiToolbarComponent, isStandalone: true, selector: "fui-toolbar", inputs: { menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, activeMenuItemId: { classPropertyName: "activeMenuItemId", publicName: "activeMenuItemId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userAriaLabel: { classPropertyName: "userAriaLabel", publicName: "userAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null }, showMenuLabels: { classPropertyName: "showMenuLabels", publicName: "showMenuLabels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick", userProfileClick: "userProfileClick", sidebarToggle: "sidebarToggle" }, host: { attributes: { "role": "banner" }, properties: { "class.fui-toolbar--fixed": "fixed()" }, classAttribute: "fui-toolbar" }, ngImport: i0, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n    [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n    title=\"Toggle sidebar\"\r\n    (click)=\"onSidebarToggleClick()\"\r\n  >\r\n    <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n  </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n  <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n  <ul class=\"fui-toolbar__menu\">\r\n    @for (item of menuItems(); track item.id) {\r\n      <li class=\"fui-toolbar__menu-item\">\r\n        @if (item.routerLink) {\r\n          <a\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [class.fui-toolbar__menu-button--with-label]=\"showItemLabel(item)\"\r\n            [routerLink]=\"item.routerLink\"\r\n            [queryParams]=\"item.queryParams\"\r\n            [fragment]=\"item.fragment\"\r\n            [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [title]=\"item.label\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n            @if (showItemLabel(item)) {\r\n              <span class=\"fui-toolbar__menu-label\">{{ item.label }}</span>\r\n            }\r\n          </a>\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [class.fui-toolbar__menu-button--with-label]=\"showItemLabel(item)\"\r\n            [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n            [title]=\"item.label\"\r\n            (click)=\"onMenuItemClick(item)\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n            @if (showItemLabel(item)) {\r\n              <span class=\"fui-toolbar__menu-label\">{{ item.label }}</span>\r\n            }\r\n          </button>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n  <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n  <div class=\"fui-toolbar__user\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-toolbar__user-button\"\r\n      aria-haspopup=\"menu\"\r\n      [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n      [title]=\"profile.name + ' - ' + profile.email\"\r\n      (click)=\"onUserProfileClick()\"\r\n    >\r\n      <fui-avatar size=\"sm\" [fullName]=\"profile.name\" [initials]=\"profile.initials\"></fui-avatar>\r\n\r\n      <div class=\"fui-toolbar__user-info\">\r\n        <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n        <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n      </div>\r\n\r\n      <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-7);--fui-toolbar-bg: var(--fui-bg-subtle);--fui-toolbar-border-color: var(--fui-border-default);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-item-size-md: 2.25rem;--fui-toolbar-item-size-sm: 2rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:calc(var(--fui-toolbar-height) + var(--fui-border-width-sm));padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:color-mix(in srgb,var(--fui-toolbar-bg) 80%,transparent);backdrop-filter:blur(var(--fui-toolbar-blur));border-bottom:var(--fui-border-width-sm) solid var(--fui-toolbar-border-color);z-index:var(--fui-z-sticky)}.fui-toolbar--fixed{position:fixed;top:0;left:0;right:0}.fui-toolbar__logo{display:flex;align-items:center;flex-shrink:0;height:100%;min-width:0;margin-right:.75rem}.fui-toolbar__logo [logo]{display:flex;align-items:center;height:100%}.fui-toolbar__logo [logo] img{max-height:var(--fui-toolbar-logo-image-max-height, 2rem);width:auto}.fui-toolbar__logo [logo] h1,.fui-toolbar__logo [logo] h2,.fui-toolbar__logo [logo] h3{margin:0;font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary)}.fui-toolbar__spacer{flex:1;min-width:0}.fui-toolbar__more-buttons{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);padding:0 .25rem;height:100%;display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:0}.fui-toolbar__more-buttons:empty{display:none}.fui-toolbar__nav{flex:1;display:flex;justify-content:flex-start;max-width:100%;overflow:hidden}.fui-toolbar__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.fui-toolbar__menu-item{display:flex}.fui-toolbar__menu-button{display:flex;align-items:center;justify-content:center;width:var(--fui-toolbar-item-size, 3rem);height:var(--fui-toolbar-item-size, 3rem);padding:0;border:none;border-radius:var(--fui-radius-lg, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}.fui-toolbar__menu-button.--sidebar-toggle{margin-right:.75rem}.fui-toolbar__menu-button--with-label{width:auto;gap:.25rem;padding-inline:.5rem}.fui-toolbar__menu-button:hover:not(:disabled){background-color:var(--fui-bg-subtle);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:active:not(:disabled),.fui-toolbar__menu-button.active:not(:disabled){background-color:var(--fui-bg-muted);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__menu-button--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-toolbar__menu-label{white-space:nowrap;font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);color:inherit}.fui-toolbar__user{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);display:flex;align-items:center;flex-shrink:0;margin-right:-1rem}.fui-toolbar__user-button{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:none;border-radius:var(--fui-radius-md, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease);min-width:0}.fui-toolbar__user-button:hover{background-color:var(--fui-bg-subtle)}.fui-toolbar__user-button:active{background-color:var(--fui-bg-muted)}.fui-toolbar__user-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}@media(max-width:768px){.fui-toolbar__user-info{display:none}}.fui-toolbar__user-name{font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);color:var(--fui-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--fui-toolbar-user-text-max-width, 8rem)}.fui-toolbar__user-email{font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8rem}.fui-toolbar__user-caret{flex-shrink:0;color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}@media(max-width:640px){.fui-toolbar__user-caret{display:none}}@media(max-width:768px){.fui-toolbar{padding:0 .75rem}.fui-toolbar__menu{gap:.125rem}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-md, 2.25rem);height:var(--fui-toolbar-item-size-md, 2.25rem)}.fui-toolbar__menu-button--with-label{width:var(--fui-toolbar-item-size-md, 2.25rem);padding-inline:0;gap:0}.fui-toolbar__menu-label{display:none}}@media(max-width:640px){.fui-toolbar{padding:0 .5rem}.fui-toolbar__nav{flex:0;margin:0 .5rem}.fui-toolbar__menu{gap:0}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-sm, 2rem);height:var(--fui-toolbar-item-size-sm, 2rem)}.fui-toolbar__user-button{padding:.25rem;gap:.25rem}}[data-theme=dark] .fui-toolbar{--fui-toolbar-border-color: var(--fui-border-default)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiAvatarComponent, selector: "fui-avatar", inputs: ["size", "fullName", "initials", "alt"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiToolbarComponent, decorators: [{
             type: Component,
@@ -163,8 +169,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         class: 'fui-toolbar',
                         role: 'banner',
                         '[class.fui-toolbar--fixed]': 'fixed()',
-                    }, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n    [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n    title=\"Toggle sidebar\"\r\n    (click)=\"onSidebarToggleClick()\"\r\n  >\r\n    <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n  </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n  <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n  <ul class=\"fui-toolbar__menu\">\r\n    @for (item of menuItems(); track item.id) {\r\n      <li class=\"fui-toolbar__menu-item\">\r\n        @if (item.routerLink) {\r\n          <a\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [routerLink]=\"item.routerLink\"\r\n            [queryParams]=\"item.queryParams\"\r\n            [fragment]=\"item.fragment\"\r\n            [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [title]=\"item.label\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n          </a>\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n            [title]=\"item.label\"\r\n            (click)=\"onMenuItemClick(item)\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n          </button>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n  <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n  <div class=\"fui-toolbar__user\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-toolbar__user-button\"\r\n      aria-haspopup=\"menu\"\r\n      [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n      [title]=\"profile.name + ' - ' + profile.email\"\r\n      (click)=\"onUserProfileClick()\"\r\n    >\r\n      <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n      <div class=\"fui-toolbar__user-info\">\r\n        <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n        <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n      </div>\r\n\r\n      <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-7);--fui-toolbar-bg: var(--fui-bg-subtle);--fui-toolbar-border-color: var(--fui-border-default);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-item-size-md: 2.25rem;--fui-toolbar-item-size-sm: 2rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--fui-toolbar-height);padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:color-mix(in srgb,var(--fui-toolbar-bg) 80%,transparent);backdrop-filter:blur(var(--fui-toolbar-blur));border-bottom:var(--fui-border-width-sm) solid var(--fui-toolbar-border-color);z-index:var(--fui-z-sticky)}.fui-toolbar--fixed{position:fixed;top:0;left:0;right:0}.fui-toolbar__logo{display:flex;align-items:center;flex-shrink:0;height:100%;min-width:0;margin-right:.75rem}.fui-toolbar__logo [logo]{display:flex;align-items:center;height:100%}.fui-toolbar__logo [logo] img{max-height:var(--fui-toolbar-logo-image-max-height, 2rem);width:auto}.fui-toolbar__logo [logo] h1,.fui-toolbar__logo [logo] h2,.fui-toolbar__logo [logo] h3{margin:0;font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary)}.fui-toolbar__spacer{flex:1;min-width:0}.fui-toolbar__more-buttons{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);padding:0 .25rem;height:100%;display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:0}.fui-toolbar__more-buttons:empty{display:none}.fui-toolbar__nav{flex:1;display:flex;justify-content:flex-start;max-width:100%;overflow:hidden}.fui-toolbar__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.fui-toolbar__menu-item{display:flex}.fui-toolbar__menu-button{display:flex;align-items:center;justify-content:center;width:var(--fui-toolbar-item-size, 3rem);height:var(--fui-toolbar-item-size, 3rem);padding:0;border:none;border-radius:var(--fui-radius-lg, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}.fui-toolbar__menu-button.--sidebar-toggle{margin-right:.75rem}.fui-toolbar__menu-button:hover:not(:disabled){background-color:var(--fui-bg-subtle);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:active:not(:disabled),.fui-toolbar__menu-button.active:not(:disabled){background-color:var(--fui-bg-muted);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__menu-button--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-toolbar__user{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);display:flex;align-items:center;flex-shrink:0;margin-right:-1rem}.fui-toolbar__user-button{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:none;border-radius:var(--fui-radius-md, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease);min-width:0}.fui-toolbar__user-button:hover{background-color:var(--fui-bg-subtle)}.fui-toolbar__user-button:active{background-color:var(--fui-bg-muted)}.fui-toolbar__user-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}@media(max-width:768px){.fui-toolbar__user-info{display:none}}.fui-toolbar__user-name{font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);color:var(--fui-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--fui-toolbar-user-text-max-width, 8rem)}.fui-toolbar__user-email{font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8rem}.fui-toolbar__user-caret{flex-shrink:0;color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}@media(max-width:640px){.fui-toolbar__user-caret{display:none}}@media(max-width:768px){.fui-toolbar{padding:0 .75rem}.fui-toolbar__menu{gap:.125rem}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-md, 2.25rem);height:var(--fui-toolbar-item-size-md, 2.25rem)}}@media(max-width:640px){.fui-toolbar{padding:0 .5rem}.fui-toolbar__nav{flex:0;margin:0 .5rem}.fui-toolbar__menu{gap:0}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-sm, 2rem);height:var(--fui-toolbar-item-size-sm, 2rem)}.fui-toolbar__user-button{padding:.25rem;gap:.25rem}}[data-theme=dark] .fui-toolbar{border-bottom-color:var(--fui-border-default)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], userProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "userProfile", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], activeMenuItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeMenuItemId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "userAriaLabel", required: false }] }], showSidebarToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSidebarToggle", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], userProfileClick: [{ type: i0.Output, args: ["userProfileClick"] }], sidebarToggle: [{ type: i0.Output, args: ["sidebarToggle"] }] } });
+                    }, template: "<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n    [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n    title=\"Toggle sidebar\"\r\n    (click)=\"onSidebarToggleClick()\"\r\n  >\r\n    <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n  </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n  <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n  <ul class=\"fui-toolbar__menu\">\r\n    @for (item of menuItems(); track item.id) {\r\n      <li class=\"fui-toolbar__menu-item\">\r\n        @if (item.routerLink) {\r\n          <a\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [class.fui-toolbar__menu-button--with-label]=\"showItemLabel(item)\"\r\n            [routerLink]=\"item.routerLink\"\r\n            [queryParams]=\"item.queryParams\"\r\n            [fragment]=\"item.fragment\"\r\n            [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [title]=\"item.label\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n            @if (showItemLabel(item)) {\r\n              <span class=\"fui-toolbar__menu-label\">{{ item.label }}</span>\r\n            }\r\n          </a>\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [class.fui-toolbar__menu-button--with-label]=\"showItemLabel(item)\"\r\n            [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n            [title]=\"item.label\"\r\n            (click)=\"onMenuItemClick(item)\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n            @if (showItemLabel(item)) {\r\n              <span class=\"fui-toolbar__menu-label\">{{ item.label }}</span>\r\n            }\r\n          </button>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n  <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n  <div class=\"fui-toolbar__user\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-toolbar__user-button\"\r\n      aria-haspopup=\"menu\"\r\n      [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n      [title]=\"profile.name + ' - ' + profile.email\"\r\n      (click)=\"onUserProfileClick()\"\r\n    >\r\n      <fui-avatar size=\"sm\" [fullName]=\"profile.name\" [initials]=\"profile.initials\"></fui-avatar>\r\n\r\n      <div class=\"fui-toolbar__user-info\">\r\n        <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n        <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n      </div>\r\n\r\n      <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n    </button>\r\n  </div>\r\n}\r\n", styles: [".fui-toolbar{--fui-toolbar-height: 3rem;--fui-toolbar-padding-inline: var(--fui-spacing-7);--fui-toolbar-bg: var(--fui-bg-subtle);--fui-toolbar-border-color: var(--fui-border-default);--fui-toolbar-blur: 8px;--fui-toolbar-item-size: 3rem;--fui-toolbar-item-size-md: 2.25rem;--fui-toolbar-item-size-sm: 2rem;--fui-toolbar-logo-image-max-height: 2rem;--fui-toolbar-user-text-max-width: 8rem;contain:layout style;display:flex;align-items:center;justify-content:space-between;width:100%;height:calc(var(--fui-toolbar-height) + var(--fui-border-width-sm));padding-block:0;padding-inline:var(--fui-toolbar-padding-inline);background-color:color-mix(in srgb,var(--fui-toolbar-bg) 80%,transparent);backdrop-filter:blur(var(--fui-toolbar-blur));border-bottom:var(--fui-border-width-sm) solid var(--fui-toolbar-border-color);z-index:var(--fui-z-sticky)}.fui-toolbar--fixed{position:fixed;top:0;left:0;right:0}.fui-toolbar__logo{display:flex;align-items:center;flex-shrink:0;height:100%;min-width:0;margin-right:.75rem}.fui-toolbar__logo [logo]{display:flex;align-items:center;height:100%}.fui-toolbar__logo [logo] img{max-height:var(--fui-toolbar-logo-image-max-height, 2rem);width:auto}.fui-toolbar__logo [logo] h1,.fui-toolbar__logo [logo] h2,.fui-toolbar__logo [logo] h3{margin:0;font-size:var(--fui-text-lg);font-weight:var(--fui-weight-semibold);color:var(--fui-text-primary)}.fui-toolbar__spacer{flex:1;min-width:0}.fui-toolbar__more-buttons{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);padding:0 .25rem;height:100%;display:flex;align-items:center;gap:.25rem;flex-shrink:0;min-width:0}.fui-toolbar__more-buttons:empty{display:none}.fui-toolbar__nav{flex:1;display:flex;justify-content:flex-start;max-width:100%;overflow:hidden}.fui-toolbar__menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.fui-toolbar__menu-item{display:flex}.fui-toolbar__menu-button{display:flex;align-items:center;justify-content:center;width:var(--fui-toolbar-item-size, 3rem);height:var(--fui-toolbar-item-size, 3rem);padding:0;border:none;border-radius:var(--fui-radius-lg, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}.fui-toolbar__menu-button.--sidebar-toggle{margin-right:.75rem}.fui-toolbar__menu-button--with-label{width:auto;gap:.25rem;padding-inline:.5rem}.fui-toolbar__menu-button:hover:not(:disabled){background-color:var(--fui-bg-subtle);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:active:not(:disabled),.fui-toolbar__menu-button.active:not(:disabled){background-color:var(--fui-bg-muted);color:var(--fui-primary-fg)}.fui-toolbar__menu-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__menu-button--disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-toolbar__menu-label{white-space:nowrap;font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);color:inherit}.fui-toolbar__user{border-left:var(--fui-border-width-sm) solid var(--fui-border-default);display:flex;align-items:center;flex-shrink:0;margin-right:-1rem}.fui-toolbar__user-button{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:none;border-radius:var(--fui-radius-md, 6px);background-color:transparent;color:var(--fui-text-primary);cursor:pointer;transition:all var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease);min-width:0}.fui-toolbar__user-button:hover{background-color:var(--fui-bg-subtle)}.fui-toolbar__user-button:active{background-color:var(--fui-bg-muted)}.fui-toolbar__user-button:focus-visible{outline:var(--fui-state-focus-ring-width) solid var(--fui-border-primary);outline-offset:var(--fui-state-focus-ring-offset)}.fui-toolbar__user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1}@media(max-width:768px){.fui-toolbar__user-info{display:none}}.fui-toolbar__user-name{font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);color:var(--fui-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--fui-toolbar-user-text-max-width, 8rem)}.fui-toolbar__user-email{font-size:var(--fui-text-sm);color:var(--fui-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8rem}.fui-toolbar__user-caret{flex-shrink:0;color:var(--fui-text-secondary);transition:transform var(--fui-duration-fast, .12s) var(--fui-ease-in-out, ease)}@media(max-width:640px){.fui-toolbar__user-caret{display:none}}@media(max-width:768px){.fui-toolbar{padding:0 .75rem}.fui-toolbar__menu{gap:.125rem}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-md, 2.25rem);height:var(--fui-toolbar-item-size-md, 2.25rem)}.fui-toolbar__menu-button--with-label{width:var(--fui-toolbar-item-size-md, 2.25rem);padding-inline:0;gap:0}.fui-toolbar__menu-label{display:none}}@media(max-width:640px){.fui-toolbar{padding:0 .5rem}.fui-toolbar__nav{flex:0;margin:0 .5rem}.fui-toolbar__menu{gap:0}.fui-toolbar__menu-button{width:var(--fui-toolbar-item-size-sm, 2rem);height:var(--fui-toolbar-item-size-sm, 2rem)}.fui-toolbar__user-button{padding:.25rem;gap:.25rem}}[data-theme=dark] .fui-toolbar{--fui-toolbar-border-color: var(--fui-border-default)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: false }] }], userProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "userProfile", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], activeMenuItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeMenuItemId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "userAriaLabel", required: false }] }], showSidebarToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSidebarToggle", required: false }] }], showMenuLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenuLabels", required: false }] }], menuItemClick: [{ type: i0.Output, args: ["menuItemClick"] }], userProfileClick: [{ type: i0.Output, args: ["userProfileClick"] }], sidebarToggle: [{ type: i0.Output, args: ["sidebarToggle"] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/raintonic-formaui-components-toolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-toolbar.mjs","sources":["../../../lib/components/toolbar/toolbar.intl.ts","../../../lib/components/toolbar/toolbar.component.ts","../../../lib/components/toolbar/toolbar.component.html","../../../lib/components/toolbar/raintonic-formaui-components-toolbar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiToolbarIntl extends FuiIntlBase {\r\n  navAriaLabel = 'Main navigation';\r\n  userAriaLabelPrefix = 'User menu for ';\r\n  toggleSidebarAriaLabel = 'Toggle sidebar';\r\n}\r\n","import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  ViewEncapsulation,\r\n  inject,\r\n  input,\r\n  output,\r\n  computed,\r\n  signal,\r\n  InputSignal,\r\n  OutputEmitterRef,\r\n  Signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { RouterModule } from '@angular/router';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiAvatarComponent } from '@raintonic/formaui/components/avatar';\r\nimport { FuiToolbarIntl } from './toolbar.intl';\r\n\r\n/**\r\n * Toolbar menu item interface\r\n */\r\nexport interface FuiToolbarMenuItem {\r\n  id: string | number;\r\n  icon: string;\r\n  label: string;\r\n  disabled?: boolean;\r\n  routerLink?: string | string[];\r\n  queryParams?: Record<string, string>;\r\n  fragment?: string;\r\n}\r\n\r\n/**\r\n * User profile data interface\r\n */\r\nexport interface FuiToolbarUserProfile {\r\n  name: string;\r\n  email: string;\r\n  avatar?: string;\r\n  initials?: string;\r\n}\r\n\r\n/**\r\n * # FuiToolbar Component\r\n *\r\n * A top navigation toolbar following Carbon Design System principles.\r\n * Provides space for logo, navigation menu items, and user profile area.\r\n *\r\n * ## Features\r\n * - Logo area with customizable content\r\n * - Icon-based navigation menu\r\n * - User profile area with avatar/initials\r\n * - Responsive design\r\n * - Theme integration\r\n * - Accessibility support\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Toolbar\r\n * ```html\r\n * <fui-toolbar\r\n *   [menuItems]=\"menuItems\"\r\n *   [userProfile]=\"userProfile\"\r\n *   (menuItemClick)=\"onMenuItemClick($event)\"\r\n *   (userProfileClick)=\"onUserProfileClick()\">\r\n *   <div logo>\r\n *     <img src=\"logo.svg\" alt=\"Company Logo\">\r\n *   </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * ### With Custom Logo\r\n * ```html\r\n * <fui-toolbar [menuItems]=\"menuItems\" [userProfile]=\"userProfile\">\r\n *   <div logo class=\"custom-logo\">\r\n *     <h1>Holiday ERP</h1>\r\n *   </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiToolbarComponent, FuiToolbarMenuItem, FuiToolbarUserProfile } from '@raintonic/formaui/components/toolbar';\r\n *\r\n * @Component({\r\n *   standalone: true,\r\n *   imports: [FuiToolbarComponent],\r\n *   template: `\r\n *     <fui-toolbar\r\n *       [menuItems]=\"menuItems\"\r\n *       [userProfile]=\"userProfile\"\r\n *       (menuItemClick)=\"onMenuItemClick($event)\"\r\n *       (userProfileClick)=\"onUserProfileClick()\">\r\n *       <div logo>\r\n *         <img src=\"assets/logo.svg\" alt=\"Holiday ERP\">\r\n *       </div>\r\n *     </fui-toolbar>\r\n *   `\r\n * })\r\n * export class AppLayoutComponent {\r\n *   menuItems: FuiToolbarMenuItem[] = [\r\n *     { id: 'dashboard', icon: 'house', label: 'Dashboard' },\r\n *     { id: 'orders', icon: 'shopping-cart', label: 'Orders' },\r\n *     { id: 'products', icon: 'package', label: 'Products' },\r\n *     { id: 'customers', icon: 'users', label: 'Customers' },\r\n *   ];\r\n *\r\n *   userProfile: FuiToolbarUserProfile = {\r\n *     name: 'John Doe',\r\n *     email: 'john.doe@company.com',\r\n *     initials: 'JD'\r\n *   };\r\n *\r\n *   onMenuItemClick(itemId: string | number): void {\r\n *     console.log('Menu item clicked:', itemId);\r\n *   }\r\n *\r\n *   onUserProfileClick(): void {\r\n *     console.log('User profile clicked');\r\n *   }\r\n * }\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-toolbar',\r\n  standalone: true,\r\n  imports: [RouterModule, FuiIconComponent, FuiAvatarComponent],\r\n  templateUrl: './toolbar.component.html',\r\n  styleUrls: ['./toolbar.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-toolbar',\r\n    role: 'banner',\r\n    '[class.fui-toolbar--fixed]': 'fixed()',\r\n  },\r\n})\r\nexport class FuiToolbarComponent {\r\n  readonly intl = inject(FuiToolbarIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n  /** @internal — bumped when Intl mutates so computeds that read plain intl fields reinvoke. */\r\n  private readonly _intlTick = signal(0);\r\n\r\n  constructor() {\r\n    this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n      this._intlTick.update((v) => v + 1);\r\n      this._cdr.markForCheck();\r\n    });\r\n  }\r\n\r\n  // Inputs using signal-based API\r\n  readonly menuItems: InputSignal<FuiToolbarMenuItem[]> = input<FuiToolbarMenuItem[]>([]);\r\n  readonly userProfile: InputSignal<FuiToolbarUserProfile | null> = input<FuiToolbarUserProfile | null>(null);\r\n  readonly fixed: InputSignal<boolean> = input(true);\r\n  readonly activeMenuItemId: InputSignal<string | number> = input<string | number>('');\r\n  readonly ariaLabel = input<string | undefined>(undefined);\r\n  readonly userAriaLabel = input<string | undefined>(undefined);\r\n  // New: show a dedicated sidebar toggle button\r\n  readonly showSidebarToggle: InputSignal<boolean> = input(false);\r\n\r\n  /** Resolved navigation aria-label: input override → intl default. */\r\n  readonly resolvedNavAriaLabel = computed(() => {\r\n    this._intlTick();\r\n    return this.ariaLabel() ?? this.intl.navAriaLabel;\r\n  });\r\n\r\n  /** Resolved user-menu aria-label prefix: input override → intl default. */\r\n  readonly resolvedUserAriaLabelPrefix = computed(() => {\r\n    this._intlTick();\r\n    return this.userAriaLabel() ?? this.intl.userAriaLabelPrefix;\r\n  });\r\n\r\n  // Outputs using signal-based API\r\n  readonly menuItemClick: OutputEmitterRef<string | number> = output<string | number>();\r\n  readonly userProfileClick: OutputEmitterRef<void> = output();\r\n  // New: emits when sidebar toggle button is clicked\r\n  readonly sidebarToggle: OutputEmitterRef<void> = output();\r\n\r\n  // Derived user name parts for avatar\r\n  readonly firstName: Signal<string> = computed(() => this.userProfile()?.name?.trim().split(/\\s+/)[0] ?? '');\r\n  readonly lastName: Signal<string> = computed(() => {\r\n    const parts = this.userProfile()?.name?.trim().split(/\\s+/) ?? [];\r\n    return parts.length > 1 ? parts[parts.length - 1] : '';\r\n  });\r\n\r\n  onMenuItemClick(item: FuiToolbarMenuItem): void {\r\n    if (!item.disabled) {\r\n      this.menuItemClick.emit(item.id);\r\n    }\r\n  }\r\n\r\n  onUserProfileClick(): void {\r\n    if (this.userProfile()) {\r\n      this.userProfileClick.emit();\r\n    }\r\n  }\r\n\r\n  onSidebarToggleClick(): void {\r\n    this.sidebarToggle.emit();\r\n  }\r\n}\r\n","<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n    [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n    title=\"Toggle sidebar\"\r\n    (click)=\"onSidebarToggleClick()\"\r\n  >\r\n    <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n  </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n  <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n  <ul class=\"fui-toolbar__menu\">\r\n    @for (item of menuItems(); track item.id) {\r\n      <li class=\"fui-toolbar__menu-item\">\r\n        @if (item.routerLink) {\r\n          <a\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [routerLink]=\"item.routerLink\"\r\n            [queryParams]=\"item.queryParams\"\r\n            [fragment]=\"item.fragment\"\r\n            [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [title]=\"item.label\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n          </a>\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n            [title]=\"item.label\"\r\n            (click)=\"onMenuItemClick(item)\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n          </button>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n  <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n  <div class=\"fui-toolbar__user\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-toolbar__user-button\"\r\n      aria-haspopup=\"menu\"\r\n      [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n      [title]=\"profile.name + ' - ' + profile.email\"\r\n      (click)=\"onUserProfileClick()\"\r\n    >\r\n      <fui-avatar [size]=\"32\" fullName=\"None\"> </fui-avatar>\r\n\r\n      <div class=\"fui-toolbar__user-info\">\r\n        <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n        <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n      </div>\r\n\r\n      <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n    </button>\r\n  </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"raintonic-formaui-components-toolbar.mjs","sources":["../../../lib/components/toolbar/toolbar.intl.ts","../../../lib/components/toolbar/toolbar.component.ts","../../../lib/components/toolbar/toolbar.component.html","../../../lib/components/toolbar/raintonic-formaui-components-toolbar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { FuiIntlBase } from '@raintonic/formaui/core';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class FuiToolbarIntl extends FuiIntlBase {\r\n  navAriaLabel = 'Main navigation';\r\n  userAriaLabelPrefix = 'User menu for ';\r\n  toggleSidebarAriaLabel = 'Toggle sidebar';\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  ChangeDetectorRef,\r\n  Component,\r\n  InputSignal,\r\n  OutputEmitterRef,\r\n  Signal,\r\n  ViewEncapsulation,\r\n  computed,\r\n  inject,\r\n  input,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { RouterModule } from '@angular/router';\r\nimport { FuiAvatarComponent } from '@raintonic/formaui/components/avatar';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiToolbarIntl } from './toolbar.intl';\r\n\r\n/**\r\n * Toolbar menu item interface\r\n */\r\nexport interface FuiToolbarMenuItem {\r\n  id: string | number;\r\n  icon: string;\r\n  label: string;\r\n  showLabel?: boolean;\r\n  disabled?: boolean;\r\n  routerLink?: string | string[];\r\n  queryParams?: Record<string, string>;\r\n  fragment?: string;\r\n}\r\n\r\n/**\r\n * User profile data interface\r\n */\r\nexport interface FuiToolbarUserProfile {\r\n  name: string;\r\n  email: string;\r\n  avatar?: string;\r\n  initials?: string;\r\n}\r\n\r\n/**\r\n * # FuiToolbar Component\r\n *\r\n * A top navigation toolbar following Carbon Design System principles.\r\n * Provides space for logo, navigation menu items, and user profile area.\r\n *\r\n * ## Features\r\n * - Logo area with customizable content\r\n * - Icon-based navigation menu\r\n * - User profile area with avatar/initials\r\n * - Responsive design\r\n * - Theme integration\r\n * - Accessibility support\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic Toolbar\r\n * ```html\r\n * <fui-toolbar\r\n *   [menuItems]=\"menuItems\"\r\n *   [userProfile]=\"userProfile\"\r\n *   (menuItemClick)=\"onMenuItemClick($event)\"\r\n *   (userProfileClick)=\"onUserProfileClick()\">\r\n *   <div logo>\r\n *     <img src=\"logo.svg\" alt=\"Company Logo\">\r\n *   </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * ### With Custom Logo\r\n * ```html\r\n * <fui-toolbar [menuItems]=\"menuItems\" [userProfile]=\"userProfile\">\r\n *   <div logo class=\"custom-logo\">\r\n *     <h1>Holiday ERP</h1>\r\n *   </div>\r\n * </fui-toolbar>\r\n * ```\r\n *\r\n * @example\r\n * ```typescript\r\n * import { FuiToolbarComponent, FuiToolbarMenuItem, FuiToolbarUserProfile } from '@raintonic/formaui/components/toolbar';\r\n *\r\n * @Component({\r\n *   standalone: true,\r\n *   imports: [FuiToolbarComponent],\r\n *   template: `\r\n *     <fui-toolbar\r\n *       [menuItems]=\"menuItems\"\r\n *       [userProfile]=\"userProfile\"\r\n *       (menuItemClick)=\"onMenuItemClick($event)\"\r\n *       (userProfileClick)=\"onUserProfileClick()\">\r\n *       <div logo>\r\n *         <img src=\"assets/logo.svg\" alt=\"Holiday ERP\">\r\n *       </div>\r\n *     </fui-toolbar>\r\n *   `\r\n * })\r\n * export class AppLayoutComponent {\r\n *   menuItems: FuiToolbarMenuItem[] = [\r\n *     { id: 'dashboard', icon: 'house', label: 'Dashboard' },\r\n *     { id: 'orders', icon: 'shopping-cart', label: 'Orders' },\r\n *     { id: 'products', icon: 'package', label: 'Products' },\r\n *     { id: 'customers', icon: 'users', label: 'Customers' },\r\n *   ];\r\n *\r\n *   userProfile: FuiToolbarUserProfile = {\r\n *     name: 'John Doe',\r\n *     email: 'john.doe@company.com',\r\n *     initials: 'JD'\r\n *   };\r\n *\r\n *   onMenuItemClick(itemId: string | number): void {\r\n *     console.log('Menu item clicked:', itemId);\r\n *   }\r\n *\r\n *   onUserProfileClick(): void {\r\n *     console.log('User profile clicked');\r\n *   }\r\n * }\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-toolbar',\r\n  standalone: true,\r\n  imports: [RouterModule, FuiIconComponent, FuiAvatarComponent],\r\n  templateUrl: './toolbar.component.html',\r\n  styleUrls: ['./toolbar.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-toolbar',\r\n    role: 'banner',\r\n    '[class.fui-toolbar--fixed]': 'fixed()',\r\n  },\r\n})\r\nexport class FuiToolbarComponent {\r\n  readonly intl = inject(FuiToolbarIntl);\r\n  private readonly _cdr = inject(ChangeDetectorRef);\r\n  /** @internal — bumped when Intl mutates so computeds that read plain intl fields reinvoke. */\r\n  private readonly _intlTick = signal(0);\r\n\r\n  constructor() {\r\n    this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {\r\n      this._intlTick.update((v) => v + 1);\r\n      this._cdr.markForCheck();\r\n    });\r\n  }\r\n\r\n  // Inputs using signal-based API\r\n  readonly menuItems: InputSignal<FuiToolbarMenuItem[]> = input<FuiToolbarMenuItem[]>([]);\r\n  readonly userProfile: InputSignal<FuiToolbarUserProfile | null> = input<FuiToolbarUserProfile | null>(null);\r\n  readonly fixed: InputSignal<boolean> = input(true);\r\n  readonly activeMenuItemId: InputSignal<string | number> = input<string | number>('');\r\n  readonly ariaLabel = input<string | undefined>(undefined);\r\n  readonly userAriaLabel = input<string | undefined>(undefined);\r\n  // New: show a dedicated sidebar toggle button\r\n  readonly showSidebarToggle: InputSignal<boolean> = input(false);\r\n  // New: show text labels next to icons for all menu buttons (per-item `showLabel` overrides).\r\n  readonly showMenuLabels: InputSignal<boolean> = input(false);\r\n\r\n  /** Resolve whether a menu item shows its label: per-item override → toolbar default. */\r\n  showItemLabel(item: FuiToolbarMenuItem): boolean {\r\n    return item.showLabel ?? this.showMenuLabels();\r\n  }\r\n\r\n  /** Resolved navigation aria-label: input override → intl default. */\r\n  readonly resolvedNavAriaLabel = computed(() => {\r\n    this._intlTick();\r\n    return this.ariaLabel() ?? this.intl.navAriaLabel;\r\n  });\r\n\r\n  /** Resolved user-menu aria-label prefix: input override → intl default. */\r\n  readonly resolvedUserAriaLabelPrefix = computed(() => {\r\n    this._intlTick();\r\n    return this.userAriaLabel() ?? this.intl.userAriaLabelPrefix;\r\n  });\r\n\r\n  // Outputs using signal-based API\r\n  readonly menuItemClick: OutputEmitterRef<string | number> = output<string | number>();\r\n  readonly userProfileClick: OutputEmitterRef<void> = output();\r\n  // New: emits when sidebar toggle button is clicked\r\n  readonly sidebarToggle: OutputEmitterRef<void> = output();\r\n\r\n  // Derived user name parts for avatar\r\n  readonly firstName: Signal<string> = computed(() => this.userProfile()?.name?.trim().split(/\\s+/)[0] ?? '');\r\n  readonly lastName: Signal<string> = computed(() => {\r\n    const parts = this.userProfile()?.name?.trim().split(/\\s+/) ?? [];\r\n    return parts.length > 1 ? parts[parts.length - 1] : '';\r\n  });\r\n\r\n  onMenuItemClick(item: FuiToolbarMenuItem): void {\r\n    if (!item.disabled) {\r\n      this.menuItemClick.emit(item.id);\r\n    }\r\n  }\r\n\r\n  onUserProfileClick(): void {\r\n    if (this.userProfile()) {\r\n      this.userProfileClick.emit();\r\n    }\r\n  }\r\n\r\n  onSidebarToggleClick(): void {\r\n    this.sidebarToggle.emit();\r\n  }\r\n}\r\n","<!-- Sidebar Toggle Button (optional) -->\r\n@if (showSidebarToggle()) {\r\n  <button\r\n    type=\"button\"\r\n    class=\"fui-toolbar__menu-button --sidebar-toggle\"\r\n    [attr.aria-label]=\"intl.toggleSidebarAriaLabel\"\r\n    title=\"Toggle sidebar\"\r\n    (click)=\"onSidebarToggleClick()\"\r\n  >\r\n    <fui-icon name=\"sidebar\" size=\"md\"></fui-icon>\r\n  </button>\r\n}\r\n<!-- Logo Section -->\r\n<div class=\"fui-toolbar__logo\">\r\n  <ng-content select=\"[logo]\"></ng-content>\r\n</div>\r\n\r\n<!-- Navigation Menu -->\r\n<nav class=\"fui-toolbar__nav\" role=\"navigation\" [attr.aria-label]=\"resolvedNavAriaLabel()\">\r\n  <ul class=\"fui-toolbar__menu\">\r\n    @for (item of menuItems(); track item.id) {\r\n      <li class=\"fui-toolbar__menu-item\">\r\n        @if (item.routerLink) {\r\n          <a\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [class.fui-toolbar__menu-button--with-label]=\"showItemLabel(item)\"\r\n            [routerLink]=\"item.routerLink\"\r\n            [queryParams]=\"item.queryParams\"\r\n            [fragment]=\"item.fragment\"\r\n            [attr.aria-current]=\"item.id === activeMenuItemId() ? 'page' : null\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [title]=\"item.label\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n            @if (showItemLabel(item)) {\r\n              <span class=\"fui-toolbar__menu-label\">{{ item.label }}</span>\r\n            }\r\n          </a>\r\n        } @else {\r\n          <button\r\n            type=\"button\"\r\n            class=\"fui-toolbar__menu-button\"\r\n            [class.active]=\"item.id === activeMenuItemId()\"\r\n            [class.fui-toolbar__menu-button--with-label]=\"showItemLabel(item)\"\r\n            [class.fui-toolbar__menu-button--disabled]=\"item.disabled\"\r\n            [disabled]=\"item.disabled\"\r\n            [attr.aria-label]=\"item.label\"\r\n            [attr.aria-pressed]=\"item.id === activeMenuItemId() ? 'true' : null\"\r\n            [title]=\"item.label\"\r\n            (click)=\"onMenuItemClick(item)\"\r\n          >\r\n            <fui-icon [name]=\"item.icon\" size=\"md\"></fui-icon>\r\n            @if (showItemLabel(item)) {\r\n              <span class=\"fui-toolbar__menu-label\">{{ item.label }}</span>\r\n            }\r\n          </button>\r\n        }\r\n      </li>\r\n    }\r\n  </ul>\r\n</nav>\r\n<div class=\"fui-toolbar__spacer\"></div>\r\n<div class=\"fui-toolbar__more-buttons\">\r\n  <ng-content select=\"[more-buttons]\"></ng-content>\r\n</div>\r\n<!-- User Profile Section -->\r\n@if (userProfile(); as profile) {\r\n  <div class=\"fui-toolbar__user\">\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-toolbar__user-button\"\r\n      aria-haspopup=\"menu\"\r\n      [attr.aria-label]=\"resolvedUserAriaLabelPrefix() + profile.name\"\r\n      [title]=\"profile.name + ' - ' + profile.email\"\r\n      (click)=\"onUserProfileClick()\"\r\n    >\r\n      <fui-avatar size=\"sm\" [fullName]=\"profile.name\" [initials]=\"profile.initials\"></fui-avatar>\r\n\r\n      <div class=\"fui-toolbar__user-info\">\r\n        <span class=\"fui-toolbar__user-name\">{{ profile.name }}</span>\r\n        <span class=\"fui-toolbar__user-email\">{{ profile.email }}</span>\r\n      </div>\r\n\r\n      <fui-icon name=\"caret-down\" size=\"sm\" class=\"fui-toolbar__user-caret\"></fui-icon>\r\n    </button>\r\n  </div>\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/raintonic-formaui-components-tooltip.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, numberAttribute, booleanAttribute, signal, inject, ElementRef, EnvironmentInjector, effect, createComponent, HostListener, Directive } from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, numberAttribute, booleanAttribute, signal, inject, ElementRef, EnvironmentInjector, Renderer2, effect, createComponent, HostListener, Directive } from '@angular/core';
 import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
 
 /**
@@ -21,6 +21,7 @@ const TOOLTIP_POSITIONS = [
 ];
 const TOOLTIP_SIZES = ['sm', 'md', 'lg'];
 const TOOLTIP_TRIGGERS = ['hover', 'focus', 'click', 'manual'];
+const TOOLTIP_TEXT_ALIGNS = ['left', 'center', 'right'];
 
 /**
  * @component FuiTooltipComponent
@@ -54,6 +55,10 @@ class FuiTooltipComponent {
      * Tooltip size
      */
     size = input.required(...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /**
+     * Tooltip text alignment
+     */
+    textAlign = input.required(...(ngDevMode ? [{ debugName: "textAlign" }] : /* istanbul ignore next */ []));
     /**
      * Maximum width of the tooltip
      */
@@ -70,7 +75,12 @@ class FuiTooltipComponent {
      * Computed CSS classes for the tooltip
      */
     computedClasses = computed(() => {
-        const classes = ['fui-tooltip', `fui-tooltip--${this.size()}`, `fui-tooltip--${this.position()}`];
+        const classes = [
+            'fui-tooltip',
+            `fui-tooltip--${this.size()}`,
+            `fui-tooltip--${this.position()}`,
+            `fui-tooltip--align-${this.textAlign()}`,
+        ];
         if (this.arrow()) {
             classes.push('fui-tooltip--with-arrow');
         }
@@ -97,7 +107,7 @@ class FuiTooltipComponent {
         return baseClass;
     }, ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTooltipComponent, isStandalone: true, selector: "fui-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: true, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: true, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "computedClasses()", "id": "tooltipId()", "attr.role": "\"tooltip\"", "style.max-width": "maxWidth()" }, classAttribute: "fui-tooltip" }, ngImport: i0, template: "<div class=\"fui-tooltip__content\">\r\n  {{ content() }}\r\n</div>\r\n@if (arrow()) {\r\n  <div [class]=\"arrowClasses()\"></div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tooltip{--fui-tooltip-border-radius: var(--fui-radius-sm);--fui-tooltip-shadow: var(--fui-shadow-md);--fui-tooltip-font-size: var(--fui-text-base);--fui-tooltip-padding-x: var(--fui-spacing-6);--fui-tooltip-padding-y: var(--fui-spacing-4);z-index:var(--fui-z-tooltip, 1000);display:block;font-family:var(--fui-font-sans);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);border-radius:var(--fui-tooltip-border-radius);background-color:var(--fui-tooltip-background);color:var(--fui-tooltip-text);box-shadow:var(--fui-tooltip-shadow);transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;opacity:0;animation:fui-tooltip-fade-in var(--fui-duration-fast) ease-out forwards}.fui-tooltip__content{padding:var(--fui-tooltip-padding-y) var(--fui-tooltip-padding-x);word-wrap:break-word;hyphens:auto;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal)}.fui-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}.fui-tooltip__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-tooltip-background)}.fui-tooltip--right{transform:translate(-50%)}.fui-tooltip--top-start .fui-tooltip__arrow,.fui-tooltip--bottom-start .fui-tooltip__arrow{left:var(--fui-spacing-6);transform:none}.fui-tooltip--top-end .fui-tooltip__arrow,.fui-tooltip--bottom-end .fui-tooltip__arrow{right:var(--fui-spacing-6);left:auto;transform:none}.fui-tooltip--left-start .fui-tooltip__arrow,.fui-tooltip--right-start .fui-tooltip__arrow{top:var(--fui-spacing-6);transform:none}.fui-tooltip--left-end .fui-tooltip__arrow,.fui-tooltip--right-end .fui-tooltip__arrow{bottom:var(--fui-spacing-6);top:auto;transform:none}.fui-tooltip--sm{font-size:var(--fui-text-sm)}.fui-tooltip--sm .fui-tooltip__content{padding:var(--fui-spacing-2) var(--fui-spacing-4)}.fui-tooltip--sm .fui-tooltip__arrow{--arrow-size: 4px}.fui-tooltip--md{font-size:var(--fui-text-base)}.fui-tooltip--md .fui-tooltip__content{padding:var(--fui-spacing-4) var(--fui-spacing-6)}.fui-tooltip--md .fui-tooltip__arrow{--arrow-size: 6px}.fui-tooltip--lg{font-size:var(--fui-text-md)}.fui-tooltip--lg .fui-tooltip__content{padding:var(--fui-spacing-6) var(--fui-spacing-7)}.fui-tooltip--lg .fui-tooltip__arrow{--arrow-size: 8px}@media(prefers-contrast:more){.fui-tooltip{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-lg)}}@media(prefers-reduced-motion:reduce){.fui-tooltip{animation:none;opacity:1}}@media print{.fui-tooltip{display:none!important}}@keyframes fui-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTooltipComponent, isStandalone: true, selector: "fui-tooltip", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, textAlign: { classPropertyName: "textAlign", publicName: "textAlign", isSignal: true, isRequired: true, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: true, transformFunction: null }, arrow: { classPropertyName: "arrow", publicName: "arrow", isSignal: true, isRequired: true, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "computedClasses()", "id": "tooltipId()", "attr.role": "\"tooltip\"", "style.max-width": "maxWidth()" }, classAttribute: "fui-tooltip" }, ngImport: i0, template: "<div class=\"fui-tooltip__content\">\r\n  {{ content() }}\r\n</div>\r\n@if (arrow()) {\r\n  <div [class]=\"arrowClasses()\"></div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tooltip{--fui-tooltip-border-radius: var(--fui-radius-sm);--fui-tooltip-shadow: var(--fui-shadow-md);--fui-tooltip-font-size: var(--fui-text-base);--fui-tooltip-padding-x: var(--fui-spacing-6);--fui-tooltip-padding-y: var(--fui-spacing-4);z-index:var(--fui-z-tooltip, 1000);display:block;font-family:var(--fui-font-sans);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);border-radius:var(--fui-tooltip-border-radius);background-color:var(--fui-tooltip-background);color:var(--fui-tooltip-text);box-shadow:var(--fui-tooltip-shadow);transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;opacity:0;animation:fui-tooltip-fade-in var(--fui-duration-fast) ease-out forwards}.fui-tooltip__content{padding:var(--fui-tooltip-padding-y) var(--fui-tooltip-padding-x);word-wrap:break-word;hyphens:auto;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal)}.fui-tooltip--align-left .fui-tooltip__content{text-align:left}.fui-tooltip--align-center .fui-tooltip__content{text-align:center}.fui-tooltip--align-right .fui-tooltip__content{text-align:right}.fui-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}.fui-tooltip__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-tooltip-background)}.fui-tooltip--right{transform:translate(-50%)}.fui-tooltip--top-start .fui-tooltip__arrow,.fui-tooltip--bottom-start .fui-tooltip__arrow{left:var(--fui-spacing-6);transform:none}.fui-tooltip--top-end .fui-tooltip__arrow,.fui-tooltip--bottom-end .fui-tooltip__arrow{right:var(--fui-spacing-6);left:auto;transform:none}.fui-tooltip--left-start .fui-tooltip__arrow,.fui-tooltip--right-start .fui-tooltip__arrow{top:var(--fui-spacing-6);transform:none}.fui-tooltip--left-end .fui-tooltip__arrow,.fui-tooltip--right-end .fui-tooltip__arrow{bottom:var(--fui-spacing-6);top:auto;transform:none}.fui-tooltip--sm{font-size:var(--fui-text-sm)}.fui-tooltip--sm .fui-tooltip__content{padding:var(--fui-spacing-2) var(--fui-spacing-4)}.fui-tooltip--sm .fui-tooltip__arrow{--arrow-size: 4px}.fui-tooltip--md{font-size:var(--fui-text-base)}.fui-tooltip--md .fui-tooltip__content{padding:var(--fui-spacing-4) var(--fui-spacing-6)}.fui-tooltip--md .fui-tooltip__arrow{--arrow-size: 6px}.fui-tooltip--lg{font-size:var(--fui-text-md)}.fui-tooltip--lg .fui-tooltip__content{padding:var(--fui-spacing-6) var(--fui-spacing-7)}.fui-tooltip--lg .fui-tooltip__arrow{--arrow-size: 8px}@media(prefers-contrast:more){.fui-tooltip{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-lg)}}@media(prefers-reduced-motion:reduce){.fui-tooltip{animation:none;opacity:1}}@media print{.fui-tooltip{display:none!important}}@keyframes fui-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipComponent, decorators: [{
             type: Component,
@@ -107,8 +117,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[id]': 'tooltipId()',
                         '[attr.role]': '"tooltip"',
                         '[style.max-width]': 'maxWidth()',
-                    }, template: "<div class=\"fui-tooltip__content\">\r\n  {{ content() }}\r\n</div>\r\n@if (arrow()) {\r\n  <div [class]=\"arrowClasses()\"></div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tooltip{--fui-tooltip-border-radius: var(--fui-radius-sm);--fui-tooltip-shadow: var(--fui-shadow-md);--fui-tooltip-font-size: var(--fui-text-base);--fui-tooltip-padding-x: var(--fui-spacing-6);--fui-tooltip-padding-y: var(--fui-spacing-4);z-index:var(--fui-z-tooltip, 1000);display:block;font-family:var(--fui-font-sans);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);border-radius:var(--fui-tooltip-border-radius);background-color:var(--fui-tooltip-background);color:var(--fui-tooltip-text);box-shadow:var(--fui-tooltip-shadow);transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;opacity:0;animation:fui-tooltip-fade-in var(--fui-duration-fast) ease-out forwards}.fui-tooltip__content{padding:var(--fui-tooltip-padding-y) var(--fui-tooltip-padding-x);word-wrap:break-word;hyphens:auto;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal)}.fui-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}.fui-tooltip__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-tooltip-background)}.fui-tooltip--right{transform:translate(-50%)}.fui-tooltip--top-start .fui-tooltip__arrow,.fui-tooltip--bottom-start .fui-tooltip__arrow{left:var(--fui-spacing-6);transform:none}.fui-tooltip--top-end .fui-tooltip__arrow,.fui-tooltip--bottom-end .fui-tooltip__arrow{right:var(--fui-spacing-6);left:auto;transform:none}.fui-tooltip--left-start .fui-tooltip__arrow,.fui-tooltip--right-start .fui-tooltip__arrow{top:var(--fui-spacing-6);transform:none}.fui-tooltip--left-end .fui-tooltip__arrow,.fui-tooltip--right-end .fui-tooltip__arrow{bottom:var(--fui-spacing-6);top:auto;transform:none}.fui-tooltip--sm{font-size:var(--fui-text-sm)}.fui-tooltip--sm .fui-tooltip__content{padding:var(--fui-spacing-2) var(--fui-spacing-4)}.fui-tooltip--sm .fui-tooltip__arrow{--arrow-size: 4px}.fui-tooltip--md{font-size:var(--fui-text-base)}.fui-tooltip--md .fui-tooltip__content{padding:var(--fui-spacing-4) var(--fui-spacing-6)}.fui-tooltip--md .fui-tooltip__arrow{--arrow-size: 6px}.fui-tooltip--lg{font-size:var(--fui-text-md)}.fui-tooltip--lg .fui-tooltip__content{padding:var(--fui-spacing-6) var(--fui-spacing-7)}.fui-tooltip--lg .fui-tooltip__arrow{--arrow-size: 8px}@media(prefers-contrast:more){.fui-tooltip{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-lg)}}@media(prefers-reduced-motion:reduce){.fui-tooltip{animation:none;opacity:1}}@media print{.fui-tooltip{display:none!important}}@keyframes fui-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
-        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: true }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: true }] }], tooltipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipId", required: true }] }] } });
+                    }, template: "<div class=\"fui-tooltip__content\">\r\n  {{ content() }}\r\n</div>\r\n@if (arrow()) {\r\n  <div [class]=\"arrowClasses()\"></div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-tooltip{--fui-tooltip-border-radius: var(--fui-radius-sm);--fui-tooltip-shadow: var(--fui-shadow-md);--fui-tooltip-font-size: var(--fui-text-base);--fui-tooltip-padding-x: var(--fui-spacing-6);--fui-tooltip-padding-y: var(--fui-spacing-4);z-index:var(--fui-z-tooltip, 1000);display:block;font-family:var(--fui-font-sans);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);border-radius:var(--fui-tooltip-border-radius);background-color:var(--fui-tooltip-background);color:var(--fui-tooltip-text);box-shadow:var(--fui-tooltip-shadow);transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;opacity:0;animation:fui-tooltip-fade-in var(--fui-duration-fast) ease-out forwards}.fui-tooltip__content{padding:var(--fui-tooltip-padding-y) var(--fui-tooltip-padding-x);word-wrap:break-word;hyphens:auto;font-size:var(--fui-text-sm);line-height:var(--fui-leading-normal)}.fui-tooltip--align-left .fui-tooltip__content{text-align:left}.fui-tooltip--align-center .fui-tooltip__content{text-align:center}.fui-tooltip--align-right .fui-tooltip__content{text-align:right}.fui-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid;border-color:transparent;--arrow-size: 6px}.fui-tooltip__arrow--top{bottom:100%;left:50%;transform:translate(-50%);border-width:0 var(--arrow-size) var(--arrow-size) var(--arrow-size);border-bottom-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--bottom{top:100%;left:50%;transform:translate(-50%);border-width:var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);border-top-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--left{right:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;border-right-color:var(--fui-tooltip-background)}.fui-tooltip__arrow--right{left:100%;top:50%;transform:translateY(-50%);border-width:var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);border-left-color:var(--fui-tooltip-background)}.fui-tooltip--right{transform:translate(-50%)}.fui-tooltip--top-start .fui-tooltip__arrow,.fui-tooltip--bottom-start .fui-tooltip__arrow{left:var(--fui-spacing-6);transform:none}.fui-tooltip--top-end .fui-tooltip__arrow,.fui-tooltip--bottom-end .fui-tooltip__arrow{right:var(--fui-spacing-6);left:auto;transform:none}.fui-tooltip--left-start .fui-tooltip__arrow,.fui-tooltip--right-start .fui-tooltip__arrow{top:var(--fui-spacing-6);transform:none}.fui-tooltip--left-end .fui-tooltip__arrow,.fui-tooltip--right-end .fui-tooltip__arrow{bottom:var(--fui-spacing-6);top:auto;transform:none}.fui-tooltip--sm{font-size:var(--fui-text-sm)}.fui-tooltip--sm .fui-tooltip__content{padding:var(--fui-spacing-2) var(--fui-spacing-4)}.fui-tooltip--sm .fui-tooltip__arrow{--arrow-size: 4px}.fui-tooltip--md{font-size:var(--fui-text-base)}.fui-tooltip--md .fui-tooltip__content{padding:var(--fui-spacing-4) var(--fui-spacing-6)}.fui-tooltip--md .fui-tooltip__arrow{--arrow-size: 6px}.fui-tooltip--lg{font-size:var(--fui-text-md)}.fui-tooltip--lg .fui-tooltip__content{padding:var(--fui-spacing-6) var(--fui-spacing-7)}.fui-tooltip--lg .fui-tooltip__arrow{--arrow-size: 8px}@media(prefers-contrast:more){.fui-tooltip{border:2px solid var(--fui-text-primary);box-shadow:var(--fui-shadow-lg)}}@media(prefers-reduced-motion:reduce){.fui-tooltip{animation:none;opacity:1}}@media print{.fui-tooltip{display:none!important}}@keyframes fui-tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}\n"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], textAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "textAlign", required: true }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: true }] }], arrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrow", required: true }] }], tooltipId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipId", required: true }] }] } });
 
 /**
  * # Tooltip Directive
@@ -198,6 +208,11 @@ class FuiTooltipDirective {
      * @default 'md'
      */
     fuiTooltipSize = input('md', { ...(ngDevMode ? { debugName: "fuiTooltipSize" } : /* istanbul ignore next */ {}), transform: (v) => (TOOLTIP_SIZES.includes(v) ? v : 'md') });
+    /**
+     * Tooltip text alignment
+     * @default 'left'
+     */
+    fuiTooltipTextAlign = input('left', { ...(ngDevMode ? { debugName: "fuiTooltipTextAlign" } : /* istanbul ignore next */ {}), transform: (v) => (TOOLTIP_TEXT_ALIGNS.includes(v) ? v : 'left') });
     /**
      * Tooltip trigger event
      * @default 'hover'
@@ -247,6 +262,7 @@ class FuiTooltipDirective {
     _hideTimeout = null;
     _destroyed = false;
     _isHoveringTooltip = false;
+    _positionChangesSub = null;
     // Computed properties
     isVisible = computed(() => this._isVisible(), ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
     tooltipId = computed(() => this._tooltipId(), ...(ngDevMode ? [{ debugName: "tooltipId" }] : /* istanbul ignore next */ []));
@@ -254,6 +270,7 @@ class FuiTooltipDirective {
     _elementRef = inject(ElementRef);
     _overlayService = inject(FuiOverlayService);
     _environmentInjector = inject(EnvironmentInjector);
+    _renderer = inject(Renderer2);
     constructor() {
         // Generate unique tooltip ID
         this._tooltipId.set(`fui-tooltip-${FuiTooltipDirective._nextId++}`);
@@ -403,6 +420,7 @@ class FuiTooltipDirective {
         this._tooltipComponent.setInput('content', this.fuiTooltip());
         this._tooltipComponent.setInput('position', this.fuiTooltipPosition());
         this._tooltipComponent.setInput('size', this.fuiTooltipSize());
+        this._tooltipComponent.setInput('textAlign', this.fuiTooltipTextAlign());
         this._tooltipComponent.setInput('maxWidth', this.fuiTooltipMaxWidth());
         this._tooltipComponent.setInput('arrow', this.fuiTooltipArrow());
         this._tooltipComponent.setInput('tooltipId', this.tooltipId());
@@ -415,6 +433,12 @@ class FuiTooltipDirective {
             .connectedTo(this._elementRef, positions)
             .withPush(true)
             .withViewportMargin(8);
+        // Keep the arrow pointing at the trigger center whenever the overlay is
+        // (re)positioned — e.g. when `withPush` shifts the tooltip to stay within
+        // the viewport, the CSS-centered arrow would otherwise miss the trigger.
+        this._positionChangesSub = positionStrategy.positionChanges.subscribe(() => {
+            this._updateArrowPosition();
+        });
         // Create overlay
         this._overlayRef = this._overlayService.create({
             positionStrategy,
@@ -490,7 +514,47 @@ class FuiTooltipDirective {
         };
         return positionMap[position] || positionMap.top;
     }
+    /**
+     * Repositions the tooltip arrow so its tip stays aligned with the center of
+     * the trigger element. The overlay's `withPush` behavior can slide the tooltip
+     * sideways to keep it on-screen; without this correction the CSS-centered
+     * arrow would drift away from the trigger.
+     */
+    _updateArrowPosition() {
+        if (!this._tooltipComponent || !this.fuiTooltipArrow()) {
+            return;
+        }
+        const tooltipEl = this._tooltipComponent.location.nativeElement;
+        const arrowEl = tooltipEl.querySelector('.fui-tooltip__arrow');
+        if (!arrowEl) {
+            return;
+        }
+        // Measure against the overlay pane: it is the arrow's positioned ancestor
+        // (position: fixed), so the computed offset maps directly to the arrow's
+        // `left`/`top` without assuming the tooltip host fills the pane.
+        const paneEl = this._overlayRef?.overlayElement ?? tooltipEl;
+        const triggerRect = this._elementRef.nativeElement.getBoundingClientRect();
+        const paneRect = paneEl.getBoundingClientRect();
+        const position = this.fuiTooltipPosition();
+        const isVertical = position.startsWith('left') || position.startsWith('right');
+        const arrowEdge = (isVertical ? arrowEl.offsetHeight : arrowEl.offsetWidth) || 8;
+        const { axis, offset } = computeTooltipArrowOffset(triggerRect, paneRect, position, arrowEdge);
+        if (axis === 'y') {
+            this._renderer.setStyle(arrowEl, 'top', `${offset}px`);
+            this._renderer.setStyle(arrowEl, 'bottom', 'auto');
+            this._renderer.setStyle(arrowEl, 'transform', 'translateY(-50%)');
+        }
+        else {
+            this._renderer.setStyle(arrowEl, 'left', `${offset}px`);
+            this._renderer.setStyle(arrowEl, 'right', 'auto');
+            this._renderer.setStyle(arrowEl, 'transform', 'translateX(-50%)');
+        }
+    }
     _destroyTooltip() {
+        if (this._positionChangesSub) {
+            this._positionChangesSub.unsubscribe();
+            this._positionChangesSub = null;
+        }
         if (this._overlayRef) {
             this._overlayRef.dispose();
             this._overlayRef = null;
@@ -519,7 +583,7 @@ class FuiTooltipDirective {
         }
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: FuiTooltipDirective, isStandalone: true, selector: "[fuiTooltip]", inputs: { fuiTooltip: { classPropertyName: "fuiTooltip", publicName: "fuiTooltip", isSignal: true, isRequired: true, transformFunction: null }, fuiTooltipPosition: { classPropertyName: "fuiTooltipPosition", publicName: "fuiTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipSize: { classPropertyName: "fuiTooltipSize", publicName: "fuiTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipTrigger: { classPropertyName: "fuiTooltipTrigger", publicName: "fuiTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipShowDelay: { classPropertyName: "fuiTooltipShowDelay", publicName: "fuiTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipHideDelay: { classPropertyName: "fuiTooltipHideDelay", publicName: "fuiTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipDisabled: { classPropertyName: "fuiTooltipDisabled", publicName: "fuiTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipMaxWidth: { classPropertyName: "fuiTooltipMaxWidth", publicName: "fuiTooltipMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipOffset: { classPropertyName: "fuiTooltipOffset", publicName: "fuiTooltipOffset", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipArrow: { classPropertyName: "fuiTooltipArrow", publicName: "fuiTooltipArrow", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipShow: { classPropertyName: "fuiTooltipShow", publicName: "fuiTooltipShow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-describedby": "isVisible() ? tooltipId() : null" } }, exportAs: ["fuiTooltip"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.6", type: FuiTooltipDirective, isStandalone: true, selector: "[fuiTooltip]", inputs: { fuiTooltip: { classPropertyName: "fuiTooltip", publicName: "fuiTooltip", isSignal: true, isRequired: true, transformFunction: null }, fuiTooltipPosition: { classPropertyName: "fuiTooltipPosition", publicName: "fuiTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipSize: { classPropertyName: "fuiTooltipSize", publicName: "fuiTooltipSize", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipTextAlign: { classPropertyName: "fuiTooltipTextAlign", publicName: "fuiTooltipTextAlign", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipTrigger: { classPropertyName: "fuiTooltipTrigger", publicName: "fuiTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipShowDelay: { classPropertyName: "fuiTooltipShowDelay", publicName: "fuiTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipHideDelay: { classPropertyName: "fuiTooltipHideDelay", publicName: "fuiTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipDisabled: { classPropertyName: "fuiTooltipDisabled", publicName: "fuiTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipMaxWidth: { classPropertyName: "fuiTooltipMaxWidth", publicName: "fuiTooltipMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipOffset: { classPropertyName: "fuiTooltipOffset", publicName: "fuiTooltipOffset", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipArrow: { classPropertyName: "fuiTooltipArrow", publicName: "fuiTooltipArrow", isSignal: true, isRequired: false, transformFunction: null }, fuiTooltipShow: { classPropertyName: "fuiTooltipShow", publicName: "fuiTooltipShow", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-describedby": "isVisible() ? tooltipId() : null" } }, exportAs: ["fuiTooltip"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTooltipDirective, decorators: [{
             type: Directive,
@@ -531,7 +595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[attr.aria-describedby]': 'isVisible() ? tooltipId() : null',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { fuiTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltip", required: true }] }], fuiTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipPosition", required: false }] }], fuiTooltipSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipSize", required: false }] }], fuiTooltipTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipTrigger", required: false }] }], fuiTooltipShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipShowDelay", required: false }] }], fuiTooltipHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipHideDelay", required: false }] }], fuiTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipDisabled", required: false }] }], fuiTooltipMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipMaxWidth", required: false }] }], fuiTooltipOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipOffset", required: false }] }], fuiTooltipArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipArrow", required: false }] }], fuiTooltipShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipShow", required: false }] }], onMouseEnter: [{
+        }], ctorParameters: () => [], propDecorators: { fuiTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltip", required: true }] }], fuiTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipPosition", required: false }] }], fuiTooltipSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipSize", required: false }] }], fuiTooltipTextAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipTextAlign", required: false }] }], fuiTooltipTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipTrigger", required: false }] }], fuiTooltipShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipShowDelay", required: false }] }], fuiTooltipHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipHideDelay", required: false }] }], fuiTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipDisabled", required: false }] }], fuiTooltipMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipMaxWidth", required: false }] }], fuiTooltipOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipOffset", required: false }] }], fuiTooltipArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipArrow", required: false }] }], fuiTooltipShow: [{ type: i0.Input, args: [{ isSignal: true, alias: "fuiTooltipShow", required: false }] }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
             }], onMouseLeave: [{
@@ -550,6 +614,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                 type: HostListener,
                 args: ['keydown', ['$event']]
             }] } });
+/**
+ * Computes where the tooltip arrow must sit so that it points at the center of
+ * the trigger, regardless of how far the overlay was pushed to stay on-screen.
+ *
+ * The offset is measured from the tooltip's own top/left edge and is clamped so
+ * the arrow never overlaps the tooltip's rounded corners.
+ *
+ * @param triggerRect Bounding rect of the trigger element.
+ * @param tooltipRect Bounding rect of the (already positioned) tooltip.
+ * @param position Resolved tooltip position.
+ * @param arrowEdge Size in px kept clear at each edge (typically the arrow's own extent).
+ */
+function computeTooltipArrowOffset(triggerRect, tooltipRect, position, arrowEdge) {
+    const isVertical = position.startsWith('left') || position.startsWith('right');
+    if (isVertical) {
+        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+        return { axis: 'y', offset: clampArrowOffset(triggerCenterY - tooltipRect.top, tooltipRect.height, arrowEdge) };
+    }
+    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+    return { axis: 'x', offset: clampArrowOffset(triggerCenterX - tooltipRect.left, tooltipRect.width, arrowEdge) };
+}
+/** Clamps an arrow offset into `[edge, size - edge]`, falling back to center when the tooltip is too small. */
+function clampArrowOffset(offset, size, edge) {
+    const min = edge;
+    const max = size - edge;
+    if (min >= max) {
+        return size / 2;
+    }
+    return Math.min(Math.max(offset, min), max);
+}
 
 // Public API for tooltip component
 
@@ -557,5 +651,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { FuiTooltipComponent, FuiTooltipDirective, TOOLTIP_POSITIONS, TOOLTIP_SIZES, TOOLTIP_TRIGGERS };
+export { FuiTooltipComponent, FuiTooltipDirective, TOOLTIP_POSITIONS, TOOLTIP_SIZES, TOOLTIP_TEXT_ALIGNS, TOOLTIP_TRIGGERS, computeTooltipArrowOffset };
 //# sourceMappingURL=raintonic-formaui-components-tooltip.mjs.map