@team-codeme/crud-forge 0.0.0-stage → 1.0.1

package/src/templates/angular/iam/shared/screen-navigation-map.ts.ejs

@@ -0,0 +1,187 @@
+/**
+ * Page ↔ embedded-screen hierarchy helpers.
+ *
+ * Source of truth at runtime: `public/assets/screen-navigation-map.json (served as assets/...)`
+ * regenerated by access-control-tools (`lib/hierarchy-scanner.js` via `npm run access-control:sync`).
+ * Do not hardcode module-specific page trees here.
+ */
+
+export interface EmbeddedScreenRef {
+    screenId: string;
+    title: string;
+    /** Primary working surface on the page (e.g. main form). */
+    isPrimary?: boolean;
+}
+
+export interface PageNavigationEntry {
+    domain: string;
+    navTitle: string;
+    route: string;
+    /** Primary host SCREEN id used in the page component. */
+    hostScreenId: string;
+    /** Legacy / alternate host ids that should resolve to the same page group. */
+    hostScreenAliases?: string[];
+    embeddedScreens: EmbeddedScreenRef[];
+}
+
+export interface ScreenNavigationMapFile {
+    version?: number;
+    generatedAt?: string;
+    pages: PageNavigationEntry[];
+    unresolved?: Array<{
+        hostScreenId?: string | null;
+        selector: string;
+        reason: string;
+        file?: string | null;
+    }>;
+    stats?: Record<string, number>;
+}
+
+/** Empty until assets JSON is loaded (or sync has not been run yet). */
+export const EMPTY_SCREEN_NAVIGATION_MAP: readonly PageNavigationEntry[] = [];
+
+/** Component ids that must stay explicit — never auto-granted with screen / page essentials. */
+const SENSITIVE_COMPONENT_ID_RE =
+    /(?:^|-)(delete|remove|approve|finalize|reject|revoke)(?:-|$)/i;
+
+export function isSensitiveComponentId(componentId: string | null | undefined): boolean {
+    const id = String(componentId || '').trim().toLowerCase();
+    if (!id) {
+        return false;
+    }
+    return SENSITIVE_COMPONENT_ID_RE.test(id);
+}
+
+export function filterEssentialComponentIds(componentIds: string[]): string[] {
+    return componentIds.filter((id) => id && !isSensitiveComponentId(id));
+}
+
+function hostIdSet(entry: PageNavigationEntry): Set<string> {
+    return new Set(
+        [entry.hostScreenId, ...(entry.hostScreenAliases || [])]
+            .map((id) => String(id || '').trim().toLowerCase())
+            .filter(Boolean)
+    );
+}
+
+export function normalizeNavigationPages(
+    pages: PageNavigationEntry[] | null | undefined
+): PageNavigationEntry[] {
+    if (!Array.isArray(pages)) {
+        return [];
+    }
+    return pages
+        .filter((page) => page && page.hostScreenId)
+        .map((page) => ({
+            domain: page.domain || 'Application',
+            navTitle: page.navTitle || page.hostScreenId,
+            route: page.route || '',
+            hostScreenId: String(page.hostScreenId),
+            hostScreenAliases: Array.isArray(page.hostScreenAliases)
+                ? page.hostScreenAliases.map(String)
+                : [],
+            embeddedScreens: Array.isArray(page.embeddedScreens)
+                ? page.embeddedScreens
+                      .filter((e) => e?.screenId)
+                      .map((e) => ({
+                          screenId: String(e.screenId),
+                          title: e.title || String(e.screenId),
+                          isPrimary: Boolean(e.isPrimary),
+                      }))
+                : [],
+        }));
+}
+
+/** Embedded screenId → host screen ids that embed it (may be multiple routes). */
+export function buildEmbeddedScreenParentMap(
+    map: readonly PageNavigationEntry[] = EMPTY_SCREEN_NAVIGATION_MAP
+): Record<string, string[]> {
+    const result: Record<string, string[]> = {};
+    map.forEach((entry) => {
+        entry.embeddedScreens.forEach((embedded) => {
+            const child = String(embedded.screenId || '').trim().toLowerCase();
+            if (!child) {
+                return;
+            }
+            const parents = result[child] || [];
+            const host = String(entry.hostScreenId || '').trim().toLowerCase();
+            if (host && !parents.includes(host)) {
+                parents.push(host);
+            }
+            (entry.hostScreenAliases || []).forEach((alias) => {
+                const a = String(alias || '').trim().toLowerCase();
+                if (a && !parents.includes(a)) {
+                    parents.push(a);
+                }
+            });
+            result[child] = parents;
+        });
+    });
+    return result;
+}
+
+/** Host screenId (or alias) → embedded child screen ids. */
+export function buildHostEmbeddedChildrenMap(
+    map: readonly PageNavigationEntry[] = EMPTY_SCREEN_NAVIGATION_MAP
+): Record<string, string[]> {
+    const result: Record<string, string[]> = {};
+    map.forEach((entry) => {
+        const children = entry.embeddedScreens
+            .map((e) => String(e.screenId || '').trim().toLowerCase())
+            .filter(Boolean);
+        hostIdSet(entry).forEach((host) => {
+            const existing = result[host] || [];
+            children.forEach((child) => {
+                if (!existing.includes(child)) {
+                    existing.push(child);
+                }
+            });
+            result[host] = existing;
+        });
+    });
+    return result;
+}
+
+export function getParentHostScreenIds(
+    embeddedScreenId: string,
+    map: readonly PageNavigationEntry[] = EMPTY_SCREEN_NAVIGATION_MAP
+): string[] {
+    const key = String(embeddedScreenId || '').trim().toLowerCase();
+    return buildEmbeddedScreenParentMap(map)[key] || [];
+}
+
+export function getEmbeddedChildScreenIds(
+    hostScreenId: string,
+    map: readonly PageNavigationEntry[] = EMPTY_SCREEN_NAVIGATION_MAP
+): string[] {
+    const key = String(hostScreenId || '').trim().toLowerCase();
+    return buildHostEmbeddedChildrenMap(map)[key] || [];
+}
+
+export function findPageNavigationEntry(
+    screenId: string,
+    map: readonly PageNavigationEntry[] = EMPTY_SCREEN_NAVIGATION_MAP
+): PageNavigationEntry | undefined {
+    const key = String(screenId || '').trim().toLowerCase();
+    if (!key) {
+        return undefined;
+    }
+    return map.find((entry) => hostIdSet(entry).has(key));
+}
+
+/** All screen ids claimed by the navigation map (hosts + embeds) for flat-list exclusion. */
+export function getMappedScreenIds(
+    map: readonly PageNavigationEntry[] = EMPTY_SCREEN_NAVIGATION_MAP
+): Set<string> {
+    const ids = new Set<string>();
+    map.forEach((entry) => {
+        hostIdSet(entry).forEach((id) => ids.add(id));
+        entry.embeddedScreens.forEach((embedded) => {
+            const child = String(embedded.screenId || '').trim().toLowerCase();
+            if (child) {
+                ids.add(child);
+            }
+        });
+    });
+    return ids;
+}

