feat(PBI-49): add BEM sub-element data-debug-id to components/settings/*

- leave-product-button: root only (single-button component)
- min-quota-editor: __input (number input), __save (save button)
- profile-editor: __username (bio/short-description input), __save (submit)
- role-manager: __roles (checkbox list), __add (save button)
- token-manager: __tokens (active tokens list), __generate (create button)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/settings/min-quota-editor.tsx

@@ -47,10 +47,11 @@ export function MinQuotaEditor({ currentValue, isDemo }: MinQuotaEditorProps) {
           onChange={e => setValue(Number(e.target.value))}
           disabled={isDemo || isPending}
           className="w-24 rounded border border-border bg-surface-container px-3 py-1.5 text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
+          data-debug-id="min-quota-editor__input"
         />
         <span className="text-sm text-muted-foreground">%</span>
         <DemoTooltip show={isDemo}>
-          <Button onClick={handleSave} disabled={isDemo || isPending} size="sm">
+          <Button onClick={handleSave} disabled={isDemo || isPending} size="sm" data-debug-id="min-quota-editor__save">
             Opslaan
           </Button>
         </DemoTooltip>

components/settings/profile-editor.tsx

@@ -138,6 +138,7 @@ export function ProfileEditor({ email, bio, bioDetail, hasAvatar, avatarVersion
             placeholder="Bijv. Full-stack developer bij Acme"
             maxLength={160}
             disabled={isPending}
+            data-debug-id="profile-editor__username"
           />
           <p className="text-xs text-muted-foreground">Max. 160 tekens</p>
         </div>
@@ -159,7 +160,7 @@ export function ProfileEditor({ email, bio, bioDetail, hasAvatar, avatarVersion
         </div>
 
         <div className="flex items-center gap-3">
-          <Button type="submit" size="sm" disabled={isPending}>
+          <Button type="submit" size="sm" disabled={isPending} data-debug-id="profile-editor__save">
             {isPending ? 'Opslaan…' : 'Opslaan'}
           </Button>
           {state && 'success' in state && (

components/settings/role-manager.tsx

@@ -49,7 +49,7 @@ export function RoleManager({ currentRoles, isDemo }: RoleManagerProps) {
   return (
     <div className="bg-surface-container-low border border-border rounded-xl p-5 space-y-4" {...debugProps('role-manager', 'RoleManager', 'components/settings/role-manager.tsx')}>
       <h2 className="text-sm font-medium text-foreground">Mijn rollen</h2>
-      <div className="flex flex-wrap gap-3">
+      <div className="flex flex-wrap gap-3" data-debug-id="role-manager__roles">
         {ALL_ROLES.map(role => (
           <label key={role.value} className="flex items-center gap-2 cursor-pointer">
             <input
@@ -66,7 +66,7 @@ export function RoleManager({ currentRoles, isDemo }: RoleManagerProps) {
       {error && <p className="text-xs text-error">{error}</p>}
       {saved && <p className="text-xs text-success">Rollen opgeslagen.</p>}
       <DemoTooltip show={isDemo}>
-        <Button size="sm" onClick={handleSave} disabled={isDemo}>Opslaan</Button>
+        <Button size="sm" onClick={handleSave} disabled={isDemo} data-debug-id="role-manager__add">Opslaan</Button>
       </DemoTooltip>
     </div>
   )

components/settings/token-manager.tsx

@@ -24,7 +24,7 @@ function CreateSubmitButton({ isDemo }: { isDemo: boolean }) {
   const { pending } = useFormStatus()
   return (
     <DemoTooltip show={isDemo}>
-      <Button type="submit" disabled={isDemo || pending}>
+      <Button type="submit" disabled={isDemo || pending} data-debug-id="token-manager__generate">
         {pending ? 'Aanmaken…' : 'Token aanmaken'}
       </Button>
     </DemoTooltip>
@@ -104,7 +104,7 @@ export function TokenManager({ tokens, isDemo }: TokenManagerProps) {
         {activeTokens.length === 0 ? (
           <p className="text-sm text-muted-foreground">Geen actieve tokens.</p>
         ) : (
-          <div className="bg-surface-container-low border border-border rounded-xl divide-y divide-border">
+          <div className="bg-surface-container-low border border-border rounded-xl divide-y divide-border" data-debug-id="token-manager__tokens">
             {activeTokens.map(token => (
               <div key={token.id} className="flex items-center justify-between px-4 py-3 gap-3">
                 <div>