@idp.global/catalog 2.2.0 → 3.1.0

package/dist_ts_web/elements/index.d.ts

@@ -22,6 +22,7 @@ export * from './idp-signed-in-pill.js';
 export * from './idp-app-pair.js';
 export * from './idp-auth-card.js';
 export * from './idp-consent-card.js';
+export * from './idp-invite-card.js';
 export * from './idp-approval-card.js';
 export * from './idp-mobile-frame.js';
 export * from './idp-inbox-preview.js';
@@ -34,3 +35,5 @@ export * from './idp-admin-shell.js';
 export * from './idp-landing-hero.js';
 export * from './idp-landing-page.js';
 export * from './idp-mobile-showcase.js';
+export * from './idp-sso-connection-form.js';
+export * from './idp-scim-token-panel.js';

package/dist_ts_web/elements/index.js

@@ -22,6 +22,7 @@ export * from './idp-signed-in-pill.js';
 export * from './idp-app-pair.js';
 export * from './idp-auth-card.js';
 export * from './idp-consent-card.js';
+export * from './idp-invite-card.js';
 export * from './idp-approval-card.js';
 export * from './idp-mobile-frame.js';
 export * from './idp-inbox-preview.js';
@@ -34,4 +35,6 @@ export * from './idp-admin-shell.js';
 export * from './idp-landing-hero.js';
 export * from './idp-landing-page.js';
 export * from './idp-mobile-showcase.js';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsa0JBQWtCLENBQUM7QUFDakMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHdCQUF3QixDQUFDO0FBQ3ZDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLDBCQUEwQixDQUFDIn0=
+export * from './idp-sso-connection-form.js';
+export * from './idp-scim-token-panel.js';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi90c193ZWIvZWxlbWVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGdCQUFnQixDQUFDO0FBQy9CLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsaUNBQWlDLENBQUM7QUFDaEQsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsa0JBQWtCLENBQUM7QUFDakMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsZ0JBQWdCLENBQUM7QUFDL0IsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsd0JBQXdCLENBQUM7QUFDdkMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyx3QkFBd0IsQ0FBQztBQUN2QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyw4QkFBOEIsQ0FBQztBQUM3QyxjQUFjLDJCQUEyQixDQUFDIn0=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idp.global/catalog",
-  "version": "2.2.0",
+  "version": "3.1.0",
   "private": false,
   "description": "Web component catalog for idp.global, based on the v5 Apple-system design language.",
   "exports": {

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@idp.global/catalog',
-  version: '2.2.0',
+  version: '3.1.0',
   description: 'Web component catalog for idp.global, based on the v5 Apple-system design language.'
 }

package/ts_web/elements/idp-admin-shell.ts

@@ -8,8 +8,12 @@ import './idp-toggle.js';
 import './idp-delegation-section.js';
 import './idp-admin-sidebar.js';
 import './idp-admin-overview.js';
+import './idp-sso-connection-form.js';
+import './idp-scim-token-panel.js';
 import { idpAdminSharedStyles, renderAdminKpi, renderAdminStateCard, formatAdminTimeAgo, type TIdpAdminKpi } from './idp-admin-shared.js';
 import type { IIdpDelegation, IIdpDelegationApp } from './idp-delegation-section.js';
+import type { IIdpSsoConnectionItem, IIdpSsoSpDetails } from './idp-sso-connection-form.js';
+import type { IIdpScimTokenItem } from './idp-scim-token-panel.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -27,6 +31,7 @@ export type TIdpAdminPage =
   | 'org-settings'
   | 'org-members'
   | 'org-apps'
+  | 'org-sso'
   | 'support'
   | 'ga-users'
   | 'ga-orgs'
@@ -89,6 +94,12 @@ export interface IIdpAdminGaUserActionEventDetail {
   action: 'suspend' | 'unsuspend';
 }
 
