@flusys/ng-ui 6.2.2 → 6.4.0

package/fesm2022/flusys-ng-ui.mjs

@@ -357,7 +357,6 @@ class ButtonComponent {
       [attr.tabindex]="tabindex()"
       [class]="hostClass()"
       [style]="style()"
-      style="font-weight: var(--f-button-font-weight, 500)"
       (click)="onClick.emit($event)"
       (focus)="onFocus.emit($event)"
       (blur)="onBlur.emit($event)"
@@ -436,7 +435,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       [attr.tabindex]="tabindex()"
       [class]="hostClass()"
       [style]="style()"
-      style="font-weight: var(--f-button-font-weight, 500)"
       (click)="onClick.emit($event)"
       (focus)="onFocus.emit($event)"
       (blur)="onBlur.emit($event)"
@@ -513,23 +511,26 @@ function computeButtonClasses(opts) {
         'disabled:opacity-60 disabled:pointer-events-none',
         'active:scale-[0.97]',
         isFluid ? 'w-full' : '',
-        isRounded ? 'rounded-full' : 'rounded-lg',
+        // Padding, radius, weight and tracking all come from the active preset via the
+        // f-btn utilities, so a preset can make buttons denser, squarer or bolder
+        // rather than only recolouring them.
+        isRounded ? 'f-btn-round' : '',
         raised ? 'shadow-md hover:shadow-lg active:shadow-sm' : '',
     ];
     const sizing = sz === 'small'
         ? iconOnly
-            ? 'p-1.5 text-xs'
-            : 'px-3 py-1.5 text-xs'
+            ? 'f-btn-icon-sm text-xs'
+            : 'f-btn-sm text-xs'
         : sz === 'large'
             ? iconOnly
-                ? 'p-3 text-base'
-                : 'px-5 py-3 text-base'
+                ? 'f-btn-icon-lg text-base'
+                : 'f-btn-lg text-base'
             : iconOnly
-                ? 'p-2 text-sm'
-                : 'px-4 py-2 text-sm';
+                ? 'f-btn-icon text-sm'
+                : 'f-btn text-sm';
     let variant = '';
     if (isLink) {
-        variant = 'text-primary hover:underline bg-transparent border-none p-0';
+        variant = 'text-primary hover:underline bg-transparent border-none p-0 rounded-none';
     }
     else if (isText) {
         variant = isPlain ? plainVariant('text') : textVariant(sev);
@@ -1070,7 +1071,7 @@ class ToastComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ToastComponent, isStandalone: true, selector: "f-toast", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClose: "onClose" }, host: { properties: { "class": "hostClass()" } }, queries: [{ propertyName: "messageTemplate", first: true, predicate: ["message"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @for (msg of visibleMessages(); track msg.id) {
       <div
-        class="toast-item w-full flex items-start gap-3 px-3.5 py-3 rounded-lg shadow-lg border pointer-events-auto"
+        class="toast-item w-full flex items-start gap-3 px-3.5 py-3 f-overlay border pointer-events-auto"
         [class.leaving]="msg.closing"
         [style.background]="severityBg(msg.severity)"
         [style.color]="severityColor(msg.severity)"
@@ -1113,7 +1114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     }, template: `
     @for (msg of visibleMessages(); track msg.id) {
       <div
-        class="toast-item w-full flex items-start gap-3 px-3.5 py-3 rounded-lg shadow-lg border pointer-events-auto"
+        class="toast-item w-full flex items-start gap-3 px-3.5 py-3 f-overlay border pointer-events-auto"
         [class.leaving]="msg.closing"
         [style.background]="severityBg(msg.severity)"
         [style.color]="severityColor(msg.severity)"
@@ -1364,7 +1365,7 @@ class FButtonDirective {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: FButtonDirective, isStandalone: true, selector: "[fButton]", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()", "style.font-weight": "'var(--f-button-font-weight, 500)'", "attr.disabled": "disabled() || loading() ? '' : null", "attr.aria-disabled": "disabled() ? 'true' : null", "attr.aria-busy": "loading() ? 'true' : null" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: FButtonDirective, isStandalone: true, selector: "[fButton]", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, plain: { classPropertyName: "plain", publicName: "plain", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()", "attr.disabled": "disabled() || loading() ? '' : null", "attr.aria-disabled": "disabled() ? 'true' : null", "attr.aria-busy": "loading() ? 'true' : null" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FButtonDirective, decorators: [{
             type: Directive,
@@ -1372,7 +1373,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     selector: '[fButton]',
                     host: {
                         '[class]': 'hostClass()',
-                        '[style.font-weight]': "'var(--f-button-font-weight, 500)'",
                         '[attr.disabled]': "disabled() || loading() ? '' : null",
                         '[attr.aria-disabled]': "disabled() ? 'true' : null",
                         '[attr.aria-busy]': 'loading() ? \'true\' : null',
@@ -1700,13 +1700,13 @@ class ImageComponent {
           </button>
         }
         @if (!loaded()) {
-          <div class="absolute inset-0 flex items-center justify-center bg-(--f-content-hover-background) rounded" [style.width]="width()" [style.height]="height()">
+          <div class="absolute inset-0 flex items-center justify-center bg-(--f-content-hover-background) rounded-md" [style.width]="width()" [style.height]="height()">
             <ui-icon name="loader-circle" [spin]="true" class="text-lg text-(--f-text-muted-color)"></ui-icon>
           </div>
         }
       } @else {
         <div
-          class="flex flex-col items-center justify-center gap-1 bg-(--f-content-hover-background) text-(--f-text-muted-color) rounded"
+          class="flex flex-col items-center justify-center gap-1 bg-(--f-content-hover-background) text-(--f-text-muted-color) rounded-md"
           [style.width]="width() || '8rem'"
           [style.height]="height() || '8rem'"
         >
@@ -1786,13 +1786,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           </button>
         }
         @if (!loaded()) {
-          <div class="absolute inset-0 flex items-center justify-center bg-(--f-content-hover-background) rounded" [style.width]="width()" [style.height]="height()">
+          <div class="absolute inset-0 flex items-center justify-center bg-(--f-content-hover-background) rounded-md" [style.width]="width()" [style.height]="height()">
             <ui-icon name="loader-circle" [spin]="true" class="text-lg text-(--f-text-muted-color)"></ui-icon>
           </div>
         }
       } @else {
         <div
-          class="flex flex-col items-center justify-center gap-1 bg-(--f-content-hover-background) text-(--f-text-muted-color) rounded"
+          class="flex flex-col items-center justify-center gap-1 bg-(--f-content-hover-background) text-(--f-text-muted-color) rounded-md"
           [style.width]="width() || '8rem'"
           [style.height]="height() || '8rem'"
         >
@@ -2428,7 +2428,7 @@ class PopoverComponent {
     // DOM reparent.
     panelClass = computed(() => {
         const position = this.appendTo() === 'self' ? 'absolute top-full left-0 mt-1.5' : 'fixed';
-        return `popover-panel ${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg min-w-48 max-w-sm ${this.styleClass()}`;
+        return `popover-panel ${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay min-w-48 max-w-sm ${this.styleClass()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -2535,7 +2535,7 @@ class PopoverComponent {
         @if (showCloseIcon()) {
           <button
             type="button"
-            class="absolute top-2 right-2 inline-flex items-center justify-center w-6 h-6 rounded-md text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-focus"
+            class="absolute top-2 right-2 inline-flex items-center justify-center w-6 h-6 rounded-md text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus"
             [attr.aria-label]="closeAriaLabel()"
             (click)="onCloseIconClick($event)"
           >
@@ -2570,7 +2570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         @if (showCloseIcon()) {
           <button
             type="button"
-            class="absolute top-2 right-2 inline-flex items-center justify-center w-6 h-6 rounded-md text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-focus"
+            class="absolute top-2 right-2 inline-flex items-center justify-center w-6 h-6 rounded-md text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus"
             [attr.aria-label]="closeAriaLabel()"
             (click)="onCloseIconClick($event)"
           >
@@ -2866,7 +2866,7 @@ class DatePickerComponent {
         return Array.from({ length: 12 }, (_, i) => start + i);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "yearGridYears" }] : /* istanbul ignore next */ []));
-    inlinePanelClass = computed(() => `inline-block bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg p-3 min-w-64 ${this.styleClass()}`, /* @ts-ignore */
+    inlinePanelClass = computed(() => `inline-block bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay-shape p-3 min-w-64 ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inlinePanelClass" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => {
         const v = this.value();
@@ -2919,12 +2919,12 @@ class DatePickerComponent {
         const disabledClass = this.disabled()
             ? 'opacity-60 cursor-not-allowed'
             : '';
-        return `flex items-center border rounded-lg overflow-hidden bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] ${stateClass} ${disabledClass}`;
+        return `flex items-center border f-field-shape overflow-hidden bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] ${stateClass} ${disabledClass}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "wrapperClass" }] : /* istanbul ignore next */ []));
     inputClass = computed(() => {
         const cursor = this.readonlyInput() ? 'cursor-pointer ' : '';
-        return `block w-full px-3 py-2 text-sm bg-(--f-form-field-background) text-(--f-form-field-color) placeholder:text-(--f-form-field-placeholder-color) focus:outline-none ${cursor}${this.inputStyleClass()}`;
+        return `block w-full f-field text-sm bg-(--f-form-field-background) text-(--f-form-field-color) placeholder:text-(--f-form-field-placeholder-color) focus:outline-none ${cursor}${this.inputStyleClass()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
     prevAriaLabel = computed(() => {
@@ -3084,7 +3084,7 @@ class DatePickerComponent {
         };
     }
     dayClass(day) {
-        const base = 'relative text-center text-sm py-1.5 transition-colors focus-visible:outline-none focus-visible:ring-focus disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none cursor-pointer';
+        const base = 'relative text-center text-sm py-1.5 transition-colors focus:outline-none focus-visible:ring-focus disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none cursor-pointer';
         if (day.otherMonth && !this.selectOtherMonths()) {
             return `${base} text-(--f-text-muted-color) opacity-60 rounded-md`;
         }
@@ -3503,7 +3503,7 @@ class DatePickerComponent {
           </f-popover>
         } @else if (open()) {
           <div
-            class="absolute z-50 mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-[0_8px_30px_rgb(0,0,0,0.1)] p-3 min-w-64"
+            class="absolute z-50 mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-3 min-w-64"
             (keydown.escape)="closeAndFocusInput()"
           >
             <ng-container [ngTemplateOutlet]="panelContent" />
@@ -3658,7 +3658,7 @@ class DatePickerComponent {
               type="button"
               role="gridcell"
               [attr.aria-selected]="i === viewMonth()"
-              class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
+              class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
               [class.bg-primary]="i === viewMonth()"
               [class.text-primary-contrast]="i === viewMonth()"
               (click)="selectMonth(i)"
@@ -3700,7 +3700,7 @@ class DatePickerComponent {
               type="button"
               role="gridcell"
               [attr.aria-selected]="y === viewYear()"
-              class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
+              class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
               [class.bg-primary]="y === viewYear()"
               [class.text-primary-contrast]="y === viewYear()"
               (click)="selectYear(y)"
@@ -3898,7 +3898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           </f-popover>
         } @else if (open()) {
           <div
-            class="absolute z-50 mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-[0_8px_30px_rgb(0,0,0,0.1)] p-3 min-w-64"
+            class="absolute z-50 mt-1 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-3 min-w-64"
             (keydown.escape)="closeAndFocusInput()"
           >
             <ng-container [ngTemplateOutlet]="panelContent" />
@@ -4053,7 +4053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               type="button"
               role="gridcell"
               [attr.aria-selected]="i === viewMonth()"
-              class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
+              class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
               [class.bg-primary]="i === viewMonth()"
               [class.text-primary-contrast]="i === viewMonth()"
               (click)="selectMonth(i)"
@@ -4095,7 +4095,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               type="button"
               role="gridcell"
               [attr.aria-selected]="y === viewYear()"
-              class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
+              class="text-sm py-2.5 rounded-md transition-colors cursor-pointer focus:outline-none focus-visible:ring-focus hover:bg-(--f-content-hover-background)"
               [class.bg-primary]="y === viewYear()"
               [class.text-primary-contrast]="y === viewYear()"
               (click)="selectYear(y)"
@@ -4726,7 +4726,9 @@ class InputIconComponent {
     style = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
     hostClass = computed(() => {
-        const sideClass = this.position() === 'right' ? 'right-3' : 'left-3';
+        const sideClass = this.position() === 'right'
+            ? 'right-(--f-field-padding-x)'
+            : 'left-(--f-field-padding-x)';
         return `absolute ${sideClass} top-1/2 -translate-y-1/2 text-(--f-form-field-placeholder-color) ${this.styleClass()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
@@ -4763,9 +4765,13 @@ class IconFieldComponent {
     _resolvedPosition = computed(() => this.iconPosition() || this._icon()?.position() || 'left', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_resolvedPosition" }] : /* istanbul ignore next */ []));
     hostClass = computed(() => {
+        // One icon slot wide, measured from the field's own inline padding so the gap
+        // between icon and text stays constant in every preset. Spelled out in full:
+        // Tailwind generates a utility only for class names it can find verbatim in the
+        // source, so an interpolated one silently produces no CSS at all.
         const paddingClass = this._resolvedPosition() === 'right'
-            ? '[&_input]:pr-9 [&_textarea]:pr-9'
-            : '[&_input]:pl-9 [&_textarea]:pl-9';
+            ? '[&_input]:pr-[calc(var(--f-field-padding-x)+1.5rem)] [&_textarea]:pr-[calc(var(--f-field-padding-x)+1.5rem)]'
+            : '[&_input]:pl-[calc(var(--f-field-padding-x)+1.5rem)] [&_textarea]:pl-[calc(var(--f-field-padding-x)+1.5rem)]';
         return `relative flex items-center ${paddingClass} ${this.styleClass()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
@@ -4862,17 +4868,25 @@ class InputNumberComponent {
     ...(ngDevMode ? [{ debugName: "numberFormat" }] : /* istanbul ignore next */ []));
     textSizeClass = computed(() => (this.size() === 'small' ? 'text-xs' : this.size() === 'large' ? 'text-base' : 'text-sm'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "textSizeClass" }] : /* istanbul ignore next */ []));
-    paddingYClass = computed(() => (this.size() === 'small' ? 'py-1.5' : this.size() === 'large' ? 'py-2.5' : 'py-2'), /* @ts-ignore */
+    // Shared by the input and its prefix/suffix addons so the three stay the same
+    // height. Derived from the preset's field padding on the same small/large steps
+    // the f-field utilities use — the addons rule out f-field itself, which would
+    // also set the inline padding they need to keep at px-2.
+    paddingYClass = computed(() => this.size() === 'small'
+        ? 'py-[calc(var(--f-field-padding-y)-0.125rem)]'
+        : this.size() === 'large'
+            ? 'py-[calc(var(--f-field-padding-y)+0.25rem)]'
+            : 'py-(--f-field-padding-y)', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paddingYClass" }] : /* istanbul ignore next */ []));
     wrapperClass = computed(() => {
         const stateClass = this.invalid() && this.touched()
             ? 'border-red-400 focus-within:border-red-400'
             : 'border-(--f-form-field-border-color) focus-within:border-primary';
         const directionClass = this.showButtons() && this.buttonLayout() === 'vertical' ? 'flex-col' : 'flex-row';
-        return `flex w-full items-stretch ${directionClass} border rounded-lg overflow-hidden focus-within:ring-focus transition-colors duration-[var(--f-transition-duration)] ${stateClass} ${this.styleClass()}`;
+        return `flex w-full items-stretch ${directionClass} border f-field-shape overflow-hidden focus-within:ring-focus transition-colors duration-[var(--f-transition-duration)] ${stateClass} ${this.styleClass()}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "wrapperClass" }] : /* istanbul ignore next */ []));
-    inputClass = computed(() => `block px-3 ${this.paddingYClass()} ${this.textSizeClass()} bg-(--f-form-field-background) text-(--f-form-field-color) focus:outline-none w-full min-w-0 disabled:opacity-60 disabled:cursor-not-allowed ${this.inputStyleClass()}`, /* @ts-ignore */
+    inputClass = computed(() => `block px-(--f-field-padding-x) ${this.paddingYClass()} ${this.textSizeClass()} bg-(--f-form-field-background) text-(--f-form-field-color) focus:outline-none w-full min-w-0 disabled:opacity-60 disabled:cursor-not-allowed ${this.inputStyleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputClass" }] : /* istanbul ignore next */ []));
     addonClass(border) {
         const borderClass = border === 'l' ? 'border-l' : 'border-r';
@@ -5162,17 +5176,10 @@ class InputTextDirective {
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     // Inputs already span full width by default; set false to shrink to content width.
     fluid = input(true, { ...(ngDevMode ? { debugName: "fluid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    _el = inject((ElementRef));
-    _iconLeft = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_iconLeft" }] : /* istanbul ignore next */ []));
-    ngOnInit() {
-        this._iconLeft.set(!!this._el.nativeElement.closest('f-iconfield'));
-    }
     classes = computed(() => {
         const invalidState = this.invalid() && this.touched();
         const variant = this.variant();
         const size = this.size();
-        const iconLeft = this._iconLeft();
         const stateClass = invalidState
             ? 'border-red-400 focus:border-red-400'
             : variant === 'filled'
@@ -5181,18 +5188,18 @@ class InputTextDirective {
         const variantClass = variant === 'filled'
             ? 'bg-(--f-form-field-filled-background)'
             : 'bg-(--f-form-field-background)';
-        const paddingY = size === 'small' ? 'py-1.5' : size === 'large' ? 'py-3' : 'py-2';
         const textSize = size === 'small' ? 'text-xs' : size === 'large' ? 'text-base' : 'text-sm';
-        const paddingX = iconLeft
-            ? size === 'small' ? 'pl-8 pr-2.5' : size === 'large' ? 'pl-11 pr-4' : 'pl-9 pr-3'
-            : size === 'small' ? 'px-2.5' : size === 'large' ? 'px-4' : 'px-3';
+        // Padding, radius and weight come from the active preset — a dense, square
+        // preset makes the field dense and square without a class change here. An
+        // enclosing f-iconfield overrides the icon side on top of this.
+        const shape = size === 'small' ? 'f-field-sm' : size === 'large' ? 'f-field-lg' : 'f-field';
         return [
-            'block rounded-lg border',
+            'block border',
             this.fluid() ? 'w-full' : 'w-auto',
-            paddingX, paddingY, textSize,
+            shape, textSize,
             variantClass,
             'text-(--f-form-field-color) placeholder:text-(--f-form-field-placeholder-color)',
-            'focus:outline-none focus:ring-focus',
+            'focus:outline-none focus-visible:ring-focus',
             'disabled:opacity-60 disabled:cursor-not-allowed',
             'transition-colors duration-[var(--f-transition-duration)]',
             stateClass,
@@ -5463,7 +5470,7 @@ class MultiSelectComponent {
     ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
     panelClass = computed(() => {
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
-        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden`;
+        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     panelStyle = computed(() => {
@@ -5499,7 +5506,7 @@ class MultiSelectComponent {
         }
     }
     triggerClass = computed(() => {
-        const base = 'w-full min-h-[34px] flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
+        const base = 'w-full min-h-[34px] flex items-center gap-2 f-field-compact text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
         const showInvalid = this.invalid() && this.touched();
         const stateClass = this.open()
             ? showInvalid
@@ -6669,12 +6676,12 @@ class PasswordComponent {
             ? (size === 'small' ? 'pr-8' : size === 'large' ? 'pr-11' : 'pr-10')
             : (size === 'small' ? 'pr-2.5' : size === 'large' ? 'pr-4' : 'pr-3');
         return [
-            'block rounded-lg border',
+            'block f-field-shape border',
             this.fluid() ? 'w-full' : 'w-auto',
             paddingLeft, paddingRight, paddingY, textSize,
             variantClass,
             'text-(--f-form-field-color) placeholder:text-(--f-form-field-placeholder-color)',
-            'focus:outline-none focus:ring-focus',
+            'focus:outline-none focus-visible:ring-focus',
             'disabled:opacity-60 disabled:cursor-not-allowed',
             'transition-colors duration-[var(--f-transition-duration)]',
             stateClass,
@@ -6723,7 +6730,7 @@ class PasswordComponent {
       @if (toggleMask()) {
         <button
           type="button"
-          class="inline-flex items-center absolute right-3 top-1/2 -translate-y-1/2 text-(--f-form-field-placeholder-color) hover:text-(--f-text-hover-color) cursor-pointer focus-visible:outline-none focus-visible:ring-focus rounded-sm"
+          class="inline-flex items-center absolute right-3 top-1/2 -translate-y-1/2 text-(--f-form-field-placeholder-color) hover:text-(--f-text-hover-color) cursor-pointer focus:outline-none focus-visible:ring-focus rounded-sm"
           [attr.aria-label]="show() ? 'Hide password' : 'Show password'"
           [attr.aria-pressed]="show()"
           (click)="toggleShow()"
@@ -6770,7 +6777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       @if (toggleMask()) {
         <button
           type="button"
-          class="inline-flex items-center absolute right-3 top-1/2 -translate-y-1/2 text-(--f-form-field-placeholder-color) hover:text-(--f-text-hover-color) cursor-pointer focus-visible:outline-none focus-visible:ring-focus rounded-sm"
+          class="inline-flex items-center absolute right-3 top-1/2 -translate-y-1/2 text-(--f-form-field-placeholder-color) hover:text-(--f-text-hover-color) cursor-pointer focus:outline-none focus-visible:ring-focus rounded-sm"
           [attr.aria-label]="show() ? 'Hide password' : 'Show password'"
           [attr.aria-pressed]="show()"
           (click)="toggleShow()"
@@ -7200,7 +7207,7 @@ class SelectComponent {
     ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
     panelClass = computed(() => {
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
-        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden`;
+        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     panelStyle = computed(() => {
@@ -7401,7 +7408,7 @@ class SelectComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
     triggerClass = computed(() => {
-        const base = 'w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg border bg-(--f-form-field-background) text-(--f-form-field-color) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
+        const base = 'w-full flex items-center justify-between f-field text-sm border bg-(--f-form-field-background) text-(--f-form-field-color) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
         const showInvalid = this.invalid() && this.touched();
         const stateClass = this.open()
             ? showInvalid
@@ -8307,11 +8314,11 @@ class TextareaDirective {
             ? 'bg-(--f-form-field-filled-background)'
             : 'bg-(--f-form-field-background)';
         return [
-            'block px-3 py-2 text-sm rounded-lg border',
+            'block f-field text-sm border',
             this.fluid() ? 'w-full' : 'w-auto',
             variantClass,
             'text-(--f-form-field-color) placeholder:text-(--f-form-field-placeholder-color)',
-            'focus:outline-none focus:ring-focus',
+            'focus:outline-none focus-visible:ring-focus',
             'disabled:opacity-60 disabled:cursor-not-allowed',
             this.autoResize() ? 'resize-none overflow-hidden' : 'resize-y min-h-20',
             'transition-colors duration-[var(--f-transition-duration)]',
@@ -8367,8 +8374,8 @@ class ToggleButtonComponent {
     hostClass = computed(() => `inline-block ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     buttonClass = computed(() => {
-        const sizing = this.size() === 'small' ? 'px-2.5 py-1.5 text-xs' : this.size() === 'large' ? 'px-4 py-2.5 text-base' : 'px-3 py-2 text-sm';
-        const base = `inline-flex items-center gap-2 ${sizing} rounded-lg border transition-colors duration-[var(--f-transition-duration)] focus:outline-none focus-visible:ring-focus cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed`;
+        const sizing = this.size() === 'small' ? 'f-field-sm text-xs' : this.size() === 'large' ? 'f-field-lg text-base' : 'f-field text-sm';
+        const base = `inline-flex items-center gap-2 ${sizing} border transition-colors duration-[var(--f-transition-duration)] focus:outline-none focus-visible:ring-focus cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed`;
         if (this.checked())
             return `${base} ${severitySolidBackground(this.severity())}`;
         const borderClass = this.invalid() ? 'border-red-400' : 'border-(--f-form-field-border-color)';
@@ -8873,7 +8880,7 @@ class DialogComponent {
                   <button
                     type="button"
                     [attr.aria-label]="maximized() ? 'Restore' : 'Maximize'"
-                    class="w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] focus-visible:outline-none focus-visible:ring-focus"
+                    class="w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] focus:outline-none focus-visible:ring-focus"
                     (click)="toggleMaximize()"
                   >
                     <ui-icon
@@ -8886,7 +8893,7 @@ class DialogComponent {
                   <button
                     type="button"
                     aria-label="Close"
-                    class="w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] focus-visible:outline-none focus-visible:ring-focus"
+                    class="w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] focus:outline-none focus-visible:ring-focus"
                     (click)="close()"
                   >
                     <ui-icon name="times" class="text-xs"></ui-icon>
@@ -8964,7 +8971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                   <button
                     type="button"
                     [attr.aria-label]="maximized() ? 'Restore' : 'Maximize'"
-                    class="w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] focus-visible:outline-none focus-visible:ring-focus"
+                    class="w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] focus:outline-none focus-visible:ring-focus"
                     (click)="toggleMaximize()"
                   >
                     <ui-icon
@@ -8977,7 +8984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                   <button
                     type="button"
                     aria-label="Close"
-                    class="w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] focus-visible:outline-none focus-visible:ring-focus"
+                    class="w-7 h-7 flex items-center justify-center rounded-lg cursor-pointer text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] focus:outline-none focus-visible:ring-focus"
                     (click)="close()"
                   >
                     <ui-icon name="times" class="text-xs"></ui-icon>
@@ -9195,7 +9202,7 @@ class DrawerComponent {
               <button
                 type="button"
                 aria-label="Close"
-                class="w-7 h-7 flex items-center justify-center rounded-lg text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] cursor-pointer focus-visible:outline-none focus-visible:ring-focus"
+                class="w-7 h-7 flex items-center justify-center rounded-lg text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] cursor-pointer focus:outline-none focus-visible:ring-focus"
                 (click)="close()"
               >
                 <ui-icon name="times" class="text-xs"></ui-icon>
@@ -9263,7 +9270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
               <button
                 type="button"
                 aria-label="Close"
-                class="w-7 h-7 flex items-center justify-center rounded-lg text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] cursor-pointer focus-visible:outline-none focus-visible:ring-focus"
+                class="w-7 h-7 flex items-center justify-center rounded-lg text-(--f-text-muted-color) hover:text-(--f-text-hover-color) hover:bg-(--f-content-hover-background) transition-all duration-[var(--f-transition-duration)] cursor-pointer focus:outline-none focus-visible:ring-focus"
                 (click)="close()"
               >
                 <ui-icon name="times" class="text-xs"></ui-icon>
@@ -11014,7 +11021,7 @@ class PaginatorComponent {
             <span class="text-xs text-(--f-text-muted-color)">Rows:</span>
             <div class="relative">
               <select
-                class="h-7 pl-2 pr-6 text-xs font-medium rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) cursor-pointer hover:border-(--f-content-border-color) focus:outline-none focus:border-primary focus:ring-focus transition-colors duration-[var(--f-transition-duration)] appearance-none"
+                class="h-7 pl-2 pr-6 text-xs font-medium rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) cursor-pointer hover:border-(--f-content-border-color) focus:outline-none focus:border-primary focus-visible:ring-focus transition-colors duration-[var(--f-transition-duration)] appearance-none"
                 [attr.aria-label]="rowsPerPageAriaLabel()"
                 (change)="onRowsChange($any($event.target).value)"
               >
@@ -11048,7 +11055,7 @@ class PaginatorComponent {
           @if (showJumpToPageInput()) {
             <input
               type="number"
-              class="w-14 h-8 text-xs text-center rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) focus:outline-none focus:border-primary focus:ring-focus"
+              class="w-14 h-8 text-xs text-center rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) focus:outline-none focus:border-primary focus-visible:ring-focus"
               [min]="1" [max]="pageCount()"
               [value]="currentPage() + 1"
               [attr.aria-label]="jumpToPageAriaLabel()"
@@ -11058,7 +11065,7 @@ class PaginatorComponent {
           @if (showJumpToPageDropdown()) {
             <div class="relative">
               <select
-                class="h-8 pl-2 pr-6 text-xs font-medium rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) cursor-pointer focus:outline-none focus:border-primary focus:ring-focus appearance-none"
+                class="h-8 pl-2 pr-6 text-xs font-medium rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) cursor-pointer focus:outline-none focus:border-primary focus-visible:ring-focus appearance-none"
                 [attr.aria-label]="jumpToPageAriaLabel()"
                 (change)="onJumpDropdown($any($event.target).value)"
               >
@@ -11104,7 +11111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             <span class="text-xs text-(--f-text-muted-color)">Rows:</span>
             <div class="relative">
               <select
-                class="h-7 pl-2 pr-6 text-xs font-medium rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) cursor-pointer hover:border-(--f-content-border-color) focus:outline-none focus:border-primary focus:ring-focus transition-colors duration-[var(--f-transition-duration)] appearance-none"
+                class="h-7 pl-2 pr-6 text-xs font-medium rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) cursor-pointer hover:border-(--f-content-border-color) focus:outline-none focus:border-primary focus-visible:ring-focus transition-colors duration-[var(--f-transition-duration)] appearance-none"
                 [attr.aria-label]="rowsPerPageAriaLabel()"
                 (change)="onRowsChange($any($event.target).value)"
               >
@@ -11138,7 +11145,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           @if (showJumpToPageInput()) {
             <input
               type="number"
-              class="w-14 h-8 text-xs text-center rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) focus:outline-none focus:border-primary focus:ring-focus"
+              class="w-14 h-8 text-xs text-center rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) focus:outline-none focus:border-primary focus-visible:ring-focus"
               [min]="1" [max]="pageCount()"
               [value]="currentPage() + 1"
               [attr.aria-label]="jumpToPageAriaLabel()"
@@ -11148,7 +11155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           @if (showJumpToPageDropdown()) {
             <div class="relative">
               <select
-                class="h-8 pl-2 pr-6 text-xs font-medium rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) cursor-pointer focus:outline-none focus:border-primary focus:ring-focus appearance-none"
+                class="h-8 pl-2 pr-6 text-xs font-medium rounded-lg border border-(--f-content-border-color) bg-(--f-content-background) text-(--f-text-color) cursor-pointer focus:outline-none focus:border-primary focus-visible:ring-focus appearance-none"
                 [attr.aria-label]="jumpToPageAriaLabel()"
                 (change)="onJumpDropdown($any($event.target).value)"
               >
@@ -13553,7 +13560,7 @@ class AutoCompleteComponent {
     ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
     panelClass = computed(() => {
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
-        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden`;
+        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     panelStyle = computed(() => {
@@ -13922,7 +13929,7 @@ class AutoCompleteComponent {
       @if (multiple()) {
         <div class="relative">
           <div
-            class="min-h-[2.375rem] flex flex-wrap items-center gap-1.5 px-2 py-1.5 border rounded-lg bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] cursor-text"
+            class="min-h-[2.375rem] flex flex-wrap items-center gap-1.5 f-field-compact border bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] cursor-text"
             [class]="wrapperClass()"
             [class.pr-7]="showClear() || loading()"
             (click)="inputEl.focus()"
@@ -13989,7 +13996,7 @@ class AutoCompleteComponent {
         <div class="relative">
           <input
             type="text"
-            class="w-full px-3 py-2 text-sm border rounded-lg bg-(--f-form-field-background) focus:outline-none focus:ring-focus transition-all duration-[var(--f-transition-duration)]"
+            class="w-full f-field text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]"
             [class]="inputClass()"
             [placeholder]="placeholder()"
             [(ngModel)]="query"
@@ -14190,7 +14197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       @if (multiple()) {
         <div class="relative">
           <div
-            class="min-h-[2.375rem] flex flex-wrap items-center gap-1.5 px-2 py-1.5 border rounded-lg bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] cursor-text"
+            class="min-h-[2.375rem] flex flex-wrap items-center gap-1.5 f-field-compact border bg-(--f-form-field-background) focus-within:ring-focus transition-all duration-[var(--f-transition-duration)] cursor-text"
             [class]="wrapperClass()"
             [class.pr-7]="showClear() || loading()"
             (click)="inputEl.focus()"
@@ -14257,7 +14264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         <div class="relative">
           <input
             type="text"
-            class="w-full px-3 py-2 text-sm border rounded-lg bg-(--f-form-field-background) focus:outline-none focus:ring-focus transition-all duration-[var(--f-transition-duration)]"
+            class="w-full f-field text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]"
             [class]="inputClass()"
             [placeholder]="placeholder()"
             [(ngModel)]="query"
@@ -14603,7 +14610,7 @@ class ColorPickerComponent {
     } @else {
       <button
         type="button"
-        class="w-8 h-8 rounded-lg border-2 border-(--f-content-border-color) shadow-sm hover:border-(--f-form-field-hover-border-color) transition-all cursor-pointer overflow-hidden focus-visible:outline-none focus-visible:ring-focus disabled:opacity-60 disabled:cursor-not-allowed"
+        class="w-8 h-8 rounded-lg border-2 border-(--f-content-border-color) shadow-sm hover:border-(--f-form-field-hover-border-color) transition-all cursor-pointer overflow-hidden focus:outline-none focus-visible:ring-focus disabled:opacity-60 disabled:cursor-not-allowed"
         [style.background-color]="value()"
         [disabled]="disabled()"
         (click)="togglePanel($event)"
@@ -14621,7 +14628,7 @@ class ColorPickerComponent {
         </f-popover>
       } @else if (open()) {
         <div
-          class="absolute z-50 top-10 left-0 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg p-3 w-56 space-y-3"
+          class="absolute z-50 top-10 left-0 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-3 w-56 space-y-3"
           (keydown.escape)="closePanel()"
         >
           <ng-container [ngTemplateOutlet]="pickerPanel" />
@@ -14635,7 +14642,7 @@ class ColorPickerComponent {
           @for (color of presetColors; track color) {
             <button
               type="button"
-              class="w-6 h-6 rounded-md border border-(--f-content-border-color) hover:scale-110 transition-transform cursor-pointer focus-visible:outline-none focus-visible:ring-focus"
+              class="w-6 h-6 rounded-md border border-(--f-content-border-color) hover:scale-110 transition-transform cursor-pointer focus:outline-none focus-visible:ring-focus"
               [style.background-color]="color"
               [class.ring-2]="value() === color"
               [class.ring-primary]="value() === color"
@@ -14653,7 +14660,7 @@ class ColorPickerComponent {
           ></div>
           <input
             type="text"
-            class="flex-1 px-2 py-1 text-xs border border-(--f-form-field-border-color) rounded-lg focus:outline-none focus:border-primary focus:ring-focus font-mono uppercase"
+            class="flex-1 px-2 py-1 text-xs border border-(--f-form-field-border-color) rounded-lg focus:outline-none focus:border-primary focus-visible:ring-focus font-mono uppercase"
             [ngModel]="hexInput()"
             (ngModelChange)="onHexInput($event)"
             maxlength="7"
@@ -14689,7 +14696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
     } @else {
       <button
         type="button"
-        class="w-8 h-8 rounded-lg border-2 border-(--f-content-border-color) shadow-sm hover:border-(--f-form-field-hover-border-color) transition-all cursor-pointer overflow-hidden focus-visible:outline-none focus-visible:ring-focus disabled:opacity-60 disabled:cursor-not-allowed"
+        class="w-8 h-8 rounded-lg border-2 border-(--f-content-border-color) shadow-sm hover:border-(--f-form-field-hover-border-color) transition-all cursor-pointer overflow-hidden focus:outline-none focus-visible:ring-focus disabled:opacity-60 disabled:cursor-not-allowed"
         [style.background-color]="value()"
         [disabled]="disabled()"
         (click)="togglePanel($event)"
@@ -14707,7 +14714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         </f-popover>
       } @else if (open()) {
         <div
-          class="absolute z-50 top-10 left-0 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg p-3 w-56 space-y-3"
+          class="absolute z-50 top-10 left-0 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-3 w-56 space-y-3"
           (keydown.escape)="closePanel()"
         >
           <ng-container [ngTemplateOutlet]="pickerPanel" />
@@ -14721,7 +14728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           @for (color of presetColors; track color) {
             <button
               type="button"
-              class="w-6 h-6 rounded-md border border-(--f-content-border-color) hover:scale-110 transition-transform cursor-pointer focus-visible:outline-none focus-visible:ring-focus"
+              class="w-6 h-6 rounded-md border border-(--f-content-border-color) hover:scale-110 transition-transform cursor-pointer focus:outline-none focus-visible:ring-focus"
               [style.background-color]="color"
               [class.ring-2]="value() === color"
               [class.ring-primary]="value() === color"
@@ -14739,7 +14746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           ></div>
           <input
             type="text"
-            class="flex-1 px-2 py-1 text-xs border border-(--f-form-field-border-color) rounded-lg focus:outline-none focus:border-primary focus:ring-focus font-mono uppercase"
+            class="flex-1 px-2 py-1 text-xs border border-(--f-form-field-border-color) rounded-lg focus:outline-none focus:border-primary focus-visible:ring-focus font-mono uppercase"
             [ngModel]="hexInput()"
             (ngModelChange)="onHexInput($event)"
             maxlength="7"
@@ -15407,7 +15414,7 @@ class SplitButtonComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dropdownClass" }] : /* istanbul ignore next */ []));
     menuPanelClass = computed(() => {
-        const base = 'z-50 min-w-[10rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden';
+        const base = 'z-50 min-w-[10rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden';
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute right-0 top-full mt-1';
         return `${position} ${base} ${this.menuStyleClass()}`;
     }, /* @ts-ignore */
@@ -15750,7 +15757,7 @@ class TreeSelectComponent {
     ...(ngDevMode ? [{ debugName: "_panelWidth" }] : /* istanbul ignore next */ []));
     panelClass = computed(() => {
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute w-full mt-1';
-        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden`;
+        return `${position} z-50 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     panelStyle = computed(() => {
@@ -15827,7 +15834,7 @@ class TreeSelectComponent {
         null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyTpl" }] : /* istanbul ignore next */ []));
     triggerClass = computed(() => {
-        const base = 'w-full min-h-[34px] flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
+        const base = 'w-full min-h-[34px] flex items-center gap-2 f-field-compact text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
         const showInvalid = this.invalid() && this.touched();
         const stateClass = this.open()
             ? showInvalid
@@ -16629,7 +16636,7 @@ class FieldsetComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FieldsetComponent, isStandalone: true, selector: "f-fieldset", inputs: { legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", onBeforeToggle: "onBeforeToggle", onAfterToggle: "onAfterToggle" }, host: { classAttribute: "block" }, queries: [{ propertyName: "legendTemplateRef", first: true, predicate: ["legend"], descendants: true, isSignal: true }, { propertyName: "fTemplates", predicate: FTemplateDirective, isSignal: true }], ngImport: i0, template: `
     <fieldset [class]="rootClass()" [style]="style()">
       <legend
-        class="px-2 text-sm font-semibold text-(--f-text-color) flex items-center gap-2 rounded focus-visible:outline-none focus-visible:ring-focus"
+        class="px-2 text-sm font-semibold text-(--f-text-color) flex items-center gap-2 rounded-md focus:outline-none focus-visible:ring-focus"
         [class.cursor-pointer]="toggleable()"
         [attr.tabindex]="toggleable() ? 0 : null"
         [attr.role]="toggleable() ? 'button' : null"
@@ -16676,7 +16683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     template: `
     <fieldset [class]="rootClass()" [style]="style()">
       <legend
-        class="px-2 text-sm font-semibold text-(--f-text-color) flex items-center gap-2 rounded focus-visible:outline-none focus-visible:ring-focus"
+        class="px-2 text-sm font-semibold text-(--f-text-color) flex items-center gap-2 rounded-md focus:outline-none focus-visible:ring-focus"
         [class.cursor-pointer]="toggleable()"
         [attr.tabindex]="toggleable() ? 0 : null"
         [attr.role]="toggleable() ? 'button' : null"
@@ -17789,7 +17796,7 @@ class MenubarComponent {
 
     <ng-template #submenuTpl let-list let-level="level">
       <ul
-        class="py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-visible"
+        class="py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-visible"
         role="menu"
         (keydown)="onSubmenuKeydown($event)"
       >
@@ -17981,7 +17988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
     <ng-template #submenuTpl let-list let-level="level">
       <ul
-        class="py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-visible"
+        class="py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-visible"
         role="menu"
         (keydown)="onSubmenuKeydown($event)"
       >
@@ -18366,8 +18373,8 @@ class TieredMenuComponent {
     <ng-template #itemsTpl let-list let-root="root" let-level="level">
       <ul
         [class]="root
-          ? 'py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-visible'
-          : 'py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-visible absolute top-0 z-[70]'"
+          ? 'py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-visible'
+          : 'py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-visible absolute top-0 z-[70]'"
         [class.left-full]="!root && !flipByLevel()[level]"
         [class.ml-0.5]="!root && !flipByLevel()[level]"
         [class.right-full]="!root && flipByLevel()[level]"
@@ -18493,8 +18500,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
     <ng-template #itemsTpl let-list let-root="root" let-level="level">
       <ul
         [class]="root
-          ? 'py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-visible'
-          : 'py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-visible absolute top-0 z-[70]'"
+          ? 'py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-visible'
+          : 'py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-visible absolute top-0 z-[70]'"
         [class.left-full]="!root && !flipByLevel()[level]"
         [class.ml-0.5]="!root && !flipByLevel()[level]"
         [class.right-full]="!root && flipByLevel()[level]"
@@ -18786,7 +18793,7 @@ class ContextMenuComponent {
 
     <ng-template #listTpl let-items let-level="level">
       <ul
-        class="py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden"
+        class="py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden"
         role="menu"
       >
         @for (item of items; track $index) {
@@ -18886,7 +18893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
 
     <ng-template #listTpl let-items let-level="level">
       <ul
-        class="py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden"
+        class="py-1 min-w-[12rem] bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden"
         role="menu"
       >
         @for (item of items; track $index) {
@@ -19016,7 +19023,7 @@ class MegaMenuComponent {
     panelClass = computed(() => {
         const alignClass = this.panelAlign() === 'end' ? 'right-0' : 'left-0';
         const posClass = this.orientation() === 'vertical' ? 'left-full top-0 ml-1' : `${alignClass} top-full mt-1`;
-        return `absolute ${posClass} z-50 grid gap-8 p-5 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg min-w-max max-h-[80vh] overflow-auto`;
+        return `absolute ${posClass} z-50 grid gap-8 p-5 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay min-w-max max-h-[80vh] overflow-auto`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     rootItemClass(item) {
@@ -20555,7 +20562,7 @@ class InputOtpComponent {
     groupClass = computed(() => `flex items-center gap-2 ${this.styleClass()}`, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "groupClass" }] : /* istanbul ignore next */ []));
     cellClass = computed(() => {
-        const base = `${this.sizeClass()} text-center font-semibold rounded-lg border bg-(--f-form-field-background) text-(--f-form-field-color) focus:outline-none focus:ring-focus transition-colors duration-[var(--f-transition-duration)] disabled:opacity-60 disabled:cursor-not-allowed`;
+        const base = `${this.sizeClass()} text-center font-semibold f-field-shape border bg-(--f-form-field-background) text-(--f-form-field-color) focus:outline-none focus-visible:ring-focus transition-colors duration-[var(--f-transition-duration)] disabled:opacity-60 disabled:cursor-not-allowed`;
         const borderClass = this.invalid() ? 'border-red-400 focus:border-red-400' : 'border-(--f-form-field-border-color) focus:border-primary';
         return `${base} ${borderClass}`;
     }, /* @ts-ignore */
@@ -20773,7 +20780,7 @@ class SliderComponent {
     ...(ngDevMode ? [{ debugName: "rangeClass" }] : /* istanbul ignore next */ []));
     handleClass = computed(() => {
         const center = this.orientation() === 'vertical' ? 'left-1/2 -translate-x-1/2' : 'top-1/2 -translate-y-1/2';
-        return `absolute ${center} w-4 h-4 rounded-full bg-primary border-2 border-(--f-content-background) shadow cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-focus`;
+        return `absolute ${center} w-4 h-4 rounded-full bg-primary border-2 border-(--f-content-background) shadow cursor-grab active:cursor-grabbing focus:outline-none focus-visible:ring-focus`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "handleClass" }] : /* istanbul ignore next */ []));
     toPercent(v) {
@@ -21106,7 +21113,7 @@ class KnobComponent {
       [attr.width]="size()"
       [attr.height]="size()"
       [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
-      class="select-none focus-visible:outline-none focus-visible:ring-focus rounded-full"
+      class="select-none focus:outline-none focus-visible:ring-focus rounded-full"
       [class.cursor-pointer]="!disabled() && !readonly()"
       [class.opacity-60]="disabled()"
       [attr.tabindex]="disabled() ? null : 0"
@@ -21154,7 +21161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       [attr.width]="size()"
       [attr.height]="size()"
       [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
-      class="select-none focus-visible:outline-none focus-visible:ring-focus rounded-full"
+      class="select-none focus:outline-none focus-visible:ring-focus rounded-full"
       [class.cursor-pointer]="!disabled() && !readonly()"
       [class.opacity-60]="disabled()"
       [attr.tabindex]="disabled() ? null : 0"
@@ -21241,7 +21248,7 @@ class CascadeSelectComponent {
     ...(ngDevMode ? [{ debugName: "_panelLeft" }] : /* istanbul ignore next */ []));
     panelClass = computed(() => {
         const position = this.appendTo() === 'body' ? 'fixed' : 'absolute mt-1';
-        return `${position} z-50 flex bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg overflow-hidden`;
+        return `${position} z-50 flex bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay overflow-hidden`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
     panelStyle = computed(() => {
@@ -21318,7 +21325,7 @@ class CascadeSelectComponent {
         null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "emptyTpl" }] : /* istanbul ignore next */ []));
     triggerClass = computed(() => {
-        const base = 'w-full min-h-[34px] flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
+        const base = 'w-full min-h-[34px] flex items-center gap-2 f-field-compact text-sm border bg-(--f-form-field-background) focus:outline-none focus-visible:ring-focus transition-all duration-[var(--f-transition-duration)]';
         const showInvalid = this.invalid() && this.touched();
         const stateClass = this.open()
             ? showInvalid
@@ -22055,7 +22062,7 @@ class ConfirmPopupComponent {
       @if (c.target) {
         <div
           #panel
-          class="confirmpopup-panel fixed z-50 w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg p-4"
+          class="confirmpopup-panel fixed z-50 w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-4"
           [class]="styleClass()"
           [style]="style()"
           [style.top.px]="top()"
@@ -22116,7 +22123,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
       @if (c.target) {
         <div
           #panel
-          class="confirmpopup-panel fixed z-50 w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) rounded-lg shadow-lg p-4"
+          class="confirmpopup-panel fixed z-50 w-72 bg-(--f-overlay-popover-background) border border-(--f-content-border-color) f-overlay p-4"
           [class]="styleClass()"
           [style]="style()"
           [style.top.px]="top()"
@@ -22385,7 +22392,7 @@ class InplaceComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: InplaceComponent, isStandalone: true, selector: "f-inplace", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", onActivate: "onActivate", onDeactivate: "onDeactivate" }, host: { properties: { "attr.aria-live": "'polite'" }, classAttribute: "block" }, ngImport: i0, template: `
     @if (!active()) {
       <div
-        class="inline-flex items-center gap-2 px-2 py-1 rounded-md cursor-pointer hover:bg-(--f-content-hover-background) transition-colors focus-visible:outline-none focus-visible:ring-focus"
+        class="inline-flex items-center gap-2 px-2 py-1 rounded-md cursor-pointer hover:bg-(--f-content-hover-background) transition-colors focus:outline-none focus-visible:ring-focus"
         [class.pointer-events-none]="disabled()"
         [class.opacity-60]="disabled()"
         [attr.tabindex]="disabled() ? null : 0"
@@ -22404,7 +22411,7 @@ class InplaceComponent {
         @if (closable()) {
           <button
             type="button"
-            class="w-6 h-6 flex items-center justify-center rounded-md text-(--f-text-muted-color) hover:bg-(--f-content-hover-background) focus-visible:outline-none focus-visible:ring-focus"
+            class="w-6 h-6 flex items-center justify-center rounded-md text-(--f-text-muted-color) hover:bg-(--f-content-hover-background) focus:outline-none focus-visible:ring-focus"
             aria-label="Close"
             (click)="close()"
           >
@@ -22424,7 +22431,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     template: `
     @if (!active()) {
       <div
-        class="inline-flex items-center gap-2 px-2 py-1 rounded-md cursor-pointer hover:bg-(--f-content-hover-background) transition-colors focus-visible:outline-none focus-visible:ring-focus"
+        class="inline-flex items-center gap-2 px-2 py-1 rounded-md cursor-pointer hover:bg-(--f-content-hover-background) transition-colors focus:outline-none focus-visible:ring-focus"
         [class.pointer-events-none]="disabled()"
         [class.opacity-60]="disabled()"
         [attr.tabindex]="disabled() ? null : 0"
@@ -22443,7 +22450,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         @if (closable()) {
           <button
             type="button"
-            class="w-6 h-6 flex items-center justify-center rounded-md text-(--f-text-muted-color) hover:bg-(--f-content-hover-background) focus-visible:outline-none focus-visible:ring-focus"
+            class="w-6 h-6 flex items-center justify-center rounded-md text-(--f-text-muted-color) hover:bg-(--f-content-hover-background) focus:outline-none focus-visible:ring-focus"
             aria-label="Close"
             (click)="close()"
           >
@@ -26286,7 +26293,7 @@ class ImageCompareComponent {
           aria-valuemin="0"
           aria-valuemax="100"
           [attr.aria-valuenow]="Math.round(position())"
-          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white shadow-lg flex items-center justify-center cursor-ew-resize focus-visible:outline-none focus-visible:ring-focus"
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white shadow-lg flex items-center justify-center cursor-ew-resize focus:outline-none focus-visible:ring-focus"
           (keydown)="onKeydown($event)"
           (mousedown)="$event.stopPropagation(); onDown($event)"
           (touchstart)="$event.stopPropagation(); onTouchDown($event)"
@@ -26328,7 +26335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
           aria-valuemin="0"
           aria-valuemax="100"
           [attr.aria-valuenow]="Math.round(position())"
-          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white shadow-lg flex items-center justify-center cursor-ew-resize focus-visible:outline-none focus-visible:ring-focus"
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white shadow-lg flex items-center justify-center cursor-ew-resize focus:outline-none focus-visible:ring-focus"
           (keydown)="onKeydown($event)"
           (mousedown)="$event.stopPropagation(); onDown($event)"
           (touchstart)="$event.stopPropagation(); onTouchDown($event)"
@@ -26836,12 +26843,18 @@ const NOIR_PRIMARY = {
     '900': 'var(--f-surface-900)', '950': 'var(--f-surface-950)',
 };
 
+/* Aura — soft and elevated. Rounded controls, compact rows, diffuse shadows
+   carrying the elevation, hairline borders. This is the app's default look, so
+   its values are the ones every other preset is a departure from. */
 const AURA_PRESET = {
     name: 'Aura',
-    borderRadius: '6px',
+    radiusXs: '2px',
     borderRadiusSm: '4px',
+    borderRadius: '6px',
     borderRadiusLg: '8px',
     borderRadiusXl: '12px',
+    radius3xl: '16px',
+    radius4xl: '20px',
     borderWidth: '1px',
     shadowSm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
     shadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
@@ -26852,9 +26865,19 @@ const AURA_PRESET = {
     focusRingWidth: '1px',
     focusRingStyle: 'solid',
     focusRingOffset: '2px',
-    buttonFontWeight: '500',
     highlightVariant: 'tint',
     strongBorders: false,
+    fieldPaddingX: '0.75rem',
+    fieldPaddingY: '0.5rem',
+    fieldBorderRadius: '6px',
+    fieldFontWeight: '400',
+    buttonPaddingX: '1rem',
+    buttonPaddingY: '0.5rem',
+    buttonBorderRadius: '6px',
+    buttonFontWeight: '500',
+    buttonLetterSpacing: '0em',
+    overlayBorderRadius: '6px',
+    overlayShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
     selectButton: {
         background: 'var(--f-track-background)',
         borderColor: 'transparent',
@@ -26872,34 +26895,51 @@ const AURA_PRESET = {
     cardPadding: '1.25rem',
     cardGap: '0.5rem',
     cardShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
-    sidebarBorderWidth: '0',
+    sidebarBorderWidth: '0px',
     sidebarRadius: 'var(--f-border-radius-xl)',
     sidebarShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-    topbarBorderWidth: '0',
+    topbarBorderWidth: '0px',
     topbarShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
     menuItemActiveRadius: '9999px',
-    menuItemActiveBorderWidth: '0',
+    menuItemActiveBorderWidth: '0px',
     signaturePrimary: 'violet',
 };
-const NORA_PRESET = {
-    name: 'Nora',
-    borderRadius: '2px',
-    borderRadiusSm: '2px',
-    borderRadiusLg: '2px',
-    borderRadiusXl: '2px',
-    borderWidth: '2px',
-    shadowSm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-    shadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
-    shadowLg: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-    shadowXl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
-    shadow2xl: '0 25px 50px -12px rgb(0 0 0 / 0.25)',
-    transitionDuration: '0s',
+/* Lara — structural and flat. Corners tighten, rows grow noticeably taller,
+   shadows all but disappear and separation comes from linework instead, and type
+   thickens. Switching from Aura should read as a different product, not a
+   different accent colour. */
+const LARA_PRESET = {
+    name: 'Lara',
+    radiusXs: '2px',
+    borderRadiusSm: '3px',
+    borderRadius: '4px',
+    borderRadiusLg: '6px',
+    borderRadiusXl: '8px',
+    radius3xl: '10px',
+    radius4xl: '12px',
+    borderWidth: '1px',
+    shadowSm: '0 1px 1px 0 rgba(0, 0, 0, 0.04)',
+    shadow: '0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    shadowLg: '0 2px 6px -1px rgba(0, 0, 0, 0.08)',
+    shadowXl: '0 6px 14px -6px rgba(0, 0, 0, 0.12)',
+    shadow2xl: '0 10px 24px -10px rgba(0, 0, 0, 0.18)',
+    transitionDuration: '0.15s',
     focusRingWidth: '2px',
     focusRingStyle: 'solid',
-    focusRingOffset: '-1px',
-    buttonFontWeight: '700',
-    highlightVariant: 'solid',
-    strongBorders: true,
+    focusRingOffset: '0px',
+    highlightVariant: 'tint',
+    strongBorders: false,
+    fieldPaddingX: '0.875rem',
+    fieldPaddingY: '0.75rem',
+    fieldBorderRadius: '4px',
+    fieldFontWeight: '500',
+    buttonPaddingX: '1.125rem',
+    buttonPaddingY: '0.75rem',
+    buttonBorderRadius: '4px',
+    buttonFontWeight: '600',
+    buttonLetterSpacing: '0em',
+    overlayBorderRadius: '4px',
+    overlayShadow: '0 6px 14px -6px rgba(0, 0, 0, 0.12)',
     selectButton: {
         background: 'var(--f-form-field-background)',
         borderColor: 'var(--f-form-field-border-color)',
@@ -26907,44 +26947,60 @@ const NORA_PRESET = {
         padding: '0px',
         itemColor: 'var(--f-text-muted-color)',
         itemHoverBackground: 'var(--f-content-hover-background)',
-        checkedBackground: 'var(--f-primary-color)',
-        checkedColor: 'var(--f-primary-contrast-color)',
+        checkedBackground: 'var(--f-highlight-background)',
+        checkedColor: 'var(--f-highlight-color)',
         checkedShadow: 'none',
         fontWeight: '600',
         itemBorderRadius: '0px',
     },
-    cardBorderRadius: '4px',
-    cardPadding: '1.25rem',
-    cardGap: '0.5rem',
-    cardShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.1)',
-    sidebarBorderWidth: '2px',
-    sidebarRadius: '0',
+    cardBorderRadius: '6px',
+    cardPadding: '1.5rem',
+    cardGap: '0.75rem',
+    cardShadow: '0 0 #0000',
+    sidebarBorderWidth: '1px',
+    sidebarRadius: '0px',
     sidebarShadow: 'none',
-    topbarBorderWidth: '2px',
+    topbarBorderWidth: '1px',
     topbarShadow: 'none',
-    menuItemActiveRadius: '0',
-    menuItemActiveBorderWidth: '0',
-    signaturePrimary: 'noir',
+    menuItemActiveRadius: 'var(--f-border-radius-sm)',
+    menuItemActiveBorderWidth: '3px',
+    signaturePrimary: 'blue',
 };
-const LARA_PRESET = {
-    name: 'Lara',
-    borderRadius: '6px',
-    borderRadiusSm: '4px',
-    borderRadiusLg: '8px',
-    borderRadiusXl: '12px',
-    borderWidth: '1px',
-    shadowSm: '0 1px 2px 0 rgba(0, 0, 0, 0.08)',
-    shadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
-    shadowLg: '0 2px 12px 0 rgba(0, 0, 0, 0.1)',
-    shadowXl: '0 1px 3px rgba(0, 0, 0, 0.3)',
-    shadow2xl: '0 4px 12px 0 rgba(0, 0, 0, 0.35)',
-    transitionDuration: '0.2s',
-    focusRingWidth: '0',
-    focusRingStyle: 'none',
-    focusRingOffset: '0',
-    buttonFontWeight: '600',
-    highlightVariant: 'tint',
-    strongBorders: false,
+/* Nora — sharp and brutalist. Every corner squared, every line doubled, motion
+   removed, selection painted solid rather than tinted, and type at its heaviest.
+   Only overlays keep a shadow, so a dropdown still separates from the page. */
+const NORA_PRESET = {
+    name: 'Nora',
+    radiusXs: '0px',
+    borderRadiusSm: '0px',
+    borderRadius: '0px',
+    borderRadiusLg: '0px',
+    borderRadiusXl: '0px',
+    radius3xl: '0px',
+    radius4xl: '0px',
+    borderWidth: '2px',
+    shadowSm: '0 0 #0000',
+    shadow: '0 0 #0000',
+    shadowLg: '0 8px 16px -8px rgb(0 0 0 / 0.25)',
+    shadowXl: '0 12px 24px -12px rgb(0 0 0 / 0.3)',
+    shadow2xl: '0 16px 32px -16px rgb(0 0 0 / 0.35)',
+    transitionDuration: '0s',
+    focusRingWidth: '2px',
+    focusRingStyle: 'solid',
+    focusRingOffset: '-1px',
+    highlightVariant: 'solid',
+    strongBorders: true,
+    fieldPaddingX: '0.75rem',
+    fieldPaddingY: '0.5rem',
+    fieldBorderRadius: '0px',
+    fieldFontWeight: '500',
+    buttonPaddingX: '1rem',
+    buttonPaddingY: '0.5rem',
+    buttonBorderRadius: '0px',
+    buttonFontWeight: '700',
+    buttonLetterSpacing: '0.025em',
+    overlayBorderRadius: '0px',
+    overlayShadow: '0 8px 16px -8px rgb(0 0 0 / 0.25)',
     selectButton: {
         background: 'var(--f-form-field-background)',
         borderColor: 'var(--f-form-field-border-color)',
@@ -26952,24 +27008,24 @@ const LARA_PRESET = {
         padding: '0px',
         itemColor: 'var(--f-text-muted-color)',
         itemHoverBackground: 'var(--f-content-hover-background)',
-        checkedBackground: 'var(--f-highlight-background)',
-        checkedColor: 'var(--f-highlight-color)',
+        checkedBackground: 'var(--f-primary-color)',
+        checkedColor: 'var(--f-primary-contrast-color)',
         checkedShadow: 'none',
-        fontWeight: '500',
+        fontWeight: '700',
         itemBorderRadius: '0px',
     },
-    cardBorderRadius: '8px',
-    cardPadding: '1.5rem',
-    cardGap: '0.75rem',
-    cardShadow: '0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)',
-    sidebarBorderWidth: '1px',
-    sidebarRadius: '0',
+    cardBorderRadius: '0px',
+    cardPadding: '1.25rem',
+    cardGap: '0.5rem',
+    cardShadow: '0 0 #0000',
+    sidebarBorderWidth: '2px',
+    sidebarRadius: '0px',
     sidebarShadow: 'none',
-    topbarBorderWidth: '1px',
+    topbarBorderWidth: '2px',
     topbarShadow: 'none',
-    menuItemActiveRadius: 'var(--f-border-radius-sm)',
-    menuItemActiveBorderWidth: '3px',
-    signaturePrimary: 'blue',
+    menuItemActiveRadius: '0px',
+    menuItemActiveBorderWidth: '0px',
+    signaturePrimary: 'noir',
 };
 const PRESETS = {
     Aura: AURA_PRESET,
@@ -26988,6 +27044,11 @@ function applyPrimaryPalette(palette, isDark = false, root = document.documentEl
         setVar(`--f-primary-${shade}`, palette[shade], root);
     }
     const isNoir = palette['50'].startsWith('var(');
+    // Skins that paint their own chrome from the primary ramp — the modern shell's
+    // gradient canvas — need to know the ramp is a neutral: ink that reads over a
+    // saturated colour is unreadable over pale grey. Published as a class because CSS
+    // cannot branch on a custom property's value.
+    root.classList.toggle('f-primary-noir', isNoir);
     if (isNoir) {
         if (isDark) {
             setVar('--f-primary-color', 'var(--f-surface-50)', root);
@@ -27082,11 +27143,18 @@ function applyDarkSemantics(root = document.documentElement) {
 }
 // ─── Preset tokens ─────────────────────────────────────────────────────────────
 function applyPreset(preset, root = document.documentElement) {
+    // Semantic radius steps — what the layout SCSS and the component templates name.
     setVar('--f-content-border-radius', preset.borderRadius, root);
     setVar('--f-border-radius-sm', preset.borderRadiusSm, root);
     setVar('--f-border-radius-md', preset.borderRadius, root);
     setVar('--f-border-radius-lg', preset.borderRadiusLg, root);
     setVar('--f-border-radius-xl', preset.borderRadiusXl, root);
+    // The two ends of Tailwind's rounded-* scale that the semantic steps don't cover.
+    // Without them `rounded-xs` / `rounded-3xl` / `rounded-4xl` keep Tailwind's fixed
+    // defaults and stay the same shape no matter which preset is active.
+    setVar('--f-radius-xs', preset.radiusXs, root);
+    setVar('--f-radius-3xl', preset.radius3xl, root);
+    setVar('--f-radius-4xl', preset.radius4xl, root);
     setVar('--f-border-width', preset.borderWidth, root);
     setVar('--f-transition-duration', preset.transitionDuration, root);
     setVar('--f-focus-ring-width', preset.focusRingWidth, root);
@@ -27099,7 +27167,19 @@ function applyPreset(preset, root = document.documentElement) {
     setVar('--f-shadow-lg', preset.shadowLg, root);
     setVar('--f-shadow-xl', preset.shadowXl, root);
     setVar('--f-shadow-2xl', preset.shadow2xl, root);
+    // Control density and shape. Fields and buttons read these instead of fixed
+    // padding classes, so a preset controls how airy or dense the whole UI reads.
+    setVar('--f-field-padding-x', preset.fieldPaddingX, root);
+    setVar('--f-field-padding-y', preset.fieldPaddingY, root);
+    setVar('--f-field-border-radius', preset.fieldBorderRadius, root);
+    setVar('--f-field-font-weight', preset.fieldFontWeight, root);
+    setVar('--f-button-padding-x', preset.buttonPaddingX, root);
+    setVar('--f-button-padding-y', preset.buttonPaddingY, root);
+    setVar('--f-button-border-radius', preset.buttonBorderRadius, root);
     setVar('--f-button-font-weight', preset.buttonFontWeight, root);
+    setVar('--f-button-letter-spacing', preset.buttonLetterSpacing, root);
+    setVar('--f-overlay-border-radius', preset.overlayBorderRadius, root);
+    setVar('--f-overlay-shadow', preset.overlayShadow, root);
     setVar('--f-card-border-radius', preset.cardBorderRadius, root);
     setVar('--f-card-padding', preset.cardPadding, root);
     setVar('--f-card-gap', preset.cardGap, root);
@@ -27123,8 +27203,20 @@ function applyPreset(preset, root = document.documentElement) {
     setVar('--f-selectbutton-checked-shadow', sb.checkedShadow, root);
     setVar('--f-selectbutton-font-weight', sb.fontWeight, root);
     setVar('--f-selectbutton-item-border-radius', sb.itemBorderRadius, root);
+    // The active preset, published for the rare rule that cannot be expressed as a
+    // token — a skin that needs to know it is being asked for a square, borderless
+    // or motionless design language rather than reading each token back out.
+    root.dataset['fPreset'] = preset.name;
+}
+/** The options the last `applyTheme` ran with, so a later re-apply — the dark-mode
+    flip, above all — rebuilds the theme the user is actually looking at instead of
+    the one the app booted with. */
+let appliedTheme = {};
+function getAppliedTheme() {
+    return { ...appliedTheme };
 }
 function applyTheme(options, root = document.documentElement) {
+    appliedTheme = { ...options };
     const presetName = (options.preset ?? 'Aura');
     const preset = PRESETS[presetName] ?? PRESETS['Aura'];
     const primaryName = options.primary ?? 'violet';
@@ -27200,16 +27292,22 @@ function initializeNgUITheme(options, platformId) {
         const isDark = document.documentElement.classList.contains(darkModeSelector.replace('.', '')) ||
             document.documentElement.getAttribute('class')?.includes('app-dark') === true;
         applyTheme({ ...themeOptions, darkTheme: isDark });
-        // Apply dark mode semantics on toggle
-        const observer = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-                    const el = mutation.target;
-                    const nowDark = el.classList.contains('app-dark');
-                    const presetKeys = themeOptions;
-                    applyTheme({ ...presetKeys, darkTheme: nowDark });
-                }
-            }
+        // Re-apply the semantics when dark mode flips. Two things matter here:
+        //
+        //  * Only a real light/dark flip may trigger a re-apply. The root element carries
+        //    other theme classes too — `f-primary-noir`, published whenever the primary
+        //    ramp is a neutral — and reacting to those turned picking the Nora preset
+        //    (whose signature primary is noir) into a self-inflicted theme reset.
+        //  * The re-apply rebuilds the theme the user is currently on, not the one the app
+        //    booted with. `themeOptions` is the bootstrap snapshot and goes stale the
+        //    moment anyone touches the configurator.
+        let wasDark = isDark;
+        const observer = new MutationObserver(() => {
+            const nowDark = document.documentElement.classList.contains('app-dark');
+            if (nowDark === wasDark)
+                return;
+            wasDark = nowDark;
+            applyTheme({ ...getAppliedTheme(), darkTheme: nowDark });
         });
         observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
     };