Skip to main content

CODITECT Pattern Library: Complete Organism Specifications

Missing Organisms - Full Implementation Specs

O6: Form​

Purpose: Complex form layouts with validation and submission

Test Criteria:

composition:
  - molecules: multiple_form_fields
  - atoms: buttons (submit, cancel)
  - organisms: validation_messages
  
behavior:
  - validation: on blur or submit
  - error_display: inline with field
  - submit: preventDefault handling
  - loading_state: during submission
  
accessibility:
  - role: form
  - aria_labelledby: form title
  - error_summary: at top if multiple errors
  - required_fields: marked clearly

Variants:

<!-- Basic Form -->
<form class="form" aria-labelledby="form-title" data-testid="form-basic">
  <h2 id="form-title" class="form__title">Create Account</h2>
  
  <div class="form__section">
    <h3 class="form__section-title">Personal Information</h3>
    
    <div class="form__row">
      <div class="form-field">
        <label for="first-name" class="form-field__label">
          First Name
          <span class="form-field__required" aria-label="required">*</span>
        </label>
        <input 
          id="first-name" 
          type="text" 
          class="form-field__input" 
          required 
          aria-required="true"
        />
      </div>
      
      <div class="form-field">
        <label for="last-name" class="form-field__label">
          Last Name
          <span class="form-field__required" aria-label="required">*</span>
        </label>
        <input 
          id="last-name" 
          type="text" 
          class="form-field__input" 
          required 
          aria-required="true"
        />
      </div>
    </div>
    
    <div class="form-field">
      <label for="email" class="form-field__label">
        Email Address
        <span class="form-field__required" aria-label="required">*</span>
      </label>
      <input 
        id="email" 
        type="email" 
        class="form-field__input" 
        required 
        aria-required="true"
      />
      <span class="form-field__hint">We'll never share your email</span>
    </div>
  </div>
  
  <div class="form__section">
    <h3 class="form__section-title">Account Security</h3>
    
    <div class="form-field">
      <label for="password" class="form-field__label">
        Password
        <span class="form-field__required" aria-label="required">*</span>
      </label>
      <input 
        id="password" 
        type="password" 
        class="form-field__input" 
        required 
        aria-required="true"
        aria-describedby="password-hint"
      />
      <span id="password-hint" class="form-field__hint">
        At least 8 characters with numbers and symbols
      </span>
    </div>
  </div>
  
  <div class="form__actions">
    <button type="submit" class="button button--primary">
      Create Account
    </button>
    <button type="button" class="button button--secondary">
      Cancel
    </button>
  </div>
</form>

<!-- Form with Validation Errors -->
<form class="form" data-testid="form-with-errors">
  <!-- Error Summary -->
  <div class="form__error-summary" role="alert" aria-labelledby="error-summary-title">
    <h3 id="error-summary-title" class="form__error-summary-title">
      Please fix the following errors:
    </h3>
    <ul class="form__error-list">
      <li><a href="#email">Email address is invalid</a></li>
      <li><a href="#password">Password is too short</a></li>
    </ul>
  </div>
  
  <div class="form-field form-field--error">
    <label for="email" class="form-field__label">
      Email Address
      <span class="form-field__required" aria-label="required">*</span>
    </label>
    <input 
      id="email" 
      type="email" 
      class="form-field__input" 
      aria-invalid="true"
      aria-describedby="email-error"
    />
    <span id="email-error" class="form-field__error" role="alert">
      Please enter a valid email address
    </span>
  </div>
</form>

<!-- Inline Form (Compact) -->
<form class="form form--inline" data-testid="form-inline">
  <div class="form__row">
    <div class="form-field">
      <label for="search" class="sr-only">Search</label>
      <input 
        id="search" 
        type="search" 
        class="form-field__input" 
        placeholder="Search..."
      />
    </div>
    <button type="submit" class="button button--primary">Search</button>
  </div>
</form>

<!-- Form with Loading State -->
<form class="form" aria-busy="true" data-testid="form-loading">
  <div class="form__fields">
    <!-- Fields here -->
  </div>
  
  <div class="form__actions">
    <button type="submit" class="button button--primary button--loading" disabled>
      <span class="button__spinner"></span>
      Creating...
    </button>
  </div>
</form>

CSS:

.form {
  max-width: 600px;
  margin: 0 auto;
}

.form__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-6);
}

.form__section {
  margin-bottom: var(--space-8);
}

.form__section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-gray-200);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.form__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-200);
}

