@rtsee/ngx 0.0.110 → 0.0.112

package/dist/ngx/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, AfterViewInit, ElementRef, EventEmitter, OnDestroy, ChangeDetectorRef, OutputEmitterRef, ViewContainerRef, ComponentFactoryResolver, OnChanges, SimpleChanges, Type } from '@angular/core';
+import { OnInit, AfterViewInit, ElementRef, EventEmitter, OnDestroy, ChangeDetectorRef, OutputEmitterRef, OnChanges, SimpleChanges, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
 import { RTSeeConference, RTSeePeerConnection } from '@rtsee/conference';
 import { RTSeeMessenger, RTSeeMessengerSearch, RTSeeMessage, RTSeeChat, RTSeeChatMember, RTSeeMentionAutocomplete, RTSeeWorkflowAutocomplete, OzzyClientTask } from '@rtsee/messenger';
 import { IPeer, RTSeeTextLabelKeys, IRTSeeCall } from '@rtsee/core';
@@ -139,6 +139,7 @@ declare class PaymentProductSnippetComponent {
 
 declare class RtseeEventsDashboardComponent {
     eventsDashboard: RTSeeEventsDashboard;
+    loadMore(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtseeEventsDashboardComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RtseeEventsDashboardComponent, "rtsee-events-dashboard", never, { "eventsDashboard": { "alias": "eventsDashboard"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -511,10 +512,21 @@ declare class TimeFormatHelperService {
     static ɵprov: i0.ɵɵInjectableDeclaration<TimeFormatHelperService>;
 }
 
-declare class RtseeEventsDashboardSessionComponent {
+declare class RtseeEventsDashboardSessionComponent implements OnInit, OnChanges, OnDestroy {
     timeFormatService: TimeFormatHelperService;
+    private cd;
     session: RTSeeDashboardClientSession;
-    constructor(timeFormatService: TimeFormatHelperService);
+    durationText: string;
+    visibleEventsCount: number;
+    private timerInterval;
+    constructor(timeFormatService: TimeFormatHelperService, cd: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    loadMoreEvents(): void;
+    private initTimer;
+    private stopTimer;
+    private updateDuration;
     static ɵfac: i0.ɵɵFactoryDeclaration<RtseeEventsDashboardSessionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RtseeEventsDashboardSessionComponent, "rtsee-rtsee-events-dashboard-session", never, { "session": { "alias": "session"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -544,21 +556,24 @@ declare class EventsWidgetsService {
     static ɵprov: i0.ɵɵInjectableDeclaration<EventsWidgetsService>;
 }
 
-declare class EventThumbnailComponent implements OnInit, AfterViewInit {
+declare class EventThumbnailComponent implements OnInit, OnChanges, AfterViewInit {
     private widgetsService;
     private componentFactoryResolver;
     timeFormatService: TimeFormatHelperService;
     private cd;
     tooltip?: string;
     timeInAgoFormat: string;
+    private componentRef?;
     event: RTSeeDashboardEvent;
+    session?: RTSeeDashboardClientSession;
     widgetHost: WidgetDirective;
     constructor(widgetsService: EventsWidgetsService, componentFactoryResolver: ComponentFactoryResolver, timeFormatService: TimeFormatHelperService, cd: ChangeDetectorRef);
     ngOnInit(): void;
     generateTooltip(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EventThumbnailComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EventThumbnailComponent, "rtsee-event-thumbnail", never, { "event": { "alias": "event"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EventThumbnailComponent, "rtsee-event-thumbnail", never, { "event": { "alias": "event"; "required": false; }; "session": { "alias": "session"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 declare class ShaveDirective implements AfterViewInit {
@@ -948,23 +963,6 @@ declare class GtagService {
     static ɵprov: i0.ɵɵInjectableDeclaration<GtagService>;
 }
 
-interface IWorkflowStepWidget {
-    /** matches IOzzyWorkflowStepDefinition.widget */
-    name: string;
-    /** standalone component with `step`, `workflow`, `chat`, `messenger` inputs */
-    component: Type<unknown>;
-}
-/**
- * Registry of the components which render workflow steps inside the rts-workflow widget.
- */
-declare class WorkflowStepsService {
-    stepsMap: IWorkflowStepWidget[];
-    register(widget: IWorkflowStepWidget): void;
-    getStepComponentByName(name?: string): Type<unknown> | null;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WorkflowStepsService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<WorkflowStepsService>;
-}
-
 /**
  * Default client-side representation of a server-side OzzyTask.
  * Can be used directly (`[task]`) or as a message widget (`message.data.taskId`).
@@ -1002,5 +1000,60 @@ declare class RTSeeTaskComponent implements OnInit, OnChanges, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<RTSeeTaskComponent, "rtsee-task", never, { "task": { "alias": "task"; "required": false; }; "message": { "alias": "message"; "required": false; }; "messenger": { "alias": "messenger"; "required": false; }; "chat": { "alias": "chat"; "required": false; }; "allowExecute": { "alias": "allowExecute"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { EntitiesConfigurationsListComponent, EntitiesListComponent, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, StoryElementsSectionComponent, WorkflowStepsService };
-export type { IAccordionItem, IWorkflowStepWidget, RTSeeTagForm, RTSeeTagGroupForm };
+declare abstract class BaseEventWidgetComponent implements OnInit, OnChanges, OnDestroy {
+    protected cd: ChangeDetectorRef;
+    private _event;
+    set event(value: RTSeeDashboardEvent);
+    get event(): RTSeeDashboardEvent;
+    private _session?;
+    set session(value: RTSeeDashboardClientSession | undefined);
+    get session(): RTSeeDashboardClientSession | undefined;
+    durationText: string;
+    totalSeconds: number;
+    isLive: boolean;
+    private intervalId;
+    constructor(cd: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    protected initCounter(): void;
+    protected stopCounter(): void;
+    updateDuration(): void;
+    protected formatSeconds(seconds: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseEventWidgetComponent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseEventWidgetComponent, never, never, { "event": { "alias": "event"; "required": false; }; "session": { "alias": "session"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+declare class StoryDetailsOpenedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd: ChangeDetectorRef);
+    get storyName(): string;
+    get storyUrl(): string | null;
+    get imageUrl(): string | null;
+    get description(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StoryDetailsOpenedWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StoryDetailsOpenedWidgetComponent, "rtsee-story-details-opened-widget", never, {}, {}, never, never, true, never>;
+}
+
+declare class StoryReadingStartedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd: ChangeDetectorRef);
+    get storyName(): string;
+    get storyUrl(): string | null;
+    get imageUrl(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StoryReadingStartedWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StoryReadingStartedWidgetComponent, "rtsee-story-reading-started-widget", never, {}, {}, never, never, true, never>;
+}
+
+declare class SlideNumberChangedWidgetComponent extends BaseEventWidgetComponent {
+    constructor(cd: ChangeDetectorRef);
+    get slideNumber(): number | string;
+    get totalSlides(): number | null;
+    get slideText(): string;
+    get storyName(): string | null;
+    get storyUrl(): string | null;
+    get imageUrl(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SlideNumberChangedWidgetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SlideNumberChangedWidgetComponent, "rtsee-slide-number-changed-widget", never, {}, {}, never, never, true, never>;
+}
+
+export { BaseEventWidgetComponent, EntitiesConfigurationsListComponent, EntitiesListComponent, EventsWidgetsService, FormComponent, GtagService, IllustratorComponent, InteractiveStoryEditorComponent, ManageEntityComponent, ManageEntityConfigurationComponent, MessengerComponent, NgxService, PaymentProductSnippetComponent, PresentationComponent, ProfileComponent, RTSeeAuthComponent, RTSeeConferenceComponent, RTSeeContainerComponent, RTSeeControlsComponent, RTSeeModule, RTSeeTaskComponent, RtseeEntityCommentsComponent, RtseeEntityPreviewComponent, RtseeEntityTagsComponent, RtseeEventsDashboardComponent, RtseePeerComponent, RtseeSettingsComponent, RtseeTagGroupManageComponent, RtseeTagGroupsManageComponent, RtseeTagManageComponent, RtseeTagsAccordionMenuComponent, SlideNumberChangedWidgetComponent, StoryDetailsOpenedWidgetComponent, StoryElementsSectionComponent, StoryReadingStartedWidgetComponent };
+export type { IAccordionItem, RTSeeTagForm, RTSeeTagGroupForm };

package/dist/ngx/src/lib/theme/auth/auth-container.scss

@@ -1,199 +1,163 @@
 @import "./variables";
-@import "../common-variables";
+
+// ═══════════════════════════════════════════════════════════════════
+// AUTH — Page shell & glass card (sign-in, sign-up, forgot / reset password)
+// Follows the messenger / presentation dark glass design language.
+// ═══════════════════════════════════════════════════════════════════
 
 .rtsee-auth {
+  position: relative;
   min-height: 100vh;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding: $rtsee-auth-page-padding;
+  box-sizing: border-box;
+  overflow: hidden;
+  background: $rtsee-auth-background;
+  color: var(--rts-text-primary);
+  font-family: $rtsu-font-family;
+
+  // soft accent glow behind the card (same as the presentation hero)
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: $rtsee-auth-glow;
+    pointer-events: none;
+  }
+
+  // ── PrimeNG tokens scoped to auth pages (PrimeNG runs in light mode app-wide) ──
+  --p-inputtext-background: var(--rts-bg-surface);
+  --p-inputtext-color: var(--rts-text-primary);
+  --p-inputtext-border-color: var(--rts-border-med);
+  --p-inputtext-hover-border-color: var(--rts-border-bright);
+  --p-inputtext-focus-border-color: var(--rts-accent, #{$rtsu-accent-purple});
+  --p-inputtext-invalid-border-color: var(--rts-danger, #{$rtsu-danger});
+  --p-inputtext-placeholder-color: var(--rts-text-muted);
+  --p-inputtext-border-radius: #{$rtsee-auth-input-radius};
+  --p-inputtext-padding-x: #{$rtsee-auth-input-padding-x};
+  --p-inputtext-padding-y: #{$rtsee-auth-input-padding-y};
+  --p-inputtext-shadow: none;
+  --p-inputtext-focus-ring-shadow: #{$rtsee-auth-focus-ring};
+
+  --p-floatlabel-color: var(--rts-text-muted);
+  --p-floatlabel-focus-color: var(--rts-accent-light, #{$rtsu-accent-purple-light});
+  --p-floatlabel-active-color: var(--rts-text-secondary);
+  --p-floatlabel-invalid-color: var(--rts-danger, #{$rtsu-danger});
+  --p-floatlabel-on-active-background: var(--rts-bg-surface);
+
+  --p-password-icon-color: var(--rts-text-muted);
+
+  --p-checkbox-background: var(--rts-bg-surface);
+  --p-checkbox-border-color: var(--rts-border-bright);
+  --p-checkbox-hover-border-color: var(--rts-accent-light, #{$rtsu-accent-purple-light});
+  --p-checkbox-checked-background: var(--rts-accent, #{$rtsu-accent-purple});
+  --p-checkbox-checked-border-color: var(--rts-accent, #{$rtsu-accent-purple});
+  --p-checkbox-checked-hover-background: var(--rts-accent-light, #{$rtsu-accent-purple-light});
+  --p-checkbox-checked-hover-border-color: var(--rts-accent-light, #{$rtsu-accent-purple-light});
+  --p-checkbox-icon-checked-color: #fff;
+  --p-checkbox-icon-checked-hover-color: #fff;
+  --p-checkbox-focus-ring-shadow: #{$rtsee-auth-focus-ring};
 
+  --p-message-error-simple-color: var(--rts-danger, #{$rtsu-danger});
+  --p-message-success-simple-color: var(--rts-success, #{$rtsu-success});
+
+  --p-progressspinner-color-one: var(--rts-accent-light, #{$rtsu-accent-purple-light});
+  --p-progressspinner-color-two: var(--rts-accent, #{$rtsu-accent-purple});
+  --p-progressspinner-color-three: var(--rts-accent-highlight, #{$rtsu-accent-highlight});
+  --p-progressspinner-color-four: var(--rts-accent-blue, #{$rtsu-accent-blue});
+
+  // ── Card ──
   .auth-container {
-    max-width: 420px;
+    position: relative;
+    width: 100%;
+    max-width: $rtsee-auth-card-max-width;
+    box-sizing: border-box;
+    padding: $rtsee-auth-card-padding;
+    border-radius: $rtsee-auth-card-radius;
+    box-shadow: $rtsee-auth-card-shadow;
+
+    // .rts-glass-card hover lift is too lively for a form, keep the border highlight only
+    &.rts-glass-card:hover {
+      box-shadow: $rtsee-auth-card-shadow, 0 6px 24px rgba(108, 92, 231, 0.08);
+    }
+  }
+
+  // ── Header (logo, title, description) ──
+  .auth-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-bottom: $rtsu-space-lg;
+  }
+
+  .auth-logo {
+    width: $rtsee-auth-logo-size;
+    height: $rtsee-auth-logo-size;
+    padding: 0; // $rtsee-auth-logo-padding;
+    box-sizing: border-box;
+    margin-bottom: $rtsu-space-md;
+    border-radius: $rtsu-radius-lg;
+    object-fit: contain;
+    background: var(--rts-accent-highlight-dim, #{$rtsu-accent-highlight-dim});
+    border: 1px solid var(--rts-border-med);
+    box-shadow: $rtsu-shadow-accent-sm;
+  }
+
+  .auth-title {
+    margin: 0 0 $rtsu-space-sm 0;
+    font-size: $rtsee-auth-title-size;
+    font-weight: $rtsu-font-weight-bold;
+    line-height: $rtsu-line-height-snug;
+    letter-spacing: $rtsu-tracking-tight;
+    color: var(--rts-text-primary);
+  }
+
+  .auth-title-description {
+    margin: 0;
+    font-size: $rtsee-auth-description-size;
+    line-height: $rtsu-line-height-normal;
+    color: var(--rts-text-secondary);
+  }
+
+  // ── Links ──
+  .auth-link {
+    color: var(--rts-accent-light, #{$rtsu-accent-purple-light});
+    font-weight: $rtsu-font-weight-semibold;
+    text-decoration: none;
+    transition: color $rtsu-transition-fast;
+
+    &:hover {
+      color: var(--rts-accent-highlight, #{$rtsu-accent-highlight});
+      text-decoration: underline;
+    }
+  }
+
+  // ── Footer ("Don't have an account? …") ──
+  .auth-footer {
+    margin: $rtsu-space-lg 0 0 0;
+    padding-top: $rtsu-space-md;
+    border-top: 1px solid var(--rts-border-dim);
+    text-align: center;
+    font-size: $rtsu-font-size-base;
+    color: var(--rts-text-secondary);
   }
 }
 
+@media (max-width: $rtsu-break-sm) {
+  .rtsee-auth {
+    padding: $rtsu-space-md $rtsu-space-sm;
 
+    .auth-container {
+      padding: $rtsee-auth-card-padding-mobile;
+    }
 
-//.auth-container {
-//  max-width: $max-width-container;
-//  margin: $btn-margin-top auto;
-//  padding: $rts-offset-md;
-//  background: linear-gradient(to bottom, $light-blue-gray 0%, $white 100%);
-//  border-radius: $rts-default-border-radius;
-//
-//  .auth-logo {
-//    width: $auth-logo-width;
-//    height: $auth-logo-height;
-//    border-radius: $rts-default-border-radius;
-//  }
-//
-//  .auth-title {
-//    margin-bottom: $auth-title-text-margin-bottom;
-//    font-size: $auth-title-text-font-size;
-//    font-weight: bold;
-//    color: $dark-blue-gray;
-//    text-shadow: $auth-title-text-shadow;
-//  }
-//
-//  .auth-title-description {
-//    margin: $auth-title-description-text-margin;
-//    font-size: $auth-title-description-text-font-size;
-//    color: $medium-blue-gray;
-//  }
-//
-//  .auth-form {
-//    padding: $rts-offset-md;
-//    display: flex;
-//    flex-direction: column;
-//    align-items: center;
-//    border-radius: $rts-default-border-radius;
-//    background-color: $white;
-//    box-shadow: $auth-form-box-shadow;
-//
-//    .auth-input-container {
-//      width: 100%;
-//      margin-bottom: $input-bottom-margin;
-//
-//      input {
-//        width: 100%;
-//        padding: $auth-form-input-padding;
-//        border: $auth-form-input-border;
-//        border-radius: $rts-default-border-radius;
-//        font-size: $auth-title-description-text-font-size;
-//
-//        &:focus {
-//          border-color: $dark-blue-gray;
-//          outline: none;
-//          box-shadow: $auth-form-input-focus-shadow;
-//        }
-//      }
-//    }
-//
-//    .auth-sm-medium {
-//      margin-bottom: $label-bottom-margin;
-//      font-size: $auth-sm-medium-font-side;
-//      color: $dark-blue-gray;
-//    }
-//
-//    .auth-options {
-//      display: flex;
-//      justify-content: space-between;
-//      width: 100%;
-//      align-items: center;
-//      margin: $auth-options-margin;
-//
-//      .auth-checkbox-label {
-//        display: flex;
-//        align-items: center;
-//
-//        .auth-remember-checkbox {
-//          margin-right: $auth-options-remember-check-box-margin;
-//          accent-color: $dark-blue-gray;
-//        }
-//
-//        label {
-//          font-size: $auth-sm-medium-font-side;
-//          color: $dark-blue-gray;
-//        }
-//      }
-//
-//      a {
-//        font-size: $auth-sm-medium-font-side;
-//        color: $deep-blue;
-//        text-decoration: none;
-//
-//        &:hover {
-//          text-decoration: underline;
-//        }
-//      }
-//    }
-//
-//    .auth-btn-container {
-//      width: 100%;
-//      padding: $auth-button-padding;
-//      text-align: center;
-//      font-size: $auth-button-font-size;
-//      background-color: $deep-blue;
-//      color: $white;
-//      border: none;
-//      border-radius: $auth-button-border-radius;
-//      cursor: pointer;
-//      transition: $auth-button-transition;
-//
-//      &:hover {
-//        background-color: darken($deep-blue, 10%);
-//      }
-//
-//      &:disabled {
-//        background-color: $medium-blue-gray;
-//        cursor: not-allowed;
-//        box-shadow: none;
-//        transform: none;
-//      }
-//    }
-//  }
-//
-//  .auth-media-blue-gray-sm-normal {
-//    margin-top: $auth-new-account-text-margin;
-//    font-size: $auth-new-account-text-font-size;
-//    color: $medium-blue-gray;
-//
-//    .auth-deep-blue-sm-medium {
-//      text-decoration: none;
-//      color: $deep-blue;
-//
-//      &:hover {
-//        text-decoration: underline;
-//        opacity: 0.8;
-//      }
-//    }
-//  }
-//}
-//
-///* Mobile Styles */
-//@media (max-width: 480px) {
-//  .auth-container {
-//    padding: $auth-container-mobile-padding;
-//
-//    .auth-form {
-//      padding: $auth-form-mobile-padding;
-//
-//      .auth-input-container {
-//        margin-bottom: $auth-input-container-mobile-margin;
-//
-//        input {
-//          padding: $auth-input-mobile-padding;
-//          font-size: $auth-mobile-font-size;
-//        }
-//      }
-//
-//      .auth-btn-container {
-//        padding: $auth-button-container-mobile-padding;
-//        font-size: $auth-mobile-font-size;
-//      }
-//
-//      .auth-options {
-//        flex-direction: column;
-//        align-items: flex-start;
-//
-//        .auth-checkbox-label {
-//          margin-bottom: $auth-check-box-label-mobile-margin;
-//        }
-//
-//        a {
-//          font-size: $auth-mobile-font-size;
-//        }
-//      }
-//    }
-//
-//    .auth-media-blue-gray-sm-normal {
-//      font-size: $auth-mobile-font-size;
-//
-//      .auth-deep-blue-sm-medium {
-//        font-size: $auth-mobile-font-size;
-//      }
-//    }
-//  }
-//}
+    .auth-title {
+      font-size: $rtsu-font-size-lg + 2px;
+    }
+  }
+}

package/dist/ngx/src/lib/theme/auth/auth-form.scss

@@ -0,0 +1,153 @@
+@import "./variables";
+
+// ═══════════════════════════════════════════════════════════════════
+// AUTH — Form internals (fields, options row, submit, messages)
+// Builds on top of .rtsee-form-container / .rtsee-form (theme/forms).
+// ═══════════════════════════════════════════════════════════════════
+
+.rtsee-auth {
+  .auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: $rtsee-auth-field-gap;
+
+    // spacing is handled by the gap above
+    // (compound .rtsee-form to win over theme/forms, which is imported after auth)
+    &.rtsee-form .rtsee-form-field-container,
+    &.rtsee-form .rtsee-form-field-container.rtsee-autocomplete {
+      margin-bottom: 0;
+    }
+
+    // inputs (incl. p-password's inner input) stretch to the card width
+    .p-inputgroup,
+    .p-floatlabel,
+    .p-password,
+    .p-password-input,
+    .p-inputtext {
+      width: 100%;
+    }
+
+    .p-inputtext {
+      font-family: $rtsu-font-family;
+      font-size: $rtsu-font-size-base + 1px;
+      transition: border-color $rtsu-transition-fast,
+                  box-shadow $rtsu-transition-fast,
+                  background-color $rtsu-transition-fast;
+
+      &:enabled:focus {
+        background-color: var(--rts-bg-surface-elevated);
+      }
+    }
+
+    .rtsee-form-field-error-message {
+      padding: $rtsu-space-xs $rtsu-space-xs 0 $rtsu-space-xs;
+    }
+  }
+
+  // ── Remember me / forgot password / terms ──
+  .auth-options {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: $rtsu-space-sm;
+    font-size: $rtsu-font-size-sm + 1px;
+  }
+
+  .auth-checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: $rtsu-space-sm;
+  }
+
+  .auth-checkbox-label {
+    color: var(--rts-text-secondary);
+    cursor: pointer;
+    user-select: none;
+    line-height: $rtsu-line-height-snug;
+  }
+
+  // ── Form-level feedback (server errors / success) ──
+  .rtsee-form-error-message,
+  .rtsee-form-success-message {
+    .p-message {
+      padding: $rtsu-space-sm $rtsu-space-md;
+      border-radius: $rtsu-radius-sm;
+      outline: none;
+    }
+  }
+
+  .rtsee-form-error-message .p-message {
+    background: var(--rts-danger-bg, #{$rtsu-danger-bg});
+    border: 1px solid var(--rts-danger-border, #{$rtsu-danger-border});
+  }
+
+  .rtsee-form-success-message .p-message {
+    background: rgba(46, 204, 113, 0.06);
+    border: 1px solid rgba(46, 204, 113, 0.2);
+  }
+
+  // ── Submit ──
+  .rtsee-form-submit-container {
+    position: relative;
+    margin-top: $rtsu-space-xs;
+
+    p-button,
+    .p-button {
+      width: 100%;
+    }
+
+    .p-button {
+      justify-content: center;
+      padding: $rtsee-auth-submit-padding;
+      border: none;
+      border-radius: $rtsee-auth-submit-radius;
+      background: $rtsee-auth-submit-background;
+      color: #fff;
+      font-family: $rtsu-font-family;
+      font-size: $rtsu-font-size-md;
+      font-weight: $rtsu-font-weight-bold;
+      letter-spacing: $rtsu-tracking-wide;
+      box-shadow: $rtsu-shadow-accent-md;
+      transition: transform $rtsu-transition-base,
+                  box-shadow $rtsu-transition-base,
+                  opacity $rtsu-transition-base;
+
+      &:enabled:hover {
+        background: $rtsee-auth-submit-background;
+        color: #fff;
+        transform: translateY(-1px);
+        box-shadow: $rtsu-shadow-accent-lg;
+      }
+
+      &:enabled:active {
+        transform: translateY(0);
+      }
+
+      &:focus-visible {
+        outline: none;
+        box-shadow: $rtsu-shadow-accent-md, $rtsee-auth-focus-ring;
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        box-shadow: none;
+      }
+    }
+
+    // spinner sits inside the button's right edge instead of pushing it
+    .rtsee-progress-spinner {
+      position: absolute;
+      right: $rtsu-space-md;
+      top: 50%;
+      margin: 0;
+      transform: translateY(-50%);
+      pointer-events: none;
+
+      &.rtsee-progress-spinner-sm {
+        width: $rtsu-space-lg;
+        height: $rtsu-space-lg;
+      }
+    }
+  }
+}

package/dist/ngx/src/lib/theme/auth/index.scss

@@ -1 +1,3 @@
 @import "./auth-container";
+@import "./auth-form";
+@import "./privacy-policy";