+export interface IIdpAdminProfileUpdateEventDetail {
+  name: string;
+  username: string;
+  mobileNumber: string;
+}
+
 export interface IIdpAdminGaOrgActionEventDetail {
   orgId: string;
   action: 'suspend' | 'unsuspend';
@@ -826,13 +837,88 @@ export class IdpAdminShell extends DeesElement {
       .mapping-row .form-label {
         margin-bottom: 4px;
       }
+      .mobile-topbar {
+        display: none;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 14px;
+        border-bottom: 1px solid var(--sh-border);
+        background: var(--sh-card);
+        position: sticky;
+        top: 0;
+        z-index: 40;
+      }
+      .mobile-topbar-title {
+        font-size: 13px;
+        font-weight: 650;
+        letter-spacing: -0.01em;
+      }
+      .mobile-nav-toggle,
+      .mobile-drawer-close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 34px;
+        height: 34px;
+        border: 1px solid var(--sh-border);
+        border-radius: 9px;
+        background: var(--sh-card);
+        color: var(--sh-fg);
+        cursor: pointer;
+      }
+      .mobile-nav-toggle:focus-visible,
+      .mobile-drawer-close:focus-visible {
+        outline: 2px solid var(--sh-accent);
+        outline-offset: 2px;
+      }
+      .mobile-drawer-backdrop {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.42);
+        z-index: 60;
+      }
+      .mobile-drawer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: min(300px, 86vw);
+        background: var(--sh-card);
+        border-right: 1px solid var(--sh-border);
+        z-index: 61;
+        overflow-y: auto;
+        animation: drawer-in 0.18s ease-out;
+      }
+      .mobile-drawer idp-admin-sidebar {
+        display: block;
+      }
+      .mobile-drawer-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 62;
+      }
+      @keyframes drawer-in {
+        from {
+          transform: translateX(-24px);
+          opacity: 0;
+        }
+        to {
+          transform: translateX(0);
+          opacity: 1;
+        }
+      }
       @media (max-width: 1120px) {
         .shell {
           grid-template-columns: 1fr;
+          grid-template-rows: auto 1fr;
         }
-        idp-admin-sidebar {
+        .shell > idp-admin-sidebar {
           display: none;
         }
+        .mobile-topbar {
+          display: flex;
+        }
       }
       @media (max-width: 720px) {
         .mapping-row {
@@ -917,6 +1003,18 @@ export class IdpAdminShell extends DeesElement {
   @property({ type: Array })
   public accessor gaUsers: IIdpAdminGaUser[] = [];
 
+  @property({ type: Array })
+  public accessor ssoConnections: IIdpSsoConnectionItem[] = [];
+
+  @property({ type: Object })
+  public accessor ssoSpDetails: IIdpSsoSpDetails | null = null;
+
+  @property({ type: Array })
+  public accessor scimTokens: IIdpScimTokenItem[] = [];
+
+  @property({ type: Object })
+  public accessor scimCreatedToken: { label: string; plaintextToken: string } | null = null;
+
   @property({ type: Object })
   public accessor overviewData: IIdpAdminOverviewData | null = null;
 
@@ -926,6 +1024,20 @@ export class IdpAdminShell extends DeesElement {
   @property({ type: Array })
   public accessor delegations: IIdpDelegation[] = [];
 
+  /** enables editing of name/username/mobile on the profile page */
+  @property({ type: Boolean })
+  public accessor profileEditable = false;
+
+  /** host sets this while a profile update request is in flight */
+  @property({ type: Boolean })
+  public accessor profileSaving = false;
+
+  @state()
+  private accessor profileDraft: { name: string; username: string; mobileNumber: string } | null = null;
+
+  @state()
+  private accessor mobileNavOpen = false;
+
   @state()
   private accessor logoutEverywhere = false;
 
@@ -1319,6 +1431,22 @@ export class IdpAdminShell extends DeesElement {
     await super.disconnectedCallback();
   }
 
+  protected override willUpdate(changedProperties: Map<PropertyKey, unknown>) {
+    super.willUpdate(changedProperties);
+    // a refreshed user means the host persisted (or reloaded) the profile
+    if (changedProperties.has('user')) {
+      this.profileDraft = null;
+    }
+  }
+
+  protected override updated(changedProperties: Map<PropertyKey, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('mobileNavOpen') && this.mobileNavOpen) {
+      const closeButton = this.shadowRoot?.querySelector('.mobile-drawer-close') as HTMLElement | null;
+      closeButton?.focus();
+    }
+  }
+
   private dispatchShellEvent<TDetail>(eventNameArg: string, detailArg: TDetail) {
     this.dispatchEvent(new CustomEvent<TDetail>(eventNameArg, {
       detail: detailArg,
@@ -1761,18 +1889,54 @@ export class IdpAdminShell extends DeesElement {
     `;
   }
 
+  private getProfileDraft() {
+    return (
+      this.profileDraft || {
+        name: this.user?.name || '',
+        username: this.user?.username || this.user?.email?.split('@')[0] || '',
+        mobileNumber: this.user?.mobileNumber || '',
+      }
+    );
+  }
+
+  private setProfileDraftField(fieldArg: 'name' | 'username' | 'mobileNumber', eventArg: Event) {
+    const value = (eventArg.target as HTMLInputElement).value;
+    this.profileDraft = { ...this.getProfileDraft(), [fieldArg]: value };
+  }
+
+  private handleProfileSave() {
+    const draft = this.getProfileDraft();
+    this.dispatchShellEvent<IIdpAdminProfileUpdateEventDetail>('idp-admin-profile-update', {
+      name: draft.name.trim(),
+      username: draft.username.trim(),
+      mobileNumber: draft.mobileNumber.trim(),
+    });
+  }
+
   private renderProfile(): TemplateResult {
-    const username = this.user?.username || this.user?.email?.split('@')[0] || '';
     const status = this.user?.status || 'active';
+    const draft = this.getProfileDraft();
+    const editable = this.profileEditable;
+    const dirty =
+      this.profileDraft !== null &&
+      (draft.name !== (this.user?.name || '') ||
+        draft.username !== (this.user?.username || this.user?.email?.split('@')[0] || '') ||
+        draft.mobileNumber !== (this.user?.mobileNumber || ''));
     return html`
       ${this.renderPageHeader('Profile', 'Your personal identity details visible to connected apps.')}
       <div class="body narrow-body">
-        ${this.renderSectionCard('Avatar', 'Shown to apps that request your profile.', html`<div class="split-row" style="justify-content:flex-start"><span class="avatar" style="width:56px;height:56px;font-size:20px">${this.userInitials}</span><div><div class="section-title">${this.user?.name || 'Unknown User'}</div><div class="muted" style="margin-top:5px">Profile update endpoints are not exposed in this console yet.</div></div></div>`)}
+        ${this.renderSectionCard('Avatar', 'Shown to apps that request your profile.', html`<div class="split-row" style="justify-content:flex-start"><span class="avatar" style="width:56px;height:56px;font-size:20px">${this.userInitials}</span><div><div class="section-title">${this.user?.name || 'Unknown User'}</div><div class="muted" style="margin-top:5px">${this.user?.email || ''}</div></div></div>`)}
         ${this.renderSectionCard('Personal information', '', html`
-          ${this.renderFormRow('Full name', '', html`<input class="input" .value=${this.user?.name || ''} disabled />`, true)}
-          ${this.renderFormRow('Username', 'Used in your public profile URL', html`<div class="input-group"><span class="input-prefix">idp.global/user/</span><input class="input" .value=${username} disabled /></div>`)}
-          ${this.renderFormRow('Email', 'Primary address for login and notifications', html`<input class="input" .value=${this.user?.email || ''} disabled />`)}
-          ${this.renderFormRow('Mobile number', 'Used for SMS verification', html`<input class="input" .value=${this.user?.mobileNumber || ''} disabled />`)}
+          ${this.renderFormRow('Full name', '', html`<input class="input" .value=${draft.name} ?disabled=${!editable || this.profileSaving} @input=${(eventArg: Event) => this.setProfileDraftField('name', eventArg)} />`, true)}
+          ${this.renderFormRow('Username', 'Used in your public profile URL', html`<div class="input-group"><span class="input-prefix">idp.global/user/</span><input class="input" .value=${draft.username} ?disabled=${!editable || this.profileSaving} @input=${(eventArg: Event) => this.setProfileDraftField('username', eventArg)} /></div>`)}
+          ${this.renderFormRow('Email', 'Primary address for login and notifications - contact support to change it', html`<input class="input" .value=${this.user?.email || ''} disabled />`)}
+          ${this.renderFormRow('Mobile number', 'Optional contact number shown to connected apps', html`<input class="input" .value=${draft.mobileNumber} ?disabled=${!editable || this.profileSaving} @input=${(eventArg: Event) => this.setProfileDraftField('mobileNumber', eventArg)} />`)}
+          ${editable
+            ? html`<div class="split-row" style="justify-content:flex-end;gap:10px;margin-top:14px">
+                <idp-button variant="outline" shape="rect" ?disabled=${!dirty || this.profileSaving} @click=${() => { this.profileDraft = null; }}>Reset</idp-button>
+                <idp-button variant="accent" shape="rect" ?loading=${this.profileSaving} ?disabled=${!dirty} @click=${this.handleProfileSave}>Save changes</idp-button>
+              </div>`
+            : html``}
         `)}
         ${this.renderSectionCard('Account status', '', html`<div class="split-row"><div><div class="section-title">Status</div><div class="muted">Your account is currently ${status}.</div></div><idp-badge variant=${status === 'active' ? 'ok' : status === 'suspended' ? 'error' : 'warn'}>${status}</idp-badge></div>${this.globalAdmin ? html`<div class="divider"></div><div class="split-row"><div><div class="section-title">Global admin</div><div class="muted">You have platform-wide administrative access.</div></div><idp-badge variant="accent">Admin</idp-badge></div>` : html``}`)}
         ${this.delegationApps.length
@@ -2220,6 +2384,25 @@ export class IdpAdminShell extends DeesElement {
     `;
   }
 
+  private renderOrgSso(): TemplateResult {
+    return html`
+      ${this.renderPageHeader('SSO & Provisioning', 'Enterprise single sign-on and automated user provisioning for this organisation.')}
+      <div class="body narrow-body">
+        <div class="list-stack">
+          <idp-sso-connection-form
+            .connections=${this.ssoConnections}
+            .spDetails=${this.ssoSpDetails}
+          ></idp-sso-connection-form>
+          <idp-scim-token-panel
+            .tokens=${this.scimTokens}
+            .createdToken=${this.scimCreatedToken}
+            scimBaseUrl=${this.ssoSpDetails?.scimBaseUrl || ''}
+          ></idp-scim-token-panel>
+        </div>
+      </div>
+    `;
+  }
+
   private renderSupport(): TemplateResult {
     const services = [
       ['Account Recovery', 'Lost access to your account or locked out of your organisation? Our team will verify your identity and restore access securely.', 'EUR149', 'per incident', 'key', '1-2 business days'],
@@ -2293,6 +2476,7 @@ export class IdpAdminShell extends DeesElement {
     const planVariant = (planArg: string): 'accent' | 'ok' | 'warn' | 'default' =>
       planArg === 'Pro' ? 'accent' : planArg === 'Enterprise' ? 'ok' : planArg === 'Internal' ? 'warn' : 'default';
     const hasAdminFields = this.orgs.some((orgArg) => orgArg.status || orgArg.plan);
+    const hasMemberCounts = this.orgs.some((orgArg) => orgArg.memberCount !== undefined);
     const orgRows = this.orgs.map((orgArg) => ({
       cells: [
         html`
@@ -2305,9 +2489,9 @@ export class IdpAdminShell extends DeesElement {
           </div>
         `,
         orgArg.slug || '-',
+        ...(hasMemberCounts ? [orgArg.memberCount !== undefined ? String(orgArg.memberCount) : '-'] : []),
         ...(hasAdminFields
           ? [
-              orgArg.memberCount !== undefined ? String(orgArg.memberCount) : '-',
               orgArg.plan ? html`<idp-badge variant=${planVariant(orgArg.plan)}>${orgArg.plan}</idp-badge>` : '-',
               html`<idp-badge variant=${orgArg.status === 'suspended' ? 'error' : 'ok'}>${orgArg.status || 'active'}</idp-badge>`,
               html`<button class="plain-button ghost" style="font-size:11px" @click=${() => this.dispatchShellEvent<IIdpAdminGaOrgActionEventDetail>('idp-admin-ga-org-action', { orgId: orgArg.id, action: orgArg.status === 'suspended' ? 'unsuspend' : 'suspend' })}>${orgArg.status === 'suspended' ? 'Unsuspend' : 'Suspend'}</button>`,
@@ -2327,21 +2511,17 @@ export class IdpAdminShell extends DeesElement {
           badge=${`${this.orgs.length} total`}
           empty-title="No organisations"
           empty-description="No organisations are visible to this admin session."
-          .columns=${hasAdminFields
-            ? [
-                { label: 'Organisation' },
-                { label: 'Slug', mono: true, hideBelow: 'mobile' },
-                { label: 'Members', mono: true, hideBelow: 'mobile' },
-                { label: 'Plan' },
-                { label: 'Status' },
-                { label: '' },
-              ]
-            : [
-                { label: 'Organisation' },
-                { label: 'Slug', mono: true, hideBelow: 'mobile' },
-                { label: 'Role' },
-                { label: 'Identifier', mono: true, hideBelow: 'tablet' },
-              ]}
+          .columns=${[
+            { label: 'Organisation' },
+            { label: 'Slug', mono: true, hideBelow: 'mobile' },
+            ...(hasMemberCounts ? [{ label: 'Members', mono: true, hideBelow: 'mobile' }] : []),
+            ...(hasAdminFields
+              ? [{ label: 'Plan' }, { label: 'Status' }, { label: '' }]
+              : [
+                  { label: 'Role' },
+                  { label: 'Identifier', mono: true, hideBelow: 'tablet' },
+                ]),
+          ]}
           .rows=${orgRows}
         ></idp-data-table>
       </div>
@@ -2409,6 +2589,7 @@ export class IdpAdminShell extends DeesElement {
       'org-settings': () => this.renderOrgSettings(),
       'org-members': () => this.renderOrgMembers(),
       'org-apps': () => this.renderOrgApps(),
+      'org-sso': () => this.renderOrgSso(),
       support: () => this.renderSupport(),
       'ga-users': () => this.renderGAUsers(),
       'ga-orgs': () => this.renderGAOrgs(),
@@ -2417,15 +2598,27 @@ export class IdpAdminShell extends DeesElement {
     return (renderers[this.page] || renderers.overview)();
   }
 
+  private handleMobileNavKeydown(eventArg: KeyboardEvent) {
+    if (eventArg.key === 'Escape') {
+      this.mobileNavOpen = false;
+    }
+  }
+
   public render(): TemplateResult {
     return html`
       <div
         class="shell"
-        @idp-admin-navigate=${this.handleSidebarNavigate}
+        @idp-admin-navigate=${(eventArg: CustomEvent) => { this.mobileNavOpen = false; this.handleSidebarNavigate(eventArg as CustomEvent<IIdpAdminNavigateEventDetail>); }}
         @idp-admin-org-select=${this.handleSidebarOrgSelect}
         @idp-admin-org-create-request=${this.requestOrgCreate}
         @idp-admin-logout-request=${this.requestLogout}
       >
+        <div class="mobile-topbar">
+          <button class="mobile-nav-toggle" aria-label="Open navigation" aria-haspopup="dialog" aria-expanded=${this.mobileNavOpen} @click=${() => { this.mobileNavOpen = true; }}>
+            <idp-icon name="lucide:Menu" size="17"></idp-icon>
+          </button>
+          <span class="mobile-topbar-title">idp.global</span>
+        </div>
         <idp-admin-sidebar
           .page=${this.page}
           .user=${this.user}
@@ -2435,12 +2628,31 @@ export class IdpAdminShell extends DeesElement {
           .globalAdmin=${this.globalAdmin}
           .sessionCount=${this.sessions.length}
         ></idp-admin-sidebar>
+        ${this.mobileNavOpen
+          ? html`
+              <div class="mobile-drawer-backdrop" @click=${() => { this.mobileNavOpen = false; }}></div>
+              <div class="mobile-drawer" role="dialog" aria-label="Navigation" @keydown=${this.handleMobileNavKeydown}>
+                <button class="mobile-drawer-close" aria-label="Close navigation" @click=${() => { this.mobileNavOpen = false; }}>
+                  <idp-icon name="x" size="16"></idp-icon>
+                </button>
+                <idp-admin-sidebar
+                  .page=${this.page}
+                  .user=${this.user}
+                  .accounts=${this.accounts}
+                  .orgs=${this.orgs}
+                  .selectedOrgId=${this.selectedOrgId}
+                  .globalAdmin=${this.globalAdmin}
+                  .sessionCount=${this.sessions.length}
+                ></idp-admin-sidebar>
+              </div>
+            `
+          : html``}
         <main>${this.renderMainContent()}</main>
       </div>
       ${this.renderDialog()}
       ${this.toast
         ? html`
-            <div class="toast ${this.toast.tone}">
+            <div class="toast ${this.toast.tone}" role="status" aria-live="polite">
               <idp-icon name=${this.toast.tone === 'ok' ? 'check' : 'alert'} size="14"></idp-icon>
               <span style="flex:1">${this.toast.message}</span>
             </div>

package/ts_web/elements/idp-admin-sidebar.ts

@@ -444,6 +444,7 @@ export class IdpAdminSidebar extends DeesElement {
     { id: 'org-settings', label: 'Settings', icon: 'settings' },
     { id: 'org-members', label: 'Members', icon: 'users' },
     { id: 'org-apps', label: 'OAuth Apps', icon: 'box' },
+    { id: 'org-sso', label: 'SSO & Provisioning', icon: 'key' },
   ];
 
   private supportNav: TNavItem[] = [
@@ -534,7 +535,7 @@ export class IdpAdminSidebar extends DeesElement {
     return html`
       <div class="nav-list">
         ${items.map((item) => html`
-          <button class="nav-item ${item.id === active ? 'active' : ''}" @click=${() => this.setPage(item.id)}>
+          <button class="nav-item ${item.id === active ? 'active' : ''}" aria-current=${item.id === active ? 'page' : 'false'} @click=${() => this.setPage(item.id)}>
             <idp-icon name=${item.icon as any} size="14"></idp-icon>
             ${item.label}
             ${item.badge ? html`<idp-badge variant="accent" style="margin-left:auto">${item.badge}</idp-badge>` : html``}
@@ -603,13 +604,13 @@ export class IdpAdminSidebar extends DeesElement {
             <span class="logo-text">idp.global</span>
           </div>
         </div>
-        <div class="nav-wrap">
+        <nav class="nav-wrap" aria-label="Console navigation">
           <div class="nav-section"><div class="nav-title">Workspace</div>${this.renderNavGroup(this.workspaceNav, this.page)}</div>
           <div class="nav-section"><div class="nav-title">My Account</div>${this.renderNavGroup(this.accountNav, this.page)}</div>
           <div class="nav-section">
             <div class="nav-title">Organisation</div>
             <div class="org-switch-wrap">
-              <button class="org-switch ${this.orgMenuOpen ? 'open' : ''}" @click=${() => { this.orgMenuOpen = !this.orgMenuOpen; }}>
+              <button class="org-switch ${this.orgMenuOpen ? 'open' : ''}" aria-haspopup="menu" aria-expanded=${this.orgMenuOpen} @click=${() => { this.orgMenuOpen = !this.orgMenuOpen; }}>
                 <span class="org-avatar">${currentOrg.name.slice(0, 2).toUpperCase()}</span>
                 <span class="org-name">${currentOrg.name}</span>
                 <idp-icon name="chevron-down" size="10"></idp-icon>
@@ -633,7 +634,7 @@ export class IdpAdminSidebar extends DeesElement {
           </div>
           <div class="nav-section"><div class="nav-title">Support</div>${this.renderNavGroup(this.supportNav, this.page)}</div>
           ${this.globalAdmin ? html`<div class="nav-section"><div class="nav-title">Global Admin</div>${this.renderNavGroup(this.adminNav, this.page)}</div>` : html``}
-        </div>
+        </nav>
         <div class="user-footer">
           <button class="user-trigger ${this.userMenuOpen ? 'open' : ''}" aria-haspopup="menu" aria-expanded=${this.userMenuOpen} @click=${() => { this.userMenuOpen = !this.userMenuOpen; }}>
             <span class="user-avatar">${this.userInitials}</span>