/* Error Summary */
.form__error-summary {
  padding: var(--space-4);
  background: var(--color-red-50);
  border: 1px solid var(--color-red-200);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--space-6);
}

.form__error-summary-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-red-900);
  margin-bottom: var(--space-2);
}

.form__error-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.form__error-list li {
  margin-bottom: var(--space-1);
}

.form__error-list a {
  color: var(--color-red-700);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.form__error-list a:hover {
  text-decoration: underline;
}

/* Inline Form */
.form--inline {
  max-width: 100%;
}

.form--inline .form__row {
  grid-template-columns: 1fr auto;
  align-items: end;
}

/* Loading State */
.form[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 640px) {
  .form__row {
    grid-template-columns: 1fr;
  }
  
  .form__actions {
    flex-direction: column-reverse;
  }
  
  .form__actions .button {
    width: 100%;
  }
}

O7: Sidebar​

Purpose: Side navigation panel with sections and links

Test Criteria:

composition:
  - atoms: links, icons
  - molecules: navigation_groups
  - layout: sticky positioning
  
behavior:
  - collapsible: toggle expanded/collapsed
  - active_item: highlight current page
  - scrollable: overflow-y auto
  - responsive: drawer on mobile
  
accessibility:
  - role: navigation
  - aria_label: "Main navigation"
  - aria_current: "page" on active
  - keyboard_navigable: focus management

Variants:

<!-- Standard Sidebar -->
<aside class="sidebar" role="navigation" aria-label="Main navigation" data-testid="sidebar">
  <div class="sidebar__header">
    <img src="/logo.svg" alt="Company" class="sidebar__logo" />
    <button class="sidebar__toggle" aria-label="Collapse sidebar">
      <svg width="20" height="20">
        <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2"/>
      </svg>
    </button>
  </div>
  
  <nav class="sidebar__nav">
    <div class="sidebar__section">
      <h3 class="sidebar__section-title">Main</h3>
      
      <a href="/dashboard" class="sidebar__link sidebar__link--active" aria-current="page">
        <svg class="sidebar__icon" width="20" height="20">
          <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" stroke="currentColor" stroke-width="2"/>
        </svg>
        <span class="sidebar__text">Dashboard</span>
      </a>
      
      <a href="/projects" class="sidebar__link">
        <svg class="sidebar__icon" width="20" height="20">
          <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" stroke="currentColor" stroke-width="2"/>
        </svg>
        <span class="sidebar__text">Projects</span>
        <span class="sidebar__badge">12</span>
      </a>
      
      <a href="/team" class="sidebar__link">
        <svg class="sidebar__icon" width="20" height="20">
          <path d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" stroke-width="2"/>
        </svg>
        <span class="sidebar__text">Team</span>
      </a>
    </div>
    
    <div class="sidebar__section">
      <h3 class="sidebar__section-title">Settings</h3>
      
      <a href="/settings" class="sidebar__link">
        <svg class="sidebar__icon" width="20" height="20">
          <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" stroke="currentColor" stroke-width="2"/>
          <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke="currentColor" stroke-width="2"/>
        </svg>
        <span class="sidebar__text">Settings</span>
      </a>
    </div>
  </nav>
  
  <div class="sidebar__footer">
    <button class="sidebar__user">
      <img src="/avatar.jpg" alt="User" class="sidebar__avatar" />
      <div class="sidebar__user-info">
        <div class="sidebar__user-name">John Doe</div>
        <div class="sidebar__user-email">john@example.com</div>
      </div>
    </button>
  </div>
</aside>

<!-- Collapsed Sidebar -->
<aside class="sidebar sidebar--collapsed" data-testid="sidebar-collapsed">
  <div class="sidebar__header">
    <img src="/icon.svg" alt="App" class="sidebar__logo" />
  </div>
  
  <nav class="sidebar__nav">
    <a href="/dashboard" class="sidebar__link" aria-label="Dashboard">
      <svg class="sidebar__icon" width="20" height="20">
        <!-- icon -->
      </svg>
    </a>
  </nav>
</aside>

<!-- Mobile Sidebar (Drawer) -->
<aside class="sidebar sidebar--mobile" data-testid="sidebar-mobile">
  <div class="sidebar__overlay" aria-hidden="true"></div>
  <div class="sidebar__drawer" role="dialog" aria-modal="true">
    <!-- Same content as standard sidebar -->
  </div>
</aside>

CSS:

.sidebar {
  display: flex;
  flex-direction: column;
  width: 280px;
  height: 100vh;
  background: var(--color-white);
  border-right: 1px solid var(--color-gray-200);
  position: sticky;
  top: 0;
  transition: width var(--transition-base);
}

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.sidebar__logo {
  height: 32px;
  width: auto;
}

.sidebar__toggle {
  padding: var(--space-2);
  background: none;
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  color: var(--color-gray-600);
  transition: background-color var(--transition-fast);
}

.sidebar__toggle:hover {
  background: var(--color-gray-100);
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

.sidebar__section {
  margin-bottom: var(--space-6);
}

.sidebar__section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--color-gray-700);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all var(--transition-fast);
}

