@csntgao/uni-base 0.1.0

package/packages/web-components/src/organization-multi-employee-selector.ts

@@ -0,0 +1,1564 @@
+import { LitElement, css, html, nothing, type TemplateResult } from 'lit'
+
+export type OrganizationEmployeeEmploymentStatus =
+  'active' | 'pending' | 'rejected' | 'left' | 'unknown'
+
+export interface OrganizationEmployeeAvatar {
+  kind: 'file' | 'color' | 'none'
+  fileId?: string
+  color?: string
+}
+
+export interface OrganizationEmployeeSelectionItem {
+  employeeId: string
+  displayName: string
+  avatar?: OrganizationEmployeeAvatar
+  maskedMobile?: string
+  primaryDepartmentId?: string
+  primaryDepartmentName?: string
+  departmentIds: string[]
+  departmentNames: string[]
+  employmentStatus: OrganizationEmployeeEmploymentStatus
+}
+
+export interface OrganizationDepartmentNode {
+  id: string
+  name: string
+  parentId?: string
+  depth: number
+  memberCount?: number
+  hasChildren?: boolean
+}
+
+export interface OrganizationEmployeePage {
+  items: OrganizationEmployeeSelectionItem[]
+  page: number
+  pageSize: number
+  total: number
+  hasMore: boolean
+}
+
+export interface UniplatOrganizationMultiEmployeeSelectorTransport {
+  loadDepartmentTree(): Promise<OrganizationDepartmentNode[]>
+  listDepartmentEmployees(input: {
+    departmentId: string
+    page: number
+    pageSize: number
+    employmentStatuses: readonly string[]
+  }): Promise<OrganizationEmployeePage>
+  searchEmployees(input: {
+    keyword: string
+    page: number
+    pageSize: number
+    employmentStatuses: readonly string[]
+  }): Promise<OrganizationEmployeePage>
+  resolveEmployees(input: {
+    employeeIds: readonly string[]
+  }): Promise<OrganizationEmployeeSelectionItem[]>
+}
+
+export interface OrganizationMultiEmployeeSelectorConfig {
+  applicationName: string
+  transport: UniplatOrganizationMultiEmployeeSelectorTransport
+}
+
+export interface OrganizationMultiEmployeeSelectorDisabledSelection {
+  employeeId: string
+  reason?: string
+}
+
+export interface OrganizationMultiEmployeeSelectorOpenOptions {
+  title?: string
+  initialSelectedEmployeeIds?: readonly string[]
+  disabledSelections?: readonly OrganizationMultiEmployeeSelectorDisabledSelection[]
+  maxSelection?: number
+  selectableEmploymentStatuses?: readonly 'active'[]
+  enableDepartmentBulkSelection?: boolean
+}
+
+export interface OrganizationMultiEmployeeSelectionConfirmedDetail {
+  employeeIds: string[]
+  employees: OrganizationEmployeeSelectionItem[]
+}
+
+export interface OrganizationMultiEmployeeSelectorErrorDetail {
+  code: string
+  message: string
+  retryable: boolean
+}
+
+export interface OrganizationMultiEmployeeSelectorEventMap {
+  'selection-confirmed': CustomEvent<OrganizationMultiEmployeeSelectionConfirmedDetail>
+  'selection-cancelled': CustomEvent<Record<string, never>>
+  'selector-error': CustomEvent<OrganizationMultiEmployeeSelectorErrorDetail>
+}
+
+export class OrganizationMultiEmployeeSelectorTransportError extends Error {
+  readonly code: string
+  readonly retryable: boolean
+
+  constructor(code: string, retryable: boolean) {
+    super('Organization employee selector request failed')
+    this.name = 'OrganizationMultiEmployeeSelectorTransportError'
+    this.code = code
+    this.retryable = retryable
+  }
+}
+
+const PAGE_SIZE = 50
+const ALL_EMPLOYEES_ID = '__all__'
+
+export class UniplatOrganizationMultiEmployeeSelectorElement extends LitElement {
+  static override properties = {
+    visible: { state: true },
+    dialogTitle: { state: true },
+    departments: { state: true },
+    activeDepartmentId: { state: true },
+    expandedDepartmentIds: { state: true },
+    candidates: { state: true },
+    selectedEmployees: { state: true },
+    keyword: { state: true },
+    currentPage: { state: true },
+    hasMore: { state: true },
+    loadingTree: { state: true },
+    loadingCandidates: { state: true },
+    loadingMore: { state: true },
+    candidateError: { state: true },
+    initializationError: { state: true },
+    selectionMessage: { state: true },
+    mobileView: { state: true },
+  }
+
+  static override styles = css`
+    :host {
+      --uniplat-employee-selector-primary: #3f6ff5;
+      --uniplat-employee-selector-text: #1d2939;
+      --uniplat-employee-selector-muted: #8a98ab;
+      --uniplat-employee-selector-border: #e3eaf3;
+      --uniplat-employee-selector-surface: #f6f8fc;
+      --uniplat-employee-selector-font-family:
+        'Noto Sans SC', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+        'Segoe UI', sans-serif;
+      color: var(--uniplat-employee-selector-text);
+      font-family: var(--uniplat-employee-selector-font-family);
+    }
+    * {
+      box-sizing: border-box;
+    }
+    button,
+    input {
+      font: inherit;
+    }
+    button {
+      cursor: pointer;
+    }
+    .backdrop {
+      position: fixed;
+      z-index: 2147483000;
+      inset: 0;
+      display: grid;
+      padding: 24px;
+      place-items: center;
+      background: rgba(19, 31, 51, 0.48);
+    }
+    .dialog {
+      display: flex;
+      width: min(960px, calc(100vw - 48px));
+      height: min(680px, calc(100vh - 48px));
+      min-height: 480px;
+      flex-direction: column;
+      overflow: hidden;
+      border-radius: 18px;
+      background: #fff;
+      box-shadow: 0 24px 72px rgba(20, 40, 80, 0.2);
+    }
+    .header,
+    .footer {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+      border-color: var(--uniplat-employee-selector-border);
+    }
+    .header {
+      justify-content: space-between;
+      min-height: 68px;
+      padding: 0 24px;
+      border-bottom: 1px solid var(--uniplat-employee-selector-border);
+    }
+    h2,
+    h3,
+    p {
+      margin: 0;
+    }
+    h2 {
+      font-size: 20px;
+      font-weight: 750;
+    }
+    h3 {
+      font-size: 14px;
+      font-weight: 700;
+    }
+    .icon-button {
+      display: grid;
+      width: 36px;
+      height: 36px;
+      padding: 0;
+      place-items: center;
+      border: 0;
+      border-radius: 8px;
+      color: #697586;
+      background: transparent;
+    }
+    .icon-button:hover {
+      background: #f1f4f8;
+    }
+    .mobile-tabs {
+      display: none;
+    }
+    .body {
+      display: grid;
+      min-height: 0;
+      flex: 1;
+      grid-template-columns: minmax(0, 1fr) 320px;
+      overflow: hidden;
+    }
+    .body.single-selection {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .candidate-pane,
+    .selected-pane {
+      display: flex;
+      min-width: 0;
+      min-height: 0;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .candidate-pane {
+      border-right: 1px solid var(--uniplat-employee-selector-border);
+    }
+    .candidate-pane.single-selection {
+      border-right: 0;
+    }
+    .search-row {
+      display: flex;
+      gap: 8px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--uniplat-employee-selector-border);
+    }
+    .search-row input {
+      min-width: 0;
+      flex: 1;
+      height: 38px;
+      padding: 0 12px;
+      border: 1px solid #d6deea;
+      border-radius: 8px;
+      outline: none;
+    }
+    .search-row input:focus {
+      border-color: var(--uniplat-employee-selector-primary);
+      box-shadow: 0 0 0 3px rgba(63, 111, 245, 0.12);
+    }
+    .search-button,
+    .primary,
+    .secondary,
+    .retry,
+    .load-more {
+      border-radius: 8px;
+      font-weight: 650;
+    }
+    .search-button,
+    .primary {
+      border: 1px solid var(--uniplat-employee-selector-primary);
+      color: #fff;
+      background: var(--uniplat-employee-selector-primary);
+    }
+    .search-button {
+      min-width: 66px;
+      padding: 0 14px;
+    }
+    .directory-layout {
+      display: grid;
+      min-height: 0;
+      flex: 1;
+      grid-template-columns: 220px minmax(0, 1fr);
+      overflow: hidden;
+    }
+    .tree {
+      min-height: 0;
+      padding: 12px 8px;
+      overflow-y: auto;
+      border-right: 1px solid var(--uniplat-employee-selector-border);
+      background: #fbfcfe;
+      scrollbar-gutter: stable;
+    }
+    .tree-label {
+      padding: 0 10px 8px;
+      color: var(--uniplat-employee-selector-muted);
+      font-size: 12px;
+    }
+    .department {
+      display: flex;
+      width: 100%;
+      min-height: 36px;
+      align-items: center;
+      gap: 5px;
+      padding: 5px 8px;
+      border: 0;
+      border-radius: 7px;
+      color: inherit;
+      background: transparent;
+      text-align: left;
+    }
+    .department:hover,
+    .department.active {
+      background: #edf3ff;
+      color: var(--uniplat-employee-selector-primary);
+    }
+    .department-name {
+      min-width: 0;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .department-count {
+      color: var(--uniplat-employee-selector-muted);
+      font-size: 11px;
+    }
+    .expand {
+      display: grid;
+      width: 20px;
+      height: 20px;
+      padding: 0;
+      place-items: center;
+      border: 0;
+      color: #7f8b9d;
+      background: transparent;
+    }
+    .employees,
+    .selected-list {
+      min-height: 0;
+      overflow-y: auto;
+      scrollbar-gutter: stable;
+    }
+    .employees {
+      padding: 10px 14px 16px;
+    }
+    .employee,
+    .selected-employee {
+      display: grid;
+      align-items: center;
+      gap: 10px;
+      border-radius: 9px;
+    }
+    .employee {
+      width: 100%;
+      min-height: 58px;
+      grid-template-columns: 18px 38px minmax(0, 1fr);
+      padding: 8px;
+      border: 1px solid transparent;
+      color: inherit;
+      background: transparent;
+      text-align: left;
+    }
+    .employee:hover,
+    .employee.selected {
+      border-color: #dce6ff;
+      background: #f4f7ff;
+    }
+    .employee.disabled {
+      cursor: not-allowed;
+      opacity: 0.62;
+    }
+    .selection-indicator {
+      display: grid;
+      width: 18px;
+      height: 18px;
+      place-items: center;
+      border: 1.5px solid #b8c3d3;
+      color: transparent;
+    }
+    .checkbox {
+      border-radius: 5px;
+    }
+    .selected .checkbox {
+      border-color: var(--uniplat-employee-selector-primary);
+      color: #fff;
+      background: var(--uniplat-employee-selector-primary);
+    }
+    .radio {
+      border-radius: 50%;
+    }
+    .selected .radio {
+      border-color: var(--uniplat-employee-selector-primary);
+    }
+    .selected .radio::after {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--uniplat-employee-selector-primary);
+      content: '';
+    }
+    .avatar {
+      display: grid;
+      width: 38px;
+      height: 38px;
+      flex: none;
+      place-items: center;
+      border-radius: 50%;
+      color: #315dbd;
+      background: #e8efff;
+      font-size: 13px;
+      font-weight: 750;
+    }
+    .employee-copy {
+      min-width: 0;
+    }
+    .employee-name,
+    .employee-meta {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .employee-name {
+      font-size: 13px;
+      font-weight: 700;
+    }
+    .employee-meta {
+      margin-top: 3px;
+      color: var(--uniplat-employee-selector-muted);
+      font-size: 11.5px;
+    }
+    .selected-head {
+      display: flex;
+      min-height: 54px;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 18px;
+      border-bottom: 1px solid var(--uniplat-employee-selector-border);
+    }
+    .selected-count {
+      color: var(--uniplat-employee-selector-primary);
+      font-size: 12px;
+    }
+    .selected-list {
+      flex: 1;
+      padding: 10px 12px;
+    }
+    .selected-employee {
+      min-height: 58px;
+      grid-template-columns: 38px minmax(0, 1fr) 32px;
+      padding: 8px;
+    }
+    .remove {
+      display: grid;
+      width: 30px;
+      height: 30px;
+      padding: 0;
+      place-items: center;
+      border: 0;
+      border-radius: 7px;
+      color: #8491a3;
+      background: transparent;
+    }
+    .remove:hover:not(:disabled) {
+      color: #d14343;
+      background: #fff0f0;
+    }
+    .remove:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+    .empty,
+    .loading,
+    .error {
+      display: grid;
+      min-height: 132px;
+      padding: 24px;
+      place-items: center;
+      color: var(--uniplat-employee-selector-muted);
+      font-size: 13px;
+      text-align: center;
+    }
+    .error {
+      gap: 10px;
+      color: #b42318;
+    }
+    .retry,
+    .load-more,
+    .secondary {
+      border: 1px solid #d5deea;
+      color: #526173;
+      background: #fff;
+    }
+    .retry,
+    .load-more {
+      min-height: 34px;
+      padding: 0 13px;
+    }
+    .load-more {
+      display: block;
+      margin: 8px auto 0;
+    }
+    .selection-message {
+      padding: 8px 20px;
+      border-top: 1px solid #fde4b8;
+      color: #b54708;
+      background: #fff8eb;
+      font-size: 12px;
+    }
+    .footer {
+      justify-content: flex-end;
+      gap: 10px;
+      min-height: 68px;
+      padding: 0 24px;
+      border-top: 1px solid var(--uniplat-employee-selector-border);
+    }
+    .primary,
+    .secondary {
+      min-width: 92px;
+      min-height: 40px;
+      padding: 0 18px;
+    }
+    .primary:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    svg {
+      display: block;
+      width: 18px;
+      height: 18px;
+      fill: none;
+      stroke: currentColor;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      stroke-width: 1.8;
+    }
+    @media (max-width: 760px) {
+      .backdrop {
+        padding: 0;
+        place-items: stretch;
+      }
+      .dialog {
+        width: 100vw;
+        height: 100vh;
+        min-height: 0;
+        border-radius: 0;
+      }
+      .mobile-tabs {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        border-bottom: 1px solid var(--uniplat-employee-selector-border);
+      }
+      .mobile-tab {
+        min-height: 44px;
+        border: 0;
+        border-bottom: 2px solid transparent;
+        color: #697586;
+        background: #fff;
+      }
+      .mobile-tab.active {
+        border-bottom-color: var(--uniplat-employee-selector-primary);
+        color: var(--uniplat-employee-selector-primary);
+      }
+      .body {
+        display: block;
+      }
+      .candidate-pane,
+      .selected-pane {
+        height: 100%;
+        border: 0;
+      }
+      .candidate-pane.mobile-hidden,
+      .selected-pane.mobile-hidden {
+        display: none;
+      }
+      .directory-layout {
+        grid-template-columns: 150px minmax(0, 1fr);
+      }
+    }
+  `
+
+  declare private visible: boolean
+  declare private dialogTitle: string
+  declare private departments: readonly OrganizationDepartmentNode[]
+  declare private activeDepartmentId: string
+  declare private expandedDepartmentIds: ReadonlySet<string>
+  declare private candidates: readonly OrganizationEmployeeSelectionItem[]
+  declare private selectedEmployees: ReadonlyMap<string, OrganizationEmployeeSelectionItem>
+  declare private keyword: string
+  declare private currentPage: number
+  declare private hasMore: boolean
+  declare private loadingTree: boolean
+  declare private loadingCandidates: boolean
+  declare private loadingMore: boolean
+  declare private candidateError: string
+  declare private initializationError: string
+  declare private selectionMessage: string
+  declare private mobileView: 'candidates' | 'selected'
+
+  private config: OrganizationMultiEmployeeSelectorConfig | null = null
+  private disabledSelections = new Map<string, string>()
+  private maxSelection: number | null = null
+  private selectableEmploymentStatuses: readonly string[] = ['active']
+  private openGeneration = 0
+  private loadGeneration = 0
+  private openingPromise: Promise<void> | null = null
+  private previousFocus: HTMLElement | null = null
+  private initialSelectedEmployeeIds: readonly string[] = []
+
+  constructor() {
+    super()
+    this.visible = false
+    this.dialogTitle = '选择组织成员'
+    this.departments = []
+    this.activeDepartmentId = ALL_EMPLOYEES_ID
+    this.expandedDepartmentIds = new Set()
+    this.candidates = []
+    this.selectedEmployees = new Map()
+    this.keyword = ''
+    this.currentPage = 1
+    this.hasMore = false
+    this.loadingTree = false
+    this.loadingCandidates = false
+    this.loadingMore = false
+    this.candidateError = ''
+    this.initializationError = ''
+    this.selectionMessage = ''
+    this.mobileView = 'candidates'
+  }
+
+  /** @internal Shared by the semantically independent single employee selector. */
+  protected get singleSelection(): boolean {
+    return false
+  }
+
+  configure(config: OrganizationMultiEmployeeSelectorConfig): void {
+    validateConfig(config)
+    this.openGeneration += 1
+    this.loadGeneration += 1
+    this.openingPromise = null
+    this.config = { applicationName: config.applicationName.trim(), transport: config.transport }
+    this.resetState()
+  }
+
+  override addEventListener<K extends keyof OrganizationMultiEmployeeSelectorEventMap>(
+    type: K,
+    listener: (
+      this: UniplatOrganizationMultiEmployeeSelectorElement,
+      event: OrganizationMultiEmployeeSelectorEventMap[K],
+    ) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void
+  override addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void
+  override addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions,
+  ): void {
+    super.addEventListener(type, listener, options)
+  }
+
+  open(options: OrganizationMultiEmployeeSelectorOpenOptions = {}): Promise<void> {
+    if (!this.config) throw new TypeError('Organization employee selector is not configured')
+    if (this.openingPromise) return this.openingPromise
+    const normalized = normalizeOpenOptions(options)
+    this.previousFocus =
+      document.activeElement instanceof HTMLElement ? document.activeElement : null
+    this.visible = true
+    this.dialogTitle = normalized.title
+    this.disabledSelections = normalized.disabledSelections
+    this.maxSelection = normalized.maxSelection
+    this.selectableEmploymentStatuses = normalized.selectableEmploymentStatuses
+    this.initialSelectedEmployeeIds = normalized.initialSelectedEmployeeIds
+    this.mobileView = 'candidates'
+    this.resetLoadedData()
+    const generation = ++this.openGeneration
+    window.addEventListener('keydown', this.handleWindowKeydown)
+    this.openingPromise = this.initialize(
+      generation,
+      normalized.initialSelectedEmployeeIds,
+    ).finally(() => {
+      if (generation === this.openGeneration) this.openingPromise = null
+    })
+    void this.updateComplete.then(() => this.focusDialog())
+    return this.openingPromise
+  }
+
+  close(): void {
+    if (!this.visible) return
+    this.finishClose(true)
+  }
+
+  override disconnectedCallback(): void {
+    this.finishClose(false)
+    this.config = null
+    this.resetState()
+    super.disconnectedCallback()
+  }
+
+  override render() {
+    if (!this.visible) return nothing
+    return html`
+      <div class="backdrop" part="backdrop" @mousedown=${this.handleBackdropMouseDown}>
+        <section
+          class="dialog"
+          part="dialog"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="organization-employee-selector-title"
+          @mousedown=${(event: MouseEvent) => event.stopPropagation()}
+        >
+          <header class="header" part="header">
+            <h2 id="organization-employee-selector-title" part="title">${this.dialogTitle}</h2>
+            <button
+              class="icon-button"
+              part="close-action"
+              type="button"
+              aria-label="关闭"
+              @click=${this.close}
+            >
+              ${icon('close')}
+            </button>
+          </header>
+          ${
+            this.singleSelection
+              ? nothing
+              : html`<nav class="mobile-tabs" aria-label="选择器视图">
+                  <button
+                    class="mobile-tab ${this.mobileView === 'candidates' ? 'active' : ''}"
+                    type="button"
+                    @click=${() => (this.mobileView = 'candidates')}
+                  >
+                    候选成员
+                  </button>
+                  <button
+                    class="mobile-tab ${this.mobileView === 'selected' ? 'active' : ''}"
+                    type="button"
+                    @click=${() => (this.mobileView = 'selected')}
+                  >
+                    已选成员（${this.selectedEmployees.size}）
+                  </button>
+                </nav>`
+          }
+          <div class="body ${this.singleSelection ? 'single-selection' : ''}">
+            ${this.renderCandidatePane()}
+            ${this.singleSelection ? nothing : this.renderSelectedPane()}
+          </div>
+          ${
+            this.selectionMessage
+              ? html`<div class="selection-message" role="status">${this.selectionMessage}</div>`
+              : nothing
+          }
+          <footer class="footer" part="footer">
+            <button class="secondary" part="cancel-action" type="button" @click=${this.close}>
+              取消
+            </button>
+            <button
+              class="primary"
+              part="confirm-action"
+              type="button"
+              ?disabled=${
+                this.loadingTree ||
+                Boolean(this.initializationError) ||
+                (this.singleSelection && this.selectedEmployees.size !== 1)
+              }
+              @click=${this.confirmSelection}
+            >
+              确认${
+                !this.singleSelection && this.selectedEmployees.size
+                  ? `（${this.selectedEmployees.size}）`
+                  : ''
+              }
+            </button>
+          </footer>
+        </section>
+      </div>
+    `
+  }
+
+  private renderCandidatePane() {
+    return html`
+      <section
+        class="candidate-pane ${this.singleSelection ? 'single-selection' : ''} ${
+          !this.singleSelection && this.mobileView === 'selected' ? 'mobile-hidden' : ''
+        }"
+        part="candidate-pane"
+        aria-label="候选成员"
+      >
+        ${this.renderSearch()}
+        <div class="directory-layout">
+          <aside class="tree" part="department-tree" aria-label="组织架构">
+            <div class="tree-label">组织架构</div>
+            <button
+              class="department ${this.activeDepartmentId === ALL_EMPLOYEES_ID ? 'active' : ''}"
+              type="button"
+              @click=${() => this.selectDepartment(ALL_EMPLOYEES_ID)}
+            >
+              <span class="expand" aria-hidden="true">${icon('organization')}</span>
+              <span class="department-name">全部成员</span>
+            </button>
+            ${
+              this.loadingTree
+                ? html`<div class="loading">正在加载组织架构…</div>`
+                : this.visibleDepartments.map((department) => this.renderDepartment(department))
+            }
+          </aside>
+          <div
+            class="employees"
+            part="employee-list"
+            role=${this.singleSelection ? 'radiogroup' : nothing}
+            aria-label=${this.singleSelection ? '选择一名成员' : nothing}
+          >
+            ${this.renderCandidateContent()}
+          </div>
+        </div>
+      </section>
+    `
+  }
+
+  private renderSelectedPane() {
+    const selected = [...this.selectedEmployees.values()]
+    return html`
+      <aside
+        class="selected-pane ${this.mobileView === 'candidates' ? 'mobile-hidden' : ''}"
+        part="selected-pane"
+        aria-label="已选择的成员"
+      >
+        <div class="selected-head">
+          <h3>已选择的成员</h3>
+          <span class="selected-count">${selected.length} 人</span>
+        </div>
+        <div class="selected-list" part="selected-list">
+          ${
+            selected.length
+              ? selected.map((employee) => this.renderSelectedEmployee(employee))
+              : html`<div class="empty">暂未选择成员</div>`
+          }
+        </div>
+      </aside>
+    `
+  }
+
+  private renderSearch() {
+    return html`<form class="search-row" role="search" @submit=${this.submitSearch}>
+      <input
+        type="search"
+        autocomplete="off"
+        maxlength="80"
+        aria-label="搜索成员或部门"
+        placeholder="搜索成员或部门"
+        .value=${this.keyword}
+        @input=${this.updateKeyword}
+      />
+      <button class="search-button" type="submit">搜索</button>
+    </form>`
+  }
+
+  private renderCandidateContent() {
+    if (this.initializationError) {
+      return html`<div class="error" role="alert">
+        <span>${this.initializationError}</span>
+        <button class="retry" type="button" @click=${this.retryInitialization}>重试</button>
+      </div>`
+    }
+    if (this.loadingCandidates) return html`<div class="loading">正在加载成员…</div>`
+    if (this.candidateError) {
+      return html`<div class="error" role="alert">
+        <span>${this.candidateError}</span>
+        <button class="retry" type="button" @click=${this.retryCandidates}>重试</button>
+      </div>`
+    }
+    if (!this.candidates.length) return html`<div class="empty">暂无符合条件的在职成员</div>`
+    return html`
+      ${this.candidates.map((employee) => this.renderCandidate(employee))}
+      ${
+        this.hasMore
+          ? html`<button
+              class="load-more"
+              type="button"
+              ?disabled=${this.loadingMore}
+              @click=${this.loadMore}
+            >
+              ${this.loadingMore ? '正在加载…' : '加载更多'}
+            </button>`
+          : nothing
+      }
+    `
+  }
+
+  private renderDepartment(department: OrganizationDepartmentNode) {
+    const hasChildren = this.departments.some((item) => item.parentId === department.id)
+    const expanded = this.expandedDepartmentIds.has(department.id)
+    const active = this.activeDepartmentId === department.id
+    return html`
+      <div style=${`padding-left:${Math.min(department.depth, 8) * 12}px`}>
+        <button
+          class="department ${active ? 'active' : ''}"
+          type="button"
+          aria-pressed=${String(active)}
+          @click=${() => {
+            if (hasChildren) this.toggleDepartment(department.id)
+            this.selectDepartment(department.id)
+          }}
+        >
+          <span class="expand" aria-hidden="true">
+            ${hasChildren ? icon(expanded ? 'chevron-down' : 'chevron-right') : icon('department')}
+          </span>
+          <span class="department-name">${department.name}</span>
+          ${
+            department.memberCount === undefined
+              ? nothing
+              : html`<span class="department-count">${department.memberCount}</span>`
+          }
+        </button>
+      </div>
+    `
+  }
+
+  private renderCandidate(employee: OrganizationEmployeeSelectionItem) {
+    const selected = this.selectedEmployees.has(employee.employeeId)
+    const disabledReason = this.disabledSelections.get(employee.employeeId)
+    const disabled = Boolean(disabledReason) && !selected
+    const statusDisabled = !this.selectableEmploymentStatuses.includes(employee.employmentStatus)
+    const title = disabledReason || (statusDisabled ? '该员工当前不可选择' : '')
+    return html`
+      <button
+        class="employee ${selected ? 'selected' : ''} ${disabled || statusDisabled ? 'disabled' : ''}"
+        part="employee"
+        type="button"
+        role=${this.singleSelection ? 'radio' : nothing}
+        aria-checked=${this.singleSelection ? String(selected) : nothing}
+        aria-pressed=${this.singleSelection ? nothing : String(selected)}
+        aria-disabled=${String(disabled || statusDisabled)}
+        title=${title}
+        @click=${() => this.toggleEmployee(employee)}
+      >
+        <span
+          class="selection-indicator ${this.singleSelection ? 'radio' : 'checkbox'}"
+          aria-hidden="true"
+          >${this.singleSelection ? nothing : icon('check')}</span
+        >
+        ${this.renderAvatar(employee)}
+        <span class="employee-copy">
+          <span class="employee-name">${employee.displayName}</span>
+          <span class="employee-meta">${employeeMeta(employee, title)}</span>
+        </span>
+      </button>
+    `
+  }
+
+  private renderSelectedEmployee(employee: OrganizationEmployeeSelectionItem) {
+    const reason = this.disabledSelections.get(employee.employeeId)
+    return html`
+      <div class="selected-employee" part="selected-employee">
+        ${this.renderAvatar(employee)}
+        <span class="employee-copy">
+          <span class="employee-name">${employee.displayName}</span>
+          <span class="employee-meta">${employeeMeta(employee, reason)}</span>
+        </span>
+        <button
+          class="remove"
+          type="button"
+          aria-label=${reason ? `${employee.displayName}不可移除：${reason}` : `移除${employee.displayName}`}
+          title=${reason || '移除'}
+          ?disabled=${Boolean(reason)}
+          @click=${() => this.removeEmployee(employee.employeeId)}
+        >
+          ${icon('close')}
+        </button>
+      </div>
+    `
+  }
+
+  private renderAvatar(employee: OrganizationEmployeeSelectionItem) {
+    const style =
+      employee.avatar?.kind === 'color' && employee.avatar.color
+        ? `background:${employee.avatar.color};color:#fff`
+        : ''
+    return html`<span class="avatar" style=${style} aria-hidden="true">
+      ${employee.displayName.slice(0, 1) || '员'}
+    </span>`
+  }
+
+  private get visibleDepartments(): readonly OrganizationDepartmentNode[] {
+    const visible: OrganizationDepartmentNode[] = []
+    const keyword = this.keyword.trim().toLocaleLowerCase()
+    const includedIds = new Set(this.departments.map(({ id }) => id))
+    if (keyword) {
+      includedIds.clear()
+      const byId = new Map(this.departments.map((department) => [department.id, department]))
+      for (const department of this.departments) {
+        if (!department.name.toLocaleLowerCase().includes(keyword)) continue
+        let cursor: OrganizationDepartmentNode | undefined = department
+        while (cursor) {
+          includedIds.add(cursor.id)
+          cursor = cursor.parentId ? byId.get(cursor.parentId) : undefined
+        }
+      }
+    }
+    const byParent = new Map<string, OrganizationDepartmentNode[]>()
+    for (const department of this.departments) {
+      const key = department.parentId ?? ''
+      const siblings = byParent.get(key) ?? []
+      siblings.push(department)
+      byParent.set(key, siblings)
+    }
+    const append = (parentId: string): void => {
+      for (const department of byParent.get(parentId) ?? []) {
+        if (!includedIds.has(department.id)) continue
+        visible.push(department)
+        if (keyword || this.expandedDepartmentIds.has(department.id)) append(department.id)
+      }
+    }
+    append('')
+    return visible
+  }
+
+  private async initialize(generation: number, initialIds: readonly string[]): Promise<void> {
+    if (!this.config) return
+    this.loadingTree = true
+    this.loadingCandidates = true
+    this.initializationError = ''
+    try {
+      const [departments, initialEmployees] = await Promise.all([
+        this.config.transport.loadDepartmentTree(),
+        initialIds.length
+          ? this.config.transport.resolveEmployees({ employeeIds: initialIds })
+          : Promise.resolve([]),
+      ])
+      if (!this.isCurrentOpen(generation)) return
+      this.departments = normalizeDepartments(departments)
+      this.expandedDepartmentIds = initialExpandedDepartments(this.departments)
+      this.selectedEmployees = mapEmployees(initialEmployees, initialIds)
+      await this.loadCandidates(1, false, generation)
+    } catch (error) {
+      if (!this.isCurrentOpen(generation)) return
+      const detail = selectorErrorDetail(error)
+      this.initializationError = detail.message
+      this.dispatchSelectorError(detail)
+    } finally {
+      if (this.isCurrentOpen(generation)) {
+        this.loadingTree = false
+        this.loadingCandidates = false
+      }
+    }
+  }
+
+  private async loadCandidates(
+    page: number,
+    append: boolean,
+    openGeneration = this.openGeneration,
+  ): Promise<void> {
+    if (!this.config || !this.isCurrentOpen(openGeneration)) return
+    const generation = ++this.loadGeneration
+    if (append) this.loadingMore = true
+    else this.loadingCandidates = true
+    this.candidateError = ''
+    try {
+      const keyword = this.keyword.trim()
+      const input = {
+        page,
+        pageSize: PAGE_SIZE,
+        employmentStatuses: this.selectableEmploymentStatuses,
+      }
+      const result =
+        keyword || this.activeDepartmentId === ALL_EMPLOYEES_ID
+          ? await this.config.transport.searchEmployees({ ...input, keyword })
+          : await this.config.transport.listDepartmentEmployees({
+              ...input,
+              departmentId: this.activeDepartmentId,
+            })
+      if (!this.isCurrentLoad(openGeneration, generation)) return
+      const items = normalizeEmployees(result.items)
+      this.candidates = append ? dedupeEmployees([...this.candidates, ...items]) : items
+      this.currentPage = result.page
+      this.hasMore = result.hasMore
+    } catch (error) {
+      if (!this.isCurrentLoad(openGeneration, generation)) return
+      const detail = selectorErrorDetail(error)
+      this.candidateError = detail.message
+      this.dispatchSelectorError(detail)
+    } finally {
+      if (this.isCurrentLoad(openGeneration, generation)) {
+        this.loadingCandidates = false
+        this.loadingMore = false
+      }
+    }
+  }
+
+  private readonly submitSearch = (event: SubmitEvent) => {
+    event.preventDefault()
+    void this.loadCandidates(1, false)
+  }
+
+  private readonly updateKeyword = (event: InputEvent) => {
+    this.keyword = (event.currentTarget as HTMLInputElement).value
+  }
+
+  private selectDepartment(departmentId: string): void {
+    if (this.activeDepartmentId === departmentId && !this.keyword.trim()) return
+    this.activeDepartmentId = departmentId
+    this.keyword = ''
+    void this.loadCandidates(1, false)
+  }
+
+  private toggleDepartment(departmentId: string): void {
+    const expanded = new Set(this.expandedDepartmentIds)
+    if (expanded.has(departmentId)) expanded.delete(departmentId)
+    else expanded.add(departmentId)
+    this.expandedDepartmentIds = expanded
+  }
+
+  private toggleEmployee(employee: OrganizationEmployeeSelectionItem): void {
+    this.selectionMessage = ''
+    if (!this.selectableEmploymentStatuses.includes(employee.employmentStatus)) {
+      this.selectionMessage = '该员工当前不可选择'
+      return
+    }
+    if (this.selectedEmployees.has(employee.employeeId)) {
+      this.removeEmployee(employee.employeeId)
+      return
+    }
+    const reason = this.disabledSelections.get(employee.employeeId)
+    if (reason) {
+      this.selectionMessage = reason
+      return
+    }
+    if (this.singleSelection) {
+      const protectedSelection = [...this.selectedEmployees.keys()].find((employeeId) =>
+        this.disabledSelections.has(employeeId),
+      )
+      if (protectedSelection) {
+        this.selectionMessage =
+          this.disabledSelections.get(protectedSelection) ?? '当前成员不可替换'
+        return
+      }
+      this.selectedEmployees = new Map([[employee.employeeId, employee]])
+      return
+    }
+    if (this.maxSelection !== null && this.selectedEmployees.size >= this.maxSelection) {
+      this.selectionMessage = `最多可选择 ${this.maxSelection} 名成员`
+      return
+    }
+    const selected = new Map(this.selectedEmployees)
+    selected.set(employee.employeeId, employee)
+    this.selectedEmployees = selected
+  }
+
+  private removeEmployee(employeeId: string): void {
+    const reason = this.disabledSelections.get(employeeId)
+    if (reason) {
+      this.selectionMessage = reason
+      return
+    }
+    const selected = new Map(this.selectedEmployees)
+    selected.delete(employeeId)
+    this.selectedEmployees = selected
+    this.selectionMessage = ''
+  }
+
+  private readonly loadMore = () => {
+    if (!this.hasMore || this.loadingMore) return
+    void this.loadCandidates(this.currentPage + 1, true)
+  }
+
+  private readonly retryCandidates = () => {
+    void this.loadCandidates(this.currentPage || 1, false)
+  }
+
+  private readonly retryInitialization = () => {
+    this.initializationError = ''
+    void this.initialize(this.openGeneration, this.initialSelectedEmployeeIds)
+  }
+
+  private readonly confirmSelection = () => {
+    const employees = [...this.selectedEmployees.values()].map(cloneEmployee)
+    if (this.singleSelection && employees.length !== 1) {
+      this.selectionMessage = '请选择一名成员'
+      return
+    }
+    this.dispatchSelectionConfirmed(employees)
+    this.finishClose(false)
+  }
+
+  /** @internal Overridden by the single employee selector to emit a scalar result. */
+  protected dispatchSelectionConfirmed(employees: OrganizationEmployeeSelectionItem[]): void {
+    this.dispatchEvent(
+      new CustomEvent<OrganizationMultiEmployeeSelectionConfirmedDetail>('selection-confirmed', {
+        detail: {
+          employeeIds: employees.map(({ employeeId }) => employeeId),
+          employees,
+        },
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+
+  private readonly handleBackdropMouseDown = () => {
+    this.close()
+  }
+
+  private readonly handleWindowKeydown = (event: KeyboardEvent) => {
+    if (!this.visible) return
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      this.close()
+      return
+    }
+    if (event.key !== 'Tab') return
+    const focusable = this.focusableElements
+    if (!focusable.length) return
+    const first = focusable[0]
+    const last = focusable.at(-1)
+    if (event.shiftKey && this.shadowRoot?.activeElement === first) {
+      event.preventDefault()
+      last?.focus()
+    } else if (!event.shiftKey && this.shadowRoot?.activeElement === last) {
+      event.preventDefault()
+      first?.focus()
+    }
+  }
+
+  private get focusableElements(): HTMLElement[] {
+    return [
+      ...(this.shadowRoot?.querySelectorAll<HTMLElement>('button:not(:disabled), input') ?? []),
+    ].filter((element) => element.offsetParent !== null || element.getClientRects().length > 0)
+  }
+
+  private focusDialog(): void {
+    this.shadowRoot?.querySelector<HTMLInputElement>('.search-row input')?.focus()
+  }
+
+  private finishClose(cancelled: boolean): void {
+    if (!this.visible && !this.openingPromise) return
+    this.visible = false
+    this.openGeneration += 1
+    this.loadGeneration += 1
+    this.openingPromise = null
+    window.removeEventListener('keydown', this.handleWindowKeydown)
+    if (cancelled) {
+      this.dispatchEvent(
+        new CustomEvent('selection-cancelled', {
+          detail: {},
+          bubbles: true,
+          composed: true,
+        }),
+      )
+    }
+    const focus = this.previousFocus
+    this.previousFocus = null
+    this.resetLoadedData()
+    queueMicrotask(() => focus?.focus())
+  }
+
+  private resetState(): void {
+    this.visible = false
+    this.dialogTitle = '选择组织成员'
+    this.disabledSelections = new Map()
+    this.maxSelection = null
+    this.selectableEmploymentStatuses = ['active']
+    this.initialSelectedEmployeeIds = []
+    window.removeEventListener('keydown', this.handleWindowKeydown)
+    this.resetLoadedData()
+  }
+
+  private resetLoadedData(): void {
+    this.departments = []
+    this.activeDepartmentId = ALL_EMPLOYEES_ID
+    this.expandedDepartmentIds = new Set()
+    this.candidates = []
+    this.selectedEmployees = new Map()
+    this.keyword = ''
+    this.currentPage = 1
+    this.hasMore = false
+    this.loadingTree = false
+    this.loadingCandidates = false
+    this.loadingMore = false
+    this.candidateError = ''
+    this.initializationError = ''
+    this.selectionMessage = ''
+  }
+
+  private isCurrentOpen(generation: number): boolean {
+    return this.visible && generation === this.openGeneration
+  }
+
+  private isCurrentLoad(openGeneration: number, loadGeneration: number): boolean {
+    return this.isCurrentOpen(openGeneration) && loadGeneration === this.loadGeneration
+  }
+
+  private dispatchSelectorError(detail: OrganizationMultiEmployeeSelectorErrorDetail): void {
+    this.dispatchEvent(
+      new CustomEvent<OrganizationMultiEmployeeSelectorErrorDetail>('selector-error', {
+        detail,
+        bubbles: true,
+        composed: true,
+      }),
+    )
+  }
+}
+
+function validateConfig(config: OrganizationMultiEmployeeSelectorConfig): void {
+  if (!config || typeof config !== 'object') {
+    throw new TypeError('Organization employee selector config is required')
+  }
+  if (typeof config.applicationName !== 'string' || !config.applicationName.trim()) {
+    throw new TypeError('Organization employee selector applicationName is required')
+  }
+  if (config.applicationName.trim().length > 255) {
+    throw new TypeError('Organization employee selector applicationName is too long')
+  }
+  const transport = config.transport
+  if (
+    !transport ||
+    typeof transport.loadDepartmentTree !== 'function' ||
+    typeof transport.listDepartmentEmployees !== 'function' ||
+    typeof transport.searchEmployees !== 'function' ||
+    typeof transport.resolveEmployees !== 'function'
+  ) {
+    throw new TypeError('Organization employee selector transport is invalid')
+  }
+}
+
+function normalizeOpenOptions(options: OrganizationMultiEmployeeSelectorOpenOptions) {
+  if (!options || typeof options !== 'object') {
+    throw new TypeError('Organization employee selector open options are invalid')
+  }
+  if (options.enableDepartmentBulkSelection === true) {
+    throw new TypeError('Department bulk selection is not supported in this release')
+  }
+  const title = optionalText(options.title, 80) || '选择组织成员'
+  const initialSelectedEmployeeIds = uniqueIdentifiers(options.initialSelectedEmployeeIds ?? [])
+  const disabledSelections = new Map<string, string>()
+  for (const item of options.disabledSelections ?? []) {
+    if (!item || typeof item !== 'object') {
+      throw new TypeError('Disabled employee selection is invalid')
+    }
+    const employeeId = identifier(item.employeeId)
+    if (!employeeId) throw new TypeError('Disabled employee id is invalid')
+    disabledSelections.set(employeeId, optionalText(item.reason, 120))
+  }
+  const maxSelection = options.maxSelection
+  if (maxSelection !== undefined && (!Number.isSafeInteger(maxSelection) || maxSelection < 2)) {
+    throw new TypeError('maxSelection must be an integer greater than or equal to 2')
+  }
+  const statuses = options.selectableEmploymentStatuses ?? ['active']
+  if (!Array.isArray(statuses) || statuses.length !== 1 || statuses[0] !== 'active') {
+    throw new TypeError('Only active employees are selectable in this release')
+  }
+  return {
+    title,
+    initialSelectedEmployeeIds,
+    disabledSelections,
+    maxSelection: maxSelection ?? null,
+    selectableEmploymentStatuses: ['active'] as readonly string[],
+  }
+}
+
+function normalizeDepartments(
+  departments: readonly OrganizationDepartmentNode[],
+): readonly OrganizationDepartmentNode[] {
+  if (!Array.isArray(departments)) throw new TypeError('Department tree response is invalid')
+  const seen = new Set<string>()
+  return departments.map((department) => {
+    if (!department || typeof department !== 'object') {
+      throw new TypeError('Department tree response is invalid')
+    }
+    const id = identifier(department.id)
+    const name = optionalText(department.name, 100)
+    if (!id || !name || seen.has(id)) throw new TypeError('Department tree response is invalid')
+    seen.add(id)
+    return Object.freeze({
+      id,
+      name,
+      ...(identifier(department.parentId) ? { parentId: identifier(department.parentId) } : {}),
+      depth: nonNegativeInteger(department.depth),
+      ...(department.memberCount === undefined
+        ? {}
+        : { memberCount: nonNegativeInteger(department.memberCount) }),
+      ...(department.hasChildren === undefined
+        ? {}
+        : { hasChildren: department.hasChildren === true }),
+    })
+  })
+}
+
+function normalizeEmployees(
+  employees: readonly OrganizationEmployeeSelectionItem[],
+): readonly OrganizationEmployeeSelectionItem[] {
+  if (!Array.isArray(employees)) throw new TypeError('Employee response is invalid')
+  return dedupeEmployees(employees.map(normalizeEmployee))
+}
+
+function normalizeEmployee(employee: OrganizationEmployeeSelectionItem) {
+  if (!employee || typeof employee !== 'object') throw new TypeError('Employee response is invalid')
+  const employeeId = identifier(employee.employeeId)
+  const displayName = optionalText(employee.displayName, 80)
+  if (!employeeId || !displayName) throw new TypeError('Employee response is invalid')
+  const status = employee.employmentStatus
+  if (!['active', 'pending', 'rejected', 'left', 'unknown'].includes(status)) {
+    throw new TypeError('Employee response is invalid')
+  }
+  const departmentIds = uniqueIdentifiers(employee.departmentIds ?? [])
+  const departmentNames = uniqueText(employee.departmentNames ?? [], 100)
+  const maskedMobile = optionalText(employee.maskedMobile, 32)
+  const result: OrganizationEmployeeSelectionItem = {
+    employeeId,
+    displayName,
+    departmentIds,
+    departmentNames,
+    employmentStatus: status,
+  }
+  if (maskedMobile && !/^1[3-9]\d{9}$/.test(maskedMobile)) result.maskedMobile = maskedMobile
+  const primaryDepartmentId = identifier(employee.primaryDepartmentId)
+  const primaryDepartmentName = optionalText(employee.primaryDepartmentName, 100)
+  if (primaryDepartmentId) result.primaryDepartmentId = primaryDepartmentId
+  if (primaryDepartmentName) result.primaryDepartmentName = primaryDepartmentName
+  const avatar = normalizeAvatar(employee.avatar)
+  if (avatar) result.avatar = avatar
+  return Object.freeze(result)
+}
+
+function normalizeAvatar(
+  value: OrganizationEmployeeAvatar | undefined,
+): OrganizationEmployeeAvatar | undefined {
+  if (!value) return undefined
+  if (value.kind === 'file') {
+    const fileId = optionalText(value.fileId, 128)
+    return fileId
+      ? Object.freeze({ kind: 'file' as const, fileId })
+      : Object.freeze({ kind: 'none' as const })
+  }
+  if (value.kind === 'color') {
+    const color = optionalText(value.color, 32)
+    return /^#[0-9a-fA-F]{6}$/.test(color)
+      ? Object.freeze({ kind: 'color' as const, color })
+      : Object.freeze({ kind: 'none' as const })
+  }
+  return Object.freeze({ kind: 'none' as const })
+}
+
+function mapEmployees(
+  employees: readonly OrganizationEmployeeSelectionItem[],
+  requestedIds: readonly string[],
+): ReadonlyMap<string, OrganizationEmployeeSelectionItem> {
+  const normalized = normalizeEmployees(employees)
+  const byId = new Map(normalized.map((employee) => [employee.employeeId, employee]))
+  const result = new Map<string, OrganizationEmployeeSelectionItem>()
+  for (const id of requestedIds) {
+    const employee = byId.get(id)
+    if (employee) result.set(id, employee)
+  }
+  return result
+}
+
+function dedupeEmployees(
+  employees: readonly OrganizationEmployeeSelectionItem[],
+): OrganizationEmployeeSelectionItem[] {
+  return [...new Map(employees.map((employee) => [employee.employeeId, employee])).values()]
+}
+
+function initialExpandedDepartments(
+  departments: readonly OrganizationDepartmentNode[],
+): ReadonlySet<string> {
+  return new Set(departments.filter(({ depth }) => depth === 0).map(({ id }) => id))
+}
+
+function cloneEmployee(
+  employee: OrganizationEmployeeSelectionItem,
+): OrganizationEmployeeSelectionItem {
+  return {
+    ...employee,
+    ...(employee.avatar ? { avatar: { ...employee.avatar } } : {}),
+    departmentIds: [...employee.departmentIds],
+    departmentNames: [...employee.departmentNames],
+  }
+}
+
+function selectorErrorDetail(error: unknown): OrganizationMultiEmployeeSelectorErrorDetail {
+  if (error instanceof OrganizationMultiEmployeeSelectorTransportError) {
+    if (error.code === 'AUTH_REQUIRED') {
+      return { code: error.code, message: '登录状态已失效，请重新登录后再试。', retryable: false }
+    }
+    if (error.code === 'FORBIDDEN') {
+      return { code: error.code, message: '当前账号无权读取组织通讯录。', retryable: false }
+    }
+    return {
+      code: error.code,
+      message: '组织成员加载失败，请稍后重试。',
+      retryable: error.retryable,
+    }
+  }
+  return { code: 'UNKNOWN', message: '组织成员加载失败，请稍后重试。', retryable: true }
+}
+
+function employeeMeta(employee: OrganizationEmployeeSelectionItem, trailing = ''): string {
+  return [
+    employee.primaryDepartmentName || employee.departmentNames[0] || '',
+    employee.maskedMobile || '',
+    trailing,
+  ]
+    .filter(Boolean)
+    .join(' · ')
+}
+
+function uniqueIdentifiers(values: readonly unknown[]): string[] {
+  if (!Array.isArray(values)) throw new TypeError('Employee ids must be an array')
+  const result: string[] = []
+  for (const value of values) {
+    const normalized = identifier(value)
+    if (!normalized) throw new TypeError('Employee id is invalid')
+    if (!result.includes(normalized)) result.push(normalized)
+  }
+  return result
+}
+
+function uniqueText(values: readonly unknown[], maxLength: number): string[] {
+  if (!Array.isArray(values)) return []
+  return [...new Set(values.map((value) => optionalText(value, maxLength)).filter(Boolean))]
+}
+
+function identifier(value: unknown): string {
+  const result = typeof value === 'string' || typeof value === 'number' ? String(value).trim() : ''
+  return /^[1-9]\d{0,19}$/.test(result) ? result : ''
+}
+
+function optionalText(value: unknown, maxLength: number): string {
+  if (value === undefined || value === null) return ''
+  if (typeof value !== 'string') throw new TypeError('Text value must be a string')
+  const normalized = value.trim()
+  if (normalized.length > maxLength) throw new TypeError('Text value is too long')
+  return normalized
+}
+
+function nonNegativeInteger(value: unknown): number {
+  return typeof value === 'number' && Number.isSafeInteger(value) && value >= 0 ? value : 0
+}
+
+function icon(
+  name: 'close' | 'check' | 'organization' | 'department' | 'chevron-right' | 'chevron-down',
+): TemplateResult {
+  if (name === 'close') {
+    return html`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18" /></svg>`
+  }
+  if (name === 'check') {
+    return html`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4 10-10" /></svg>`
+  }
+  if (name === 'organization') {
+    return html`<svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M4 21V5l8-3 8 3v16M2 21h20M8 8h1M15 8h1M8 12h1M15 12h1M8 16h1M15 16h1" />
+    </svg>`
+  }
+  if (name === 'department') {
+    return html`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 7h7l2 2h9v10H3z" /></svg>`
+  }
+  const path = name === 'chevron-down' ? 'm7 10 5 5 5-5' : 'm10 7 5 5-5 5'
+  return html`<svg viewBox="0 0 24 24" aria-hidden="true"><path d=${path} /></svg>`
+}