package/src/templates/angular/iam/shared/screen-navigation.registry.ts.ejs

@@ -0,0 +1,64 @@
+import { Injectable, inject, signal, computed } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { catchError, of } from 'rxjs';
+import {
+    PageNavigationEntry,
+    ScreenNavigationMapFile,
+    buildEmbeddedScreenParentMap,
+    buildHostEmbeddedChildrenMap,
+    normalizeNavigationPages,
+} from './screen-navigation-map';
+
+/**
+ * Loads generated `assets/screen-navigation-map.json` (from access-control sync).
+ * Matrix + AccessControlService read host/embed relationships from here — not hardcoding.
+ */
+@Injectable({ providedIn: 'root' })
+export class ScreenNavigationRegistry {
+    private readonly http = inject(HttpClient);
+
+    private readonly pagesSignal = signal<PageNavigationEntry[]>([]);
+    private readonly loadedSignal = signal(false);
+    private readonly loadErrorSignal = signal<string | null>(null);
+
+    readonly pages = this.pagesSignal.asReadonly();
+    readonly isLoaded = this.loadedSignal.asReadonly();
+    readonly loadError = this.loadErrorSignal.asReadonly();
+
+    readonly parentByChild = computed(() => buildEmbeddedScreenParentMap(this.pagesSignal()));
+    readonly childrenByHost = computed(() => buildHostEmbeddedChildrenMap(this.pagesSignal()));
+
+    constructor() {
+        this.reload();
+    }
+
+    reload(): void {
+        this.http
+            .get<ScreenNavigationMapFile>('assets/screen-navigation-map.json')
+            .pipe(
+                catchError((err) => {
+                    console.warn(
+                        '[ScreenNavigationRegistry] Failed to load screen-navigation-map.json — matrix stays flat until sync generates it.',
+                        err
+                    );
+                    this.loadErrorSignal.set(String(err?.message || err || 'load failed'));
+                    this.loadedSignal.set(true);
+                    return of({ pages: [] } as ScreenNavigationMapFile);
+                })
+            )
+            .subscribe((file) => {
+                this.pagesSignal.set(normalizeNavigationPages(file?.pages));
+                this.loadedSignal.set(true);
+            });
+    }
+
+    getParentHostScreenIds(embeddedScreenId: string): string[] {
+        const key = String(embeddedScreenId || '').trim().toLowerCase();
+        return this.parentByChild()[key] || [];
+    }
+
+    getEmbeddedChildScreenIds(hostScreenId: string): string[] {
+        const key = String(hostScreenId || '').trim().toLowerCase();
+        return this.childrenByHost()[key] || [];
+    }
+}