.sidebar__link:hover {
  background: var(--color-gray-50);
  color: var(--color-gray-900);
}

.sidebar__link--active {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
  border-left-color: var(--color-blue-500);
  font-weight: var(--font-weight-medium);
}

.sidebar__icon {
  flex-shrink: 0;
  color: currentColor;
}

.sidebar__text {
  flex: 1;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--color-gray-200);
  color: var(--color-gray-700);
  border-radius: 10px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.sidebar__link--active .sidebar__badge {
  background: var(--color-blue-100);
  color: var(--color-blue-700);
}

.sidebar__footer {
  padding: var(--space-4);
  border-top: 1px solid var(--color-gray-200);
}

.sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2);
  background: none;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--transition-fast);
}

.sidebar__user:hover {
  background: var(--color-gray-50);
}

.sidebar__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.sidebar__user-info {
  flex: 1;
  min-width: 0;
}

.sidebar__user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-email {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapsed State */
.sidebar--collapsed {
  width: 80px;
}

.sidebar--collapsed .sidebar__text,
.sidebar--collapsed .sidebar__badge,
.sidebar--collapsed .sidebar__section-title,
.sidebar--collapsed .sidebar__user-info {
  display: none;
}

.sidebar--collapsed .sidebar__link {
  justify-content: center;
}

/* Mobile */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    z-index: 1000;
    transform: translateX(-100%);
  }
  
  .sidebar--open {
    transform: translateX(0);
  }
  
  .sidebar__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }
  
  .sidebar--open .sidebar__overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

O8: UserMenu​

Purpose: Dropdown menu for user account actions

Test Criteria:

composition:
  - atoms: avatar, links, dividers
  - molecules: dropdown_menu
  
behavior:
  - toggle: click to open/close
  - close_outside: click outside closes
  - keyboard: esc closes, arrows navigate
  - position: align to trigger element
  
accessibility:
  - role: menu
  - aria_expanded: true/false on trigger
  - aria_haspopup: menu
  - focus_trap: when open

Variants:

<!-- User Menu (Closed) -->
<div class="user-menu" data-testid="user-menu">
  <button 
    class="user-menu__trigger" 
    aria-expanded="false"
    aria-haspopup="menu"
    aria-controls="user-menu-dropdown"
  >
    <img src="/avatar.jpg" alt="John Doe" class="user-menu__avatar" />
    <span class="user-menu__name">John Doe</span>
    <svg class="user-menu__icon" width="16" height="16">
      <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2"/>
    </svg>
  </button>
</div>

<!-- User Menu (Open) -->
<div class="user-menu user-menu--open">
  <button 
    class="user-menu__trigger" 
    aria-expanded="true"
    aria-haspopup="menu"
    aria-controls="user-menu-dropdown"
  >
    <img src="/avatar.jpg" alt="John Doe" class="user-menu__avatar" />
    <span class="user-menu__name">John Doe</span>
    <svg class="user-menu__icon" width="16" height="16">
      <path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2"/>
    </svg>
  </button>
  
  <div 
    id="user-menu-dropdown"
    class="user-menu__dropdown" 
    role="menu"
    aria-orientation="vertical"
  >
    <div class="user-menu__header">
      <div class="user-menu__user-name">John Doe</div>
      <div class="user-menu__user-email">john@example.com</div>
    </div>
    
    <hr class="user-menu__divider" role="separator" />
    
    <a href="/profile" class="user-menu__item" role="menuitem">
      <svg class="user-menu__item-icon" width="16" height="16">
        <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="currentColor" stroke-width="2"/>
        <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" fill="none"/>
      </svg>
      <span>Your Profile</span>
    </a>
    
    <a href="/settings" class="user-menu__item" role="menuitem">
      <svg class="user-menu__item-icon" width="16" height="16">
        <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" stroke="currentColor" stroke-width="2"/>
        <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" stroke="currentColor" stroke-width="2"/>
      </svg>
      <span>Settings</span>
    </a>
    
    <a href="/billing" class="user-menu__item" role="menuitem">
      <svg class="user-menu__item-icon" width="16" height="16">
        <rect x="1" y="4" width="22" height="16" rx="2" ry="2" stroke="currentColor" stroke-width="2" fill="none"/>
        <path d="M1 10h22" stroke="currentColor" stroke-width="2"/>
      </svg>
      <span>Billing</span>
    </a>
    
    <hr class="user-menu__divider" role="separator" />
    
    <button class="user-menu__item" role="menuitem">
      <svg class="user-menu__item-icon" width="16" height="16">
        <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4m7 14l5-5-5-5m5 5H9" stroke="currentColor" stroke-width="2"/>
      </svg>
      <span>Sign Out</span>
    </button>
  </div>
</div>

<!-- Compact User Menu (Avatar Only) -->
<div class="user-menu user-menu--compact">
  <button class="user-menu__trigger user-menu__trigger--compact" aria-label="Open user menu">
    <img src="/avatar.jpg" alt="John Doe" class="user-menu__avatar" />
    <span class="user-menu__status"></span>
  </button>
</div>

CSS:

.user-menu {
  position: relative;
  display: inline-block;
}

.user-menu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: none;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.user-menu__trigger:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

.user-menu__trigger:focus-visible {
  outline: 2px solid var(--color-blue-500);
  outline-offset: 2px;
}

.user-menu__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-menu__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-900);
}

.user-menu__icon {
  color: var(--color-gray-600);
  transition: transform var(--transition-fast);
}

.user-menu--open .user-menu__icon {
  transform: rotate(180deg);
}

.user-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 240px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: 1000;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: all var(--transition-base);
}

.user-menu--open .user-menu__dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.user-menu__header {
  padding: var(--space-3);
}

.user-menu__user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-1);
}

.user-menu__user-email {
  font-size: var(--font-size-xs);
  color: var(--color-gray-600);
}

.user-menu__divider {
  margin: var(--space-2) 0;
  border: none;
  border-top: 1px solid var(--color-gray-200);
}

.user-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.user-menu__item:hover {
  background: var(--color-gray-100);
  color: var(--color-gray-900);
}

.user-menu__item:focus-visible {
  outline: 2px solid var(--color-blue-500);
  outline-offset: -2px;
}

.user-menu__item-icon {
  flex-shrink: 0;
  color: var(--color-gray-500);
}

/* Compact variant */
.user-menu__trigger--compact {
  position: relative;
  padding: 0;
  border: none;
  border-radius: 50%;
}

.user-menu__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--color-green-500);
  border: 2px solid var(--color-white);
  border-radius: 50%;
}

JavaScript:

class UserMenu {
  constructor(element) {
    this.element = element;
    this.trigger = element.querySelector('.user-menu__trigger');
    this.dropdown = element.querySelector('.user-menu__dropdown');
    this.isOpen = false;
    
    this.init();
  }
  
  init() {
    this.trigger.addEventListener('click', () => this.toggle());
    document.addEventListener('click', (e) => this.handleClickOutside(e));
    document.addEventListener('keydown', (e) => this.handleKeydown(e));
  }
  
  toggle() {
    this.isOpen = !this.isOpen;
    this.element.classList.toggle('user-menu--open', this.isOpen);
    this.trigger.setAttribute('aria-expanded', this.isOpen);
    
    if (this.isOpen) {
      this.focusFirstItem();
    }
  }
  
  close() {
    this.isOpen = false;
    this.element.classList.remove('user-menu--open');
    this.trigger.setAttribute('aria-expanded', 'false');
  }
  
  handleClickOutside(e) {
    if (this.isOpen && !this.element.contains(e.target)) {
      this.close();
    }
  }
  
  handleKeydown(e) {
    if (!this.isOpen) return;
    
    if (e.key === 'Escape') {
      this.close();
      this.trigger.focus();
    }
    
    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
      e.preventDefault();
      this.navigateItems(e.key === 'ArrowDown' ? 1 : -1);
    }
  }
  
  focusFirstItem() {
    const firstItem = this.dropdown.querySelector('.user-menu__item');
    if (firstItem) {
      firstItem.focus();
    }
  }
  
  navigateItems(direction) {
    const items = Array.from(this.dropdown.querySelectorAll('.user-menu__item'));
    const currentIndex = items.indexOf(document.activeElement);
    const nextIndex = (currentIndex + direction + items.length) % items.length;
    items[nextIndex].focus();
  }
}

// Initialize all user menus
document.querySelectorAll('.user-menu').forEach(menu => {
  new UserMenu(menu);
});

These complete the remaining organisms with production-grade specifications!