package/src/templates/angular/iam/shared/text-highlight.pipe.ts.ejs

@@ -0,0 +1,39 @@
+import { Pipe, PipeTransform, inject } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+@Pipe({
+  name: 'textHighlight',
+  standalone: true,
+})
+export class TextHighlightPipe implements PipeTransform {
+  private readonly sanitizer = inject(DomSanitizer);
+
+  transform(
+    value: string | number | null | undefined,
+    query: string | null | undefined,
+    highlightClass = 'bg-amber-200 font-semibold rounded-sm px-0.5'
+  ): SafeHtml | string {
+    const text = value == null ? '' : String(value);
+    const needle = String(query || '').trim();
+    if (!text || !needle) {
+      return text;
+    }
+    const escapedText = escapeHtml(text);
+    const regex = new RegExp(`(${escapeRegExp(needle)})`, 'gi');
+    const highlighted = escapedText.replace(regex, (match) => `<span class="${highlightClass}">${match}</span>`);
+    return this.sanitizer.bypassSecurityTrustHtml(highlighted);
+  }
+}

package/src/templates/angular/iam/user-access-matrix.component.html.ejs

@@ -0,0 +1,212 @@
+<div class="flex min-h-0 flex-auto flex-col overflow-hidden min-w-0">
+    <!-- Header -->
+    <div class="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 border-b bg-card dark:bg-transparent">
+        <div class="flex-1 min-w-0">
+            <!-- Breadcrumbs -->
+            <div class="flex items-center gap-x-2 text-xs font-semibold uppercase tracking-wider text-slate-500">
+                <a *ngIf="SCREEN | accessCtrl: 'admin-user-management'" id="qa-access-matrix__admin-user-management" data-qa-id="qa-access-matrix__admin-user-management" data-component-id="admin-user-management" data-screen-id="access-matrix" routerLink="/admin/user-management" class="hover:underline text-primary-600 dark:text-primary-400">Users</a>
+                <span class="text-slate-400">/</span>
+                <span>User Access Matrix</span>
+            </div>
+            <!-- Title -->
+            <div class="mt-2 text-3xl font-extrabold tracking-tight leading-none text-slate-900 dark:text-white flex items-center gap-x-3">
+                <span>Access Matrix:</span>
+                @if (user()) {
+                    <span class="text-primary-700 dark:text-primary-400 font-semibold">{{ user()?.firstName }} {{ user()?.lastName }}</span>
+                } @else {
+                    <span class="text-slate-400 font-normal">Loading User...</span>
+                }
+            </div>
+        </div>
+        <!-- Actions -->
+        <div class="flex shrink-0 items-center gap-4 mt-6 sm:mt-0">
+            <a *ngIf="SCREEN | accessCtrl: 'admin-user-management-2'" id="qa-access-matrix__admin-user-management-2" data-qa-id="qa-access-matrix__admin-user-management-2" data-component-id="admin-user-management-2" data-screen-id="access-matrix" routerLink="/admin/user-management" 
+               class="inline-flex items-center justify-center px-4 py-2 border border-slate-300 rounded-xl bg-white text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none transition dark:bg-slate-800 dark:text-slate-200 dark:border-slate-700 dark:hover:bg-slate-700">
+                <mat-icon class="mr-2 text-slate-500 dark:text-slate-400" svgIcon="arrow-left"></mat-icon>
+                <span>Back to Users</span>
+            </a>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    @if (isLoading()) {
+        <div class="flex flex-auto flex-col items-center justify-center p-8 min-h-0">
+            <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary-600"></div>
+            <div class="mt-4 text-sm font-medium text-slate-500">Loading user profile & roles mapping...</div>
+        </div>
+    } @else {
+        <div class="min-h-0 flex-auto overflow-y-auto p-6 sm:p-10">
+            <!-- User summary banner -->
+            @if (user()) {
+                <div class="bg-card rounded-2xl border shadow-sm p-6 mb-8 flex flex-col md:flex-row md:items-center justify-between gap-6 dark:bg-slate-900/50">
+                    <div class="flex items-center gap-4">
+                        <div class="size-14 rounded-full bg-primary-50 dark:bg-primary-950/20 border border-primary-100 dark:border-primary-900/40 text-primary-700 dark:text-primary-400 flex items-center justify-center text-xl font-bold uppercase">
+                            {{ user()?.firstName?.substring(0,1) }}{{ user()?.lastName?.substring(0,1) }}
+                        </div>
+                        <div>
+                            <div class="text-xl font-bold text-slate-900 dark:text-white">
+                                {{ user()?.firstName }} {{ user()?.lastName }}
+                            </div>
+                            <div class="text-sm text-slate-500 flex items-center gap-x-2 mt-0.5">
+                                <span>&#64;{{ user()?.username }}</span>
+                                <span class="text-slate-300 dark:text-slate-700">•</span>
+                                <span>{{ user()?.email || 'No Email' }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-x-3">
+                        <span class="text-xs font-semibold uppercase tracking-wider text-slate-400">Account Status</span>
+                        <span class="inline-flex items-center gap-x-1.5 px-3 py-1 rounded-full text-xs font-semibold"
+                              [class.bg-primary-100]="user()?.enabled" [class.text-primary-800]="user()?.enabled"
+                              [class.bg-red-100]="!user()?.enabled" [class.text-red-800]="!user()?.enabled">
+                            <span class="size-1.5 rounded-full" [class.bg-primary-600]="user()?.enabled" [class.bg-red-600]="!user()?.enabled"></span>
+                            <span>{{ user()?.enabled ? 'Active' : 'Disabled' }}</span>
+                        </span>
+                    </div>
+                </div>
+            }
+
+            <div class="w-full">
+                <!-- Roles Toggles Card -->
+                <div class="bg-card rounded-2xl border shadow-sm overflow-hidden dark:bg-slate-900/50 flex flex-col">
+                    <div class="px-6 py-5 border-b flex flex-col md:flex-row md:items-center justify-between gap-4">
+                        <div>
+                            <div class="text-lg font-bold text-slate-900 dark:text-white">Identity Role Mapping</div>
+                        </div>
+
+                        <!-- Role Search Feature -->
+                        <div class="flex items-center gap-4 flex-1 max-w-md">
+                            <div class="relative w-full">
+                                <mat-icon svgIcon="search" class="absolute left-3 top-1/2 -translate-y-1/2 !w-4 !h-4 text-slate-400"></mat-icon>
+                                <input
+                                    type="text"
+                                    [value]="searchTerm()"
+                                    (input)="onSearchInput($event)"
+                                    placeholder="Search roles by name or description..."
+                                    class="w-full rounded-xl border border-slate-200 bg-slate-50/80 py-2 pl-9 pr-9 text-xs font-medium text-slate-900 placeholder:text-slate-400 focus:border-primary-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500/20 dark:border-slate-800 dark:bg-slate-900/60 dark:text-white dark:focus:border-primary-500 dark:focus:bg-slate-950"
+                                />
+                                @if (searchTerm()) {
+                                    <button id="qa-access-matrix__clear-search" data-qa-id="qa-access-matrix__clear-search" data-component-id="clear-search" data-screen-id="access-matrix" *ngIf="SCREEN | accessCtrl: 'clear-search'"
+                                        type="button"
+                                        (click)="clearSearch()"
+                                        title="Clear role search"
+                                        class="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 flex items-center justify-center">
+                                        <mat-icon svgIcon="x" class="!w-4 !h-4"></mat-icon>
+                                    </button>
+                                }
+                            </div>
+                        </div>
+
+                        <div class="flex flex-wrap items-center gap-2">
+                            <span class="rounded-full bg-primary-100 px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-primary-800 dark:bg-primary-500/15 dark:text-primary-300">
+                                {{ assignedRoleCount() }} Assigned
+                            </span>
+                            <span class="rounded-full bg-slate-100 px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-slate-600 dark:bg-slate-800 dark:text-slate-300">
+                                {{ allRoles().length }} Roles
+                            </span>
+                        </div>
+                    </div>
+
+                    <div class="p-6">
+                        @if (filteredAssignedRoleList().length) {
+                            <div class="mb-8">
+                                <div class="mb-4">
+                                    <div class="text-sm font-bold text-primary-800 dark:text-primary-300">Assigned Roles</div>
+                                </div>
+                                <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+                                    @for (role of filteredAssignedRoleList(); track role.name) {
+                                        <ng-container *ngTemplateOutlet="roleCard; context: { $implicit: role, assigned: true }"></ng-container>
+                                    }
+                                </div>
+                            </div>
+                        }
+
+                        @if (filteredUnassignedRoleList().length) {
+                            <div>
+                                <div class="mb-4 flex items-center gap-2">
+                                    <div class="text-sm font-bold text-slate-800 dark:text-slate-200">Available Roles</div>
+                                    <span class="text-xs text-slate-500">{{ filteredUnassignedRoleList().length }} remaining</span>
+                                </div>
+                                <div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+                                    @for (role of filteredUnassignedRoleList(); track role.name) {
+                                        <ng-container *ngTemplateOutlet="roleCard; context: { $implicit: role, assigned: false }"></ng-container>
+                                    }
+                                </div>
+                            </div>
+                        }
+
+                        @if (searchTerm() && filteredAssignedRoleList().length === 0 && filteredUnassignedRoleList().length === 0) {
+                            <div class="text-center p-8 text-slate-500">
+                                No roles matching "<span class="font-semibold text-slate-800 dark:text-slate-200">{{ searchTerm() }}</span>"
+                            </div>
+                        }
+
+                        <ng-template #roleCard let-role let-assigned="assigned">
+                            <div
+                                class="flex h-full flex-col justify-between rounded-xl border p-4 transition duration-150"
+                                [class.border-primary-200]="assigned"
+                                [class.bg-primary-50/40]="assigned"
+                                [class.dark:border-primary-900/40]="assigned"
+                                [class.dark:bg-primary-950/10]="assigned"
+                                [class.border-slate-100]="!assigned"
+                                [class.hover:bg-slate-50/50]="!assigned"
+                                [class.dark:border-slate-800/80]="!assigned"
+                                [class.dark:hover:bg-slate-800/10]="!assigned"
+                            >
+                                <div class="min-w-0 flex-1">
+                                    <div class="font-bold text-slate-800 dark:text-slate-200 flex flex-wrap items-center gap-x-2 gap-y-1">
+                                        <span class="break-all" [innerHTML]="formatRoleName(role.name) | textHighlight: searchTerm(): 'bg-amber-300 font-bold text-slate-900 px-1 rounded-sm'"></span>
+                                        @if (assigned) {
+                                            <span class="text-[10px] font-bold uppercase tracking-wider text-primary-700 bg-primary-50 dark:bg-primary-950/20 dark:text-primary-400 border border-primary-100 dark:border-primary-900/40 px-2 py-0.5 rounded-md">
+                                                Assigned
+                                            </span>
+                                        }
+                                    </div>
+                                    <div class="text-xs text-slate-500 mt-2 line-clamp-3" [innerHTML]="(role.description || 'No role description.') | textHighlight: searchTerm(): 'bg-amber-300 font-bold text-slate-900 px-1 rounded-sm'"></div>
+                                </div>
+
+                                <div class="mt-4 flex items-center justify-between border-t pt-3"
+                                     [class.border-primary-100]="assigned"
+                                     [class.dark:border-primary-900/30]="assigned"
+                                     [class.border-slate-100]="!assigned"
+                                     [class.dark:border-slate-800/80]="!assigned">
+                                    <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Grant Access</span>
+                                    <div class="flex items-center gap-2">
+                                        @if (isProcessingRole()[role.name || '']) {
+                                            <div class="animate-spin rounded-full h-5 w-5 border-t-2 border-primary-600"></div>
+                                        }
+                                        <div id="qa-access-matrix__request-role-toggle" data-qa-id="qa-access-matrix__request-role-toggle" data-component-id="request-role-toggle" data-screen-id="access-matrix" *ngIf="SCREEN | accessCtrl: 'request-role-toggle'"
+                                            class="role-access-toggle-trigger"
+                                            [class.role-access-toggle-trigger--disabled]="isRoleToggleDisabled(role.name || '')"
+                                            role="button"
+                                            tabindex="0"
+                                            title="Toggle role access"
+                                            [attr.aria-label]="isAssigned(role.name || '') ? 'Revoke role access' : 'Grant role access'"
+                                            [attr.title]="isAssigned(role.name || '') ? 'Revoke role access' : 'Grant role access'"
+                                            (click)="requestRoleToggle(role.name || '')"
+                                            (keydown.enter)="requestRoleToggle(role.name || '')"
+                                            (keydown.space)="$event.preventDefault(); requestRoleToggle(role.name || '')">
+                                            <mat-slide-toggle id="qa-mat-slide-toggle-user-access-matrix-btn" data-qa-id="qa-mat-slide-toggle-user-access-matrix-btn" data-component-id="mat-slide-toggle-user-access-matrix-btn" data-screen-id="user-access-matrix"
+                                                class="role-access-toggle-display"
+                                                [checked]="isAssigned(role.name || '')"
+                                                [disabled]="isRoleToggleDisabled(role.name || '')"
+                                                tabindex="-1"
+                                                color="primary">
+                                            </mat-slide-toggle>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </ng-template>
+
+                        @if (allRoles().length === 0) {
+                            <div class="text-center p-8 text-slate-500">
+                                No realm roles found in Keycloak. Go to "Role Management" to create some.
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
+</div>

package/src/templates/angular/iam/user-access-matrix.component.scss.ejs

@@ -0,0 +1,34 @@
+/* SCSS styles for User Access Matrix Component */
+:host {
+    display: flex;
+    flex: 1 1 auto;
+    width: 100%;
+}
+
+.mat-mdc-slide-toggle {
+    --mdc-switch-selected-handle-color: var(--theme-color-primary-600);
+    --mdc-switch-selected-track-color: var(--theme-color-primary-200);
+    --mdc-switch-unselected-handle-color: #f1f5f9;
+    --mdc-switch-unselected-track-color: #cbd5e1;
+}
+
+.role-access-toggle-trigger {
+    display: inline-flex;
+    cursor: pointer;
+    border-radius: 9999px;
+    outline: none;
+}
+
+.role-access-toggle-trigger:focus-visible {
+    box-shadow: 0 0 0 2px var(--theme-color-primary-500);
+}
+
+.role-access-toggle-trigger--disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.role-access-toggle-display {
+    pointer-events: none